1

I'm a bit lost. I have a component that sits in the minicart that should update when the cart changes (so when subtotal changes). Now I know you have events but I need to fire a JavaScript function when the subtotal changes. I tried looking into Magento 2 imports and exports but I'm stuck and I'm not sure if this is the right way to approach this.

What I'm currently trying is to share the subtotal observable from module-tax with my component.

module-tax/web/js/view/checkout/minicart/subtotal/totals.js

/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'ko',
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function (ko, Component, customerData) {
    'use strict';

    return Component.extend({
        displaySubtotal: ko.observable(true),
        self: this,

        defaults: {
            exportTarget: "minicart_content.subtotal.container.subtotal.subtotal",
            exportTargetProperty: "totals",

            tracks: {
                shouldShowMessage: true
            },

            'exports': {
                'shouldShowMessage': '${$.exportTarget}:${$.exportTargetProperty}'
            }
        },

        /**
         * @override
         */
        initialize: function () {
            this._super();
            this.cart = customerData.get('cart');
        }
    });
});
Vendor/Module/view/frontend/web/js/view/minicart.js
define([
    'ko',
    'uiComponent',
    'jquery',
    'mage/url'
], function (ko, Component, $, url) {
    'use strict';

    return Component.extend({
        html: '',

        defaults: {
            exportTarget: "minicart_content.subtotal.container.subtotal.subtotal",
            exportTargetProperty: "totals",

            'imports': {
                'subtotal': '${$.exportTarget}:${$.exportTargetProperty}'
            }
        },

        initialize: function () {
            this._super();
            this.getData();

            console.log(subtotal);
        },

        getData: function(){
            var thisComponent = this;

            $.ajax({
                url : url.build('/freeshippingbar/index/index'),
                type : 'post',
                dataType : 'json',
                success : function (result) {
                    var mess=$.parseHTML(result);

                    thisComponent.html = '';

                    for(var i = 0; i < mess.length; i++){
                        thisComponent.html+= mess[i].textContent;
                    }
                },
                error: function(error) {
                    console.log('Error: ', error);
                }
            });
        }
    });
});

There might be a better way to achieve what i'm looking to do, if you know anything please tell me.

// UPDATE

I decided to give up on import export and get the cart subtotal trough 'Magento_Customer/js/customer-data', but i'm still stuck on watching/subscribing if that changes. Any idea?

  • You should be able to accomplish this via XML in the layout XML file of your extension. – Aditya Shah Oct 24 '18 at 10:47
1

I ended up using customer-data to get the cart subtotal and then subscribing on that to see changes. After that I fire the getData function.

define([
    'ko',
    'uiComponent',
    'jquery',
    'mage/url',
    'Magento_Customer/js/customer-data'
], function (ko, Component, $, url, customerData) {
    'use strict';

    return Component.extend({
        freeShippingMessage: ko.observable(''),

        initialize: function () {
            this._super();
            this.getData();

            var self = this;

            ko.computed(function() {
                return ko.toJSON(customerData.get('cart')().subtotal);
            }).subscribe(function() {
                self.getData();
            });
        },

        getData: function(){
            var thisComponent = this;

            $.ajax({
                url : url.build('/freeshippingbar/index/index'),
                type : 'post',
                dataType : 'json',
                success : function (result) {
                    var message = $.parseHTML(result);

                    var html = '';

                    for(var i = 0; i < message.length; i++){
                        html+= message[i].textContent;
                    }

                    thisComponent.freeShippingMessage(html);
                }
            });
        }
    });
});

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.