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.


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

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


], function (Component, $, ko) {
    'use strict';
    return Component.extend({
        defaults: {
            checkedValue: false,
        initialize: function () {
            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.