Disable Page Reload After Add to Cart action on Wishlist Page

On the Wishlist page of Smart Wishlist, by default the page reloads every time Add to Cart action is performed successfully. This ensures that the Cart Item counter across the store gets updated.

However, sometimes merchants don’t want the page reload to occur. In such cases, we need to first update the cart counter using additional code.

This guide shows you how to automatically update the Shopify cart counter every time Add to Cart action is executed successfully. Once done, you may contact our Support to get the page reload disabled on the wishlist page of your store.

Step 1: Identify your cart counter

  • Cart Counter Class: Locate the HTML element displaying your cart count. Note down its class or ID. We’ll use cart-count-badge in this guide.

Step 2: Add the jQuery code

  1. Access your theme code: From your Shopify admin, go to Online Store > Themes and click Actions > Edit code on your current theme.
  2. Create a new snippet: In the Snippets folder, click Add a new snippet and name it wishlist-enhancements.liquid
  3. Paste the following code:
{% unless template %}
<script type="text/javascript">
$(document).ready(function() {
  $('#message_modal').on('hidden.bs.modal', function () {
    fetchCartDetails();
  });

  function fetchCartDetails() {
    $.getJSON('/cart.js', function(cart) {
      $('.cart-count-badge').text(cart.item_count);
    }).fail(function(error) {
      console.error('Error fetching cart details:', error);
    });
  }
});
</script>
{% endunless %}
  1. Replace placeholders:
    • Change .cart-count-badge to your cart counter’s class or ID.
  2. Save the snippet: Click Save.

Step 3: Include the snippet in your theme

  1. Open theme.liquid: In the Layout folder, locate and open the theme.liquid file.
  2. Include the snippet: Paste the following code before the closing </head> tag:
{% include 'wishlist-enhancements' %} 
  1. Save theme.liquid: Click Save.

Disable Reload

Once the above steps are implemented, please contact our Support (via App’s Settings) to get the page reload disabled.

Leave a Reply

Your email address will not be published. Required fields are marked *