0

Some people want the ability to hide special price and only show retail price.

I want to do this in knockout by adding a class to the parent container. This class will be set based on a cookie that is set if someone checks a checkbox.

However, knockout isn't recognizing the connection with the checkbox. I keep getting an error saying "Unable to process binding "checked: function(){return checkedValue } Message: checkedValue is not defined" or if I pass the id of the checkbox, I get an error saying can't load "Magento_Catalog/js/custom" even though that file shows in the network.

app/design/frontend/{vendor}/{theme}/Magento_Catalog/templates/product/list.phtml

    <div class="products wrapper <?= /* @noEscape */ $viewMode ?> products-<?= /* @noEscape */ $viewMode ?>" data-bind="css: {'hidePrice': checkedValue }">

        <input type="checkbox" data-bind="checked: checkedValue" id="checkbox-1">
    ...
    </div>
    <script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "customer": {
                        "component": "Magento_Catalog/js/custom",
                    }
                }
            }
        }
    }
    </script>

app/design/frontend/{vendor}/{theme}/Magento_Catalog/web/js/custom.js

define([
    'uiComponent',
    'jQuery',
    'ko'
], function (Component, $, ko) {
    'use strict';
    return Component.extend({
        defaults: {
            checkedValue: false,
        },
        initialize: function () {
            this._super();
            this.defaults.checkedValue = $.mage.cookies.get('hidePrice') ? $.mage.cookies.get('hidePrice'): 'false';
        },
        initObservable: function () {
            this._super().observe({ checkedValue: ko.observable(true) });

            this.checkedValue.subscribe(function (newValue) {
                if (newValue) {
                    $.mage.cookies.set('hidePrice', 'true', {});
                } else {
                    $.mage.cookies.set('hidePrice', 'false', {});
                }
            });

            return this;
        }
    });
});

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.