Magento 2: access quote via javascript

Question

I have a piece of javascript that acts upon the reloadPrice function. It inserts a block of html into the dom to add a corresponding sample product (cloth sample for sofas). This works fine so far.

But to make sure a sample does not get added to cart more than once I need to access the quote (check items) via javascript. Now I am struggeling how to do it.

This is my code:

define([
    'jquery',
    'mage/translate',
    'Magento_Checkout/js/model/quote',
    'mage/utils/wrapper'
], function ($, $t, quote, wrapper) {
    'use strict';

    return function(targetModule){

        var reloadPrice = targetModule.prototype._reloadPrice;
        var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original) {
            var result = original();

            var simple = this.options.spConfig.children[this.simpleProduct];

            if (typeof simple != 'undefined') {
                if (simple.sample != '') {

                    console.log(quote.getItems);

                    if ($('#order-sample').length) {
                        $('#order-sample').replaceWith(simple.sample);
                    } else {
                        $('#product-options-wrapper').after(simple.sample);
                    }
                    $('#sample-add-to-cart').catalogAddToCart({
                        addToCartButtonTextDefault: $.mage.__('Order a cloth sample')
                    });
                } else {
                    $('#order-sample').remove();
                }
            }

            return result;
        });

        targetModule.prototype._reloadPrice = reloadPriceWrapper;
        return targetModule;
    };
});

My idea was to inject Magento_Checkout/js/model/quote and check the quote's items using getItems. Unfortunately this does only work inside the cart/checkout. When I use it like above I get the error TypeError: window.checkoutConfig is undefined in the console.

So my question is: how can I access the cart/quote and it's items outside checkout via javascript.

Thank you

@krishna, that's exactly the one which is not available outside of the cart/checkout. — Daan van den Bergh
– Daan van den Bergh, Commented Dec 5, 2019 at 10:47

Daan van den Bergh · Accepted Answer · 2019-12-05 11:00:46Z

I was struggling with a similar matter and I found the following article, by Yireo: https://www.yireo.com/blog/2017-08-20-do-not-depend-on-window-checkoutconfig

In short, when trying to access the quote outside the checkout or cart, you need to collect the information yourself.

The important part for you is to add the information you need to your own JS component, like so:

<script type="text/x-magento-init">
{
    "#dummy": {
        "Magento_Ui/js/core/app": <?php echo $block->getJsLayout();?>
    }
}
</script>

Then create a Block-class which takes care of loading the configuration:

public function getJsLayout()
{
    $this->jsLayout['checkoutConfig'] = $this->configProvider->getConfig();
    return \Zend_Json::encode($this->jsLayout);
}

The above example assumes that you're using dependency injection in the __construct() method to load the \Magento\Checkout\Model\CompositeConfigProvider class as $this->configProvider

Stack Exchange Network

Magento 2: access quote via javascript

1 Answer 1

Your Answer

Hot Network Questions

Magento 2: access quote via javascript

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions