A
A
Andrey Okhotnikov2019-01-17 11:44:35
JavaScript
Andrey Okhotnikov, 2019-01-17 11:44:35

How to enable Knockout in Magento?

Knockout does not work, what am I doing wrong?)
In the layout file I include a template

<container
                        name="product.counter.block"
                        after="product.info.media.thumbs" >

                        <block 
                            class="Magento\Framework\View\Element\Template"
                            name="product.counter"
                            template="Magento_Catalog::product/view/counter.phtml" />

                    </container>

Template file
<div data-bind="scope: 'counter'">
    <div >
        <button click="plus">-</button>
        <span data-bind="text: value"></span>
        <button id="btn-plus">+</button>
    </div>
</div>


<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "counter": {
                        "component": "Magento_Catalog/js/product/view/counter",
                    }
                }
            }
        }
    }
</script>

js file
define(['jquery', 'uiComponent', 'ko'], function($, Component, ko) {
    'use strict';

    return Component.extend({
        initialize: function() {
            this._super();
            this.value = ko.observable(0);
        },        
    });
    
});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question