Shopware: Names are just noise and smoke

Shopware Version 6.5.7.3

My colleague Carl told us last week, that it took him a while to get options on Shopware JavaScript frontend plugins working. I was wondering why, I did it a couple of times and had no problems, but after explanation I understood.

Name are not just noise and smoke

I always had the problem that I’m not 100% understanding when to use camelCase, when to use camelCase, PascalCase, snake_case and kebab-case in JavaScript and in database/property stuff. And Carl ran into it, what never happened to me. And to increase the odds it never happens to me, not again to Carl and not to you, this article exists.

Option names are not the same as “activation” selector

When creating a plugin, you register it with PluginManager.register which looks like this:

// vendor/shopware/storefront/Resources/app/storefront/src/plugin-system/plugin.manager.js
register(pluginName, pluginClass, selector = document, options = {})

Or in real life something like this:

PluginManager.register('RapidOrderListingUpdatePlugin', ListingUpdatePlugin, '[data-rapidorder-listingupdate]');

What happens accidentally to me is, that the plugin always had the same name as the selector. But Carl made a smart decision to shorten the selector, because why have so long selector 🤷

Options is the name of your plugin

Unfortunately this didn’t work and the reason why is, that although I and maybe you as well THINK that the selector and the option attribute is connected – it is not. YOU can decide which selector to use, but the options attribute is decided by PluginManager in _mergeOptions:

_mergeOptions(options) {
    const dashedPluginName = StringHelper.toDashCase(this._pluginName);
    const dataAttributeConfig = DomAccess.getDataAttribute(this.el, `data-${dashedPluginName}-config`, false);
    const dataAttributeOptions = DomAccess.getAttribute(this.el, `data-${dashedPluginName}-options`, false);


    // static plugin options
    // previously merged options
    // explicit options when creating a plugin instance with 'new'
    const merge = [
        this.constructor.options,
        this.options,
        options,
    ];

    // options which are set via data-plugin-name-config="config name"
    if (dataAttributeConfig) merge.push(window.PluginConfigManager.get(this._pluginName, dataAttributeConfig));
    // options which are set via data-plugin-name-options="{json..}"
    try {
        if (dataAttributeOptions) merge.push(JSON.parse(dataAttributeOptions));
    } catch (e) {
        console.error(this.el);
        throw new Error(
            `The data attribute "data-${dashedPluginName}-options" could not be parsed to json: ${e.message}`
        );
    }

    return deepmerge.all(
        merge.filter(config => {
            return config instanceof Object && !(config instanceof Array);
        })
            .map(config => config || {})
    );
}