How can I refresh the cart drawer in the Impulse theme?

Store Design
1

Hi,
I am having some trouble with my shipping message not updating when you remove a product from the cart and I have figured out that the cart drawer needs a refresh for it to update.

can anybody help regarding javascript coding?

In my ajax.cart.liquid it says:

"This is used in both the cart drawer and cart page.
When a quantity is changed, this file is scraped and the .cart__item-price-col
is fully replaced to account for possible cart discounts changing

The cart-wide discount div also replaces what is originally in the cart
as it can change anytime a cart-item changes"

I am therefore thinking I have to change something in the javescipt part where .cart__item-price-col is mentioned, I am right?

The coding is looking like this:

// Reprint the updated row’s price column> // in case discounts have now been applied.> // Also need to update the cart-wide discounts> updateRow: function(key) {> var row = this.form.querySelector(‘.cart__item[data-key="’+ key +‘"]’)> if (!row) {> return> }> > var priceCol = row.querySelector(‘.cart__item-price-col’);> > theme.cart.getCartProductMarkup().then(function(html) {> var markup = this._parseProductHTML(html);> var items = markup.items;> var matchingPrice = items.querySelector(‘.cart__item[data-key="’+key+‘"] .cart__item-price-col’);> if (matchingPrice) {> priceCol.replaceWith(matchingPrice);> }> > this.updateCartDiscounts(markup.discounts);> }.bind(this));> }> > });> > return CartForm;> })();> > theme.collapsibles = (function() {> var selectors = {> trigger: ‘.collapsible-trigger’,> module: ‘.collapsible-content’,> moduleInner: ‘.collapsible-content__inner’> };> > var classes = {> hide: ‘hide’,> open: ‘is-open’,> autoHeight: ‘collapsible–auto-height’> };> > var namespace = ‘.collapsible’;> > var isTransitioning = false;> > function init(scope) {> var el = scope ? scope : document;> el.querySelectorAll(selectors.trigger).forEach(trigger => {> var state = trigger.classList.contains(classes.open);> trigger.setAttribute(‘aria-expanded’, state);> > trigger.off(‘click’ + namespace);> trigger.on(‘click’ + namespace, toggle);> });> }> > function toggle(evt) {> if (isTransitioning) {> return;> }> > isTransitioning = true;> > var el = evt.currentTarget;> var isOpen = el.classList.contains(classes.open);> var moduleId = el.getAttribute(‘aria-controls’);> var container = document.getElementById(moduleId);

a link to my page, if you need it: https://hofstrawagner.dk/

I really hope sombody can help and thank you in advance :slightly_smiling_face:

Best Regards

Maria Jensen

2

@MariaJensen and everyone else who comes across this thread,

In Impulse, once the product has been added to cart, you can update the AJAX cart by instantiating its object and opening it like this:

var cart = new theme.CartDrawer
cart.init()
cart.open();

This will automatically update the cart and animate it.

Kind regards,
Diego

1 Like
3

Hello Diego_ezfy

i need this same solution for Expanse theme

how can i open Drawer ?

please suggest

thanks

1 Like
4

Hello Diego, we use the Impulse theme too and want to update the cart. Where can i put your code? In the Theme.js file maybe??

Kind Regards,

Thomas

5

Hey Diego_ezfy, Thank you very much.
this code is really good and works good in impulse theme.
I was also stuck on it, but you make it easy for me.

1 Like