5

I am initializing the same uiElement multiple times on the same page (on checkout_cart_index / one per cart item)

        <div class="configuration-check" data-mage-init=
        '
                { "Magento_Ui/js/core/app":
                    {"components":
                        { "configurationCheck" :
                            {
                                "component": "configurationCheck",
                                "template" : "Example_Upload/configuration-check",
                                "config" : <?php echo $itemInfo->asJson() ?>
                            }
                        }
                     }
                  }
            '
             data-bind="scope:'configurationCheck'"
        >
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>

configuration-check.js looks like this:

define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Example_Upload/configuration-check'
        },
        /** @inheritdoc */
        initialize: function () {
            this._super();
            return this;
        },

        getInfo: function (field) {
            return this[field];
        }
    });
});

In the template I use getInfo() to get the config data which was given in the initialization.

Now the effect is, that both cart items show the same data, even they are different.

Can this easily be fixed or am I doing a completely wrong approach?

EDIT: I found how to create multiple instances of a view - but how can this be done during Magento's initialization of the components?

EDIT2: I think I need a different component name for each instance. Maybe it can work with a different name or namespace setting in the JSON passed to data-mage-init - but I did not yet find the right combination to make it work.

4

Just after putting the bounty I found the answer myself:

Multiple instances are created, when the key below the "components" structure has a unique ID. The same shall be used in the data-bind attribute:

$htmlId = $block->getJsId() // returns a unique ID

        <div class="configuration-check" data-mage-init=
        '
                { "Magento_Ui/js/core/app":
                    {
                    "components":
                        { "configurationCheck-<?php echo $htmlId ?>" :
                            {
                                "component": "configurationCheck",
                                "template" : "Example_Upload/configuration-check",
                                "config" : <?php echo $itemInfo->asJson() ?>
                            }
                        }
                     }
                  }
            '
             data-bind="scope:'configurationCheck-<?php echo $htmlId ?>'"
        >
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>

That's it ... so simple.

  • 1
    This is not working for me, after changing with unique ID still loading same data for all the items. doing exactly same as you have suggested. – Parth Thummar Jun 25 '18 at 10:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.