Incorrect variant in cart after modification

New Member
4 0 0

I recently added a modified version of the code found in the tutorial:

https://help.shopify.com/en/themes/customization/products/variants/hide-variants-that-are-sold-out

I modified this to only show variants with a compare at price (on sale) in the clearance collection. Sometimes, we have an item that only has certain variants on sale, and we want to only show those variants of a product when viewing the clearance collection. I have got it almost working. Only issue is that when viewing the item from the clearance section (/collections/clearance/itemonsale) and then adding to cart, the first variant is added to the cart, not one selected in dropdown box. This only happens the first time the item is added to cart. If someone were to go back to the product and add again it would work fine. When accessing the product through the category collection (/collections/category/itemonsale) or directly (/products/itemonsale) everything works OK, so it seems the script is at least firing when it should. Any ideas on what I need to change here to make this work would be appreciated.

 

In product.liquid (probably don't need second instance of collection.handle=.....):

{% if collection.handle == 'clearance' and product.options.size == 1 %}
  <script>
    var product_variants_removed = [
      {%- for variant in product.variants -%}
        {%- unless collection.handle == 'clearance' and variant.compare_at_price > 1 -%}
          '{{ variant.title }}',
        {%- endunless -%}
      {%- endfor -%}
    ];
  </script>
{% endif %}

In theme.js:

$(theme.init);
$( document ).ready(function() {
  if( typeof product_variants_removed != undefined ) {  // was there items to be removed?
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() {
        product_variants_removed.forEach(function(item){
          $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
        });
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }
});
0 Likes
Shopify Partner
2495 13 462

Can we see a preview link?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
4 0 0

This is just on a dev site:

https://evans-daily-grindb.myshopify.com/collections/clearance 

The idea here is if you view the item in the clearance collection, then only the variants on sale/with a compare at price are visible.

0 Likes
Highlighted
Shopify Partner
2495 13 462

Ok, I see. 

Try to move 

$('.single-option-selector').trigger('change');

to be below the second 

observer.disconnect();

What happened is that new code updated the drop-down, but for adding to cart theme uses another, hidden element, which was not updating. Firing the "change" event will force theme javascript to update this hidden element to reflect the change in visible drop-down.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like