Cart Drawer Does Not Update Automatically (Dawn Theme)

[SeanConnors]

Hello there!

I am having an issue with my cart drawer and cart. When a customer adds an item to their cart, the cart drawer popup appears, but does not update to show the item they just added. For example, if a customer is adding their first item to their cart, the cart drawer popup shows the cart to be empty even though they just added an item. 

Additionally, if someone clicks off of the cart drawer, and tries to click on their cart, nothing happens. The customer is unable to view cart until they manually refresh the page or go back to the previous page they were on (which is just another way to manually refresh).

Does anybody know how I make the cart drawer show the current cart, or force a refresh when the customer adds an item to the cart? 

Thanks in advance! The store URL is: https://aquafliesdealer.com/

[Moira]

Hey @SeanConnors,

It sounds like you're experiencing an issue with the cart drawer not updating in real-time when items are added to the cart. There are a few potential solutions to this problem, depending on how your cart drawer is implemented.

One possible solution is to use JavaScript to listen for changes to the cart and update the cart drawer accordingly. You can use the addItem event provided by the Shopify API to detect when items are added to the cart, and then use JavaScript to update the cart drawer with the new information.

Another solution is to use AJAX to refresh the cart drawer each time an item is added to the cart. This will ensure that the cart drawer always displays the latest information about the items in the cart.

You can also try using the window.location.reload() method to refresh the page whenever an item is added to the cart. This will force the cart drawer to update with the latest information about the items in the cart.

It's worth noting that these solutions may not work for all implementations of the cart drawer, as the specific details of how the cart drawer is implemented can vary. If you're not sure how to implement these solutions, you may want to consult with a developer or reach out to our support channel for further assistance.

Please visit https://bit.ly/3qqfpfZ to be connected with a member of our support team.

[SeanConnors]

I haven't made many changes to the way the cart works so I feel like it should be a relatively stock change. Do you have any idea which file I would add the logic for this? I'm assuming I would add something roughly like this (though I may be very wrong on the syntax/logic):

{% if addItem %}

window.location.reload()

{% endif %}

However, I don't know where I would place a bit of code like this. Would I add it on the cart-drawer.liquid file, or would it need to go somewhere else? I'm relatively new to the Shopify theme framework, but am interested in learning! Thanks for the help!

[Moira]

@SeanConnors,

As a last resort, use window.location.reload() to refresh the page when an item is added to the cart. This can be a jarring experience for users, as it will cause the page to fully refresh, potentially losing any unsaved data or scroll position on the page.

Instead of using window.location.reload(), you can update the cart information asynchronously using an AJAX request to the Shopify API. This will allow you to update the cart without refreshing the page, which will provide a more seamless experience for users.

To do this, you can use the fetch() function to send an AJAX request to the Shopify API to retrieve the latest cart information. You can then update the cart drawer with this information using JavaScript.

Here is an example of how you might do this:

// Send an AJAX request to the Shopify API to retrieve the latest cart information
fetch('/cart.js')
.then((response) => response.json())
.then((cart) => {
// Update the cart drawer with the latest cart information
updateCartDrawer(cart);
});

function updateCartDrawer(cart) {
// Update the cart drawer with the latest cart information
}

You can place this code in a script tag in the cart-drawer.liquid file, or you can include it in a separate JavaScript file that is loaded on the page. 

[alexmorris]

I have the same issue here, where would you need to run that code above to force a refresh? It seems the cart gets stuck in the empty state until you refresh.

[Sulyhcu]

your function updateCartDrawer(cart) is empty. How can i update the cart drawer?

[alexmorris]

Did you ever solve this? Just ran into same issue 

[mraman]

Have the same issue here as well. Any updates?

[rmate]

Hey folks, I ran into the same issue. I had to dig into the code for 3h+, but finally figured it out. Sharing below, hopefully it saves someone some time.

In my case I have some customization done to the default Dawn theme - which probably you have too. Whether it's PageFly or some other page builder, or custom code, there is a few things that the CartUpdate function is looking for. 

In my case the error happened in the fetchQuantityRules function, which was trying to add and remove some classes from this little label in the Quantity Selector.

 

