1

On the same page I have several custom product grids with above them a filter toolbar.

To simplify the case :

<?php foreach ($grids as $id => $grid): ?>
    <div class="container">
        <div id="item-<?php echo $id; ?>"
             class="item"
             data-bind="scope:'filter'"
        >
            <div class="filter-container">
                <!-- ko template: getTemplate() --><!-- /ko -->
                <script type="text/x-magento-init">
                {
                    "#item-<?php echo $id; ?>": {
                        "Magento_Ui/js/core/app": {
                           "components": {
                                "filter": {
                                    "component": "Foo_Bar/js/filter",
                                    "template": "Foo_bar/filter",
                                    "config": {
                                        "currentElement": "#item-<?php echo $id; ?>"
                                    }
                                }
                            }
                        }
                    }
                }
                </script>
            </div>
            <ul class="products-list">
               <li class="product">Product 1</li>
               <li class="product">Product 1</li>
               <li class="product">Product 1</li>
               <li class="product">Product 2</li>
            </ul>
        </div>
    </div>
<?php endforeach; ?>

My JS Component file :

# \Foo\Bar\view\frontend\web\js\filter.js

define([
    'jquery',
    'uiComponent',
    'jquery/ui'
], function ($, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Foo_Bar/filter'
        },
        options: {
            option1: 'option1',
            option2: 'option2'
        },
        initialize: function () {
            this._super();
            this.applyFilters();
            this.getTrigger().on('click', $.proxy(this.triggerFilter, this))
        },
        triggerFilter: function (event) {
            this.applyFilters();
        },
        applyFilters: function () {
            // logic
        },
        getCurrentElement: function () {
            return $(this.currentElement);
        }
    });
});

With that I would like that my filter component is linked to the <div id="item-<?php echo $id; ?>"> element that I can work with the <ul class="products-list"> element.

My questions are :

  • Is JS Component + KOJS template the best way / practice to perform that?
  • Do I have to simply use Magento block + Magento template + RequireJS plugin?
  • Is there a simple way to retrieve the current targeted element in UiComponent without using config node as in my example for the KOJS way?

Your Answer

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

Browse other questions tagged or ask your own question.