Question 36303 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Shopware 6 B2B suite – override typescript plugins – Jquery

In shopware 6 there is this B2B plugin that delivers javascript functionality to the storefront in form of typescript plugin files. These typescript plugins are extremely similar to the regular js plugins in storefront.

This is an example of a filename of a ts plugin of the B2B suite: order-list-new-positions.plugin.ts.

And this is an example of a typescript plugin class definition:

...
interface Endpoints {
    productName: string,
    unitPrice: string,
    create: string,
}

@EventInterface
export default class OrderListNewPositionsPlugin extends window.PluginBaseClass {
    public static options = {
        SELECTOR_ROW: '.new-line-item__row',
        SELECTOR_ROWS: '.new-line-item__rows',
...

So, I try to perform an override on some of the functions on these typescript plugins.
The only relevant resource I found on this is here. In the Javascript section they say typescript plugins can be overriden in two ways:

  1. Like in this code snippet here. I tried this and it doesn’t work because the plugins just don’t exist in the scope of the jquery object. I called the plugins as like $.orderlistMultiEdit, $.orderListMultiEdit, $.orderlistMultiEditPlugin, $.orderListMultiEditPlugin. The plugins are just not registered in the jquery object it seems.

  2. The second option is to try and override them as the regular storefront plugin classes. var OrderlistMultiEditPlugin = require("/var/www/html/custom/plugins/SwagB2bPlatform/SwagB2bPlatform/Resources/app/storefront/src/js/plugins/orderlist-multi-edit.plugin.ts");. Of course this fails and we get syntax errors. Even though (in 2020) they said it will be possible to override these classes as we override shopware storefront js classes. Maybe I can modify the build storefront script to be able to import and process ts files, but it feels wrong.

Thus, the question is: does anyone know how to override b2b storefront ts plugins ? Did anyone have this problem ? Is there a workaround ?

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Update: when trying to import B2B typescript plugins the storefront build script will always fail because the typescript files of b2b suite have dependencies that are not imported when running npm install in shopware storefront. Thus, when you import a typescript plugin from b2b you will encounter errors like this one: Can't resolve 'apexcharts' in '/var/www/html/custom/plugins/SwagB2bPlatform/SwagB2bPlatform/Resources/app/storefront/src/js/plugins'. As of right now I did not find any solution.


  2. 0

    You should be able to override plugins of the B2B suite like any other storefront JS plugin in Shopware 6. Even if they are written in typescript, they’ll have to be registered in the plugin manager eventually. See the documentation here.

    With the B2B suites the typescript plugins are registered like this:

    // from initB2bPlugins.ts
const { register, initializePlugin } = window.PluginManager;
const plugins = require('../plugins');

const pluginNames = Object.keys(plugins);

pluginNames.forEach((pluginName) => {
    const plugin = plugins[pluginName];
    const { initOnSelector } = plugin.prototype;

    if (!initOnSelector || !selectorHits(initOnSelector)) {
        return;
    }

    const registryPluginName = `B2B_${pluginName}`;
    register(registryPluginName, plugin, initOnSelector);
    initializePlugin(registryPluginName, initOnSelector);
});

    So you should be able to override that particular plugin like this:

    const PluginManager = window.PluginManager;
PluginManager.override('B2B_OrderListNewPositionsPlugin', YourPluginOverride, initOnSelector);
    Login or Signup to reply.
  3. 0

    Final answer: it seems this is a known issue, but we don’t have much hope of getting a fix anytime soon.

    enter image description here

    Login or Signup to reply.
  4. 0

    I had similar problem with B2B TypeScript classes override. The problem was that pagination wasn’t reset to page number 1 when other filters where updated. User sometimes ended on empty page as he was still on page number for example 5 when results set had only one page. I found that to solve that B2B bug I need to override handleTriggerEvent method in B2B_AutoSubmitPlugin class. I turned out that overriding B2B is not that simple and I came across your question on stackoverflow 😉

    At the end I solved it by injecting a bit of the code into the PluginManager.register method. It just detects when B2B registers the plugin with name that I want to alter and on the fly create a class that extents from that plugin.

    Here is the working example. Code is in general a bit hacky and probably could be improved but it works fine:

    MyPluginThemesrcResourcesappstorefrontsrcb2b-auto-submit-override.plugin.js

    export const b2bAutoSubmitOverridePlugin = () => {
    const originalRegister = PluginManager.register;

    PluginManager.register = (...args) => {
        if (args[0] === 'B2B_AutoSubmitPlugin') {
            class AutoSubmitOverridePlugin extends args[1] {
                handleTriggerEvent(event) {
                    const eventTarget = event.target;
                    const paginationInput = document.querySelector('.js--b2b-pagination-input');

                    if (paginationInput && !eventTarget.classList.contains('js--b2b-pagination-input')) {
                        paginationInput.value = '1';
                    }

                    super.handleTriggerEvent(event);
                }
            }

            args[1] = AutoSubmitOverridePlugin;
        }

        originalRegister(...args);
    }
}

    MyPluginThemesrcResourcesappstorefrontsrcmain.js

    import { b2bAutoSubmitOverridePlugin } from './b2b-auto-submit-override.plugin';

b2bAutoSubmitOverridePlugin();

    You can override any other TypeScript class from B2B suite by following the same pattern.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search