I had initially removed that part, due to style preference but that's what was breaking.

If you are willing to dig into the code, it's this part in main-product.liquid

<label class="quantity__label form__label" for="Quantity-{{ section.id }}">
  {{ 'products.product.quantity.label' | t }}
  <span class="quantity__rules-cart no-js-hidden{% if cart_qty == 0 %} hidden{% endif %}">
    {%- render 'loading-spinner' -%}
    <span>({{- 'products.product.quantity.in_cart_html' | t:quantity:cart_qty -}})</span>
  </span>
</label>

If you're using a landing page builder, or customized your code and this specific element where class="quantity__rules-cart..." is not there, then the cartUpdate will fail. 

There might be other elements as well that can cause the error, but it was this in my case. 

You can also manually debug this, by:

1. Open the console in your browser
2. Add something to the cart
3. Watch for any errors or warnings
4. Search for that part of the code and dig in 🙂

That being said, it's a little poor Javascript design by Shopify, it should not fail just because you removed an item from the DOM. Hopefully they'll fix it in the next Dawn version.

[rmate]

Alternatively if you really don't want that counter there, you can add this line of Javascript in product-info.js line 61, right where the fetchQuantityRules() function begins.

if (!this.querySelector('.quantity__rules-cart')) return;

This will ensure that the cart still updates even though you don't have the counter.

[apoorv_dev]

@SeanConnors Late reply, but I found a solution that worked for me.

---

@SeanConnors wrote:

Hello there!

I am having an issue with my cart drawer and cart. When a customer adds an item to their cart, the cart drawer popup appears, but does not update to show the item they just added. For example, if a customer is adding their first item to their cart, the cart drawer popup shows the cart to be empty even though they just added an item. 

Additionally, if someone clicks off of the cart drawer, and tries to click on their cart, nothing happens. The customer is unable to view cart until they manually refresh the page or go back to the previous page they were on (which is just another way to manually refresh).

Does anybody know how I make the cart drawer show the current cart, or force a refresh when the customer adds an item to the cart? 

Thanks in advance! The store URL is: https://aquafliesdealer.com/

---

<script>
const open = window.XMLHttpRequest.prototype.open;

function openReplacement() {
this.addEventListener("load", function () {
if (
[
"/cart/add.js"
].includes(this._url)
) {
calculateShipping(this.response,this._url);
}
});
return open.apply(this, arguments);
}

window.XMLHttpRequest.prototype.open = openReplacement;

function calculateShipping(cartJson,url) {
console.log("calculate new shipping");
$('#cart-drawer').load(location.href + " #cart-drawer");
$('#cart-icon-bubble').load(location.href + " #cart-icon-bubble");
return false;
}
</script>
paste this code in the theme. liquid make sure that the jQuery is being loaded make sure the ids are correct for bubble and drawer.

[Jasvirjass]

Try this:

<form method="post" action="/cart/add" id="add-to-cart-form">
<input class="var" type="hidden" name="id" value="product.selected_or_first_available_variant.id" />
<input min="200" type="hidden" id="price" name="price" value="200"/>
<input class="selected_qty" min="1" type="hidden" id="quantity" name="quantity" value="1"/>
<input type="submit" value="ADD TO CART" class="add-to-cart-button" />
</form>

<script>

$('.add-to-cart-button').click(function() {

var variantId = $(this).siblings('.var').val();
var qty = $(this).siblings('.selected_qty').val();
var customdata = {
"id": variantId
}

$.ajax({
type: 'POST',
url: '/cart/add.js',
data: customdata,
dataType: 'json',
success: function(response) {
alert('Product added successfully!');
$.ajax({
type : "GET",
url : "/cart.js",
dataType: 'json',
success: function(cartItem){
let updatedQuantity = cartItem.item_count || 0;
$('.header__count-bubble span').text(updatedQuantity);
$('cart-drawer').load(window.location.href + ' #CartDrawer');
$('cart-drawer').removeClass('is-empty');
$('cart-drawer').addClass('active');
}
});
},
error: function() {
alert('Product failed to add!');
},

});
event.preventDefault();

});
</script>