Prestige theme - hide unavailable variants

Highlighted
Tourist
4 0 0

Hi,

 

I would apreciate if someone could help me hiding the unavailable variants.

 

I already create the following snippet:

 

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus
  
// Modified by Jonathan Moore (Style Hatch) https://github.com/jonathanmoore
/* 
	Updated to work with sectioned themes
    	- Added required methods from the deprecated options_selection.js
        - Triggers an initial variant change
        - Hides sold out variants with only one option
*/
window.addEventListener('DOMContentLoaded', function() {
  var Shopify = Shopify || {};
    
  // Required functionality from depricated options_selection.js
  Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t) return !0;
    return !1
  }, Shopify.uniq = function(e) {
      for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
      return t
  }

  Shopify.optionsMap = {};

  Shopify.updateOptionsInSelector = function(selectorIndex) {
      
    switch (selectorIndex) {
      case 0:
        var key = 'root';
        var selector = jQuery('.single-option-selector:eq(0)');
        break;
      case 1:
        var key = jQuery('.single-option-selector:eq(0)').val();
        var selector = jQuery('.single-option-selector:eq(1)');
        break;
      case 2:
        var key = jQuery('.single-option-selector:eq(0)').val();  
        key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
        var selector = jQuery('.single-option-selector:eq(2)');
    }
    
    var initialValue = selector.val();
    selector.empty();    
    var availableOptions = Shopify.optionsMap[key];
    for (var i=0; i<availableOptions.length; i++) {
      var option = availableOptions[i];
      var newOption = jQuery('<option></option>').val(option).html(option);
      selector.append(newOption);
    }
    jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
      if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
        $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
      }
      else {
        $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
      }
    });
    if (jQuery.inArray(initialValue, availableOptions) !== -1) {
      selector.val(initialValue);
    }
    selector.trigger('change');
    
  };

  Shopify.linkOptionSelectors = function(product) {
    // Building our mapping object.
    for (var i=0; i<product.variants.length; i++) {
      var variant = product.variants[i];
      if (variant.available) {
        // Gathering values for the 1st drop-down.
        Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
        Shopify.optionsMap['root'].push(variant.option1);
        Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
        // Gathering values for the 2nd drop-down.
        if (product.options.length > 1) {
          var key = variant.option1;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option2);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
        // Gathering values for the 3rd drop-down.
        if (product.options.length === 3) {
          var key = variant.option1 + ' / ' + variant.option2;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option3);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
      }
    }
    // Update options right away.
    Shopify.updateOptionsInSelector(0);
    if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    // When there is an update in the first dropdown.
    jQuery(".single-option-selector:eq(0)").change(function() {
      Shopify.updateOptionsInSelector(1);
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });
    // When there is an update in the second dropdown.
    jQuery(".single-option-selector:eq(1)").change(function() {
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });  
  };
   
  {% if product.available and product.options.size > 1 %}
    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() {      
        Shopify.linkOptionSelectors({{ product | json }});
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    }
  {% endif %}
    
  var selector = jQuery('.single-option-selector:eq(0)');
  selector.trigger('change'); 

  {% if product.options.size == 1 %}
    {% for variant in product.variants %}
      {% unless variant.available %}
        jQuery('.single-option-selector option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
      {% endunless %}
    {% endfor %}
    jQuery('.single-option-selector').trigger('change');
  {% endif %}
});
</script>

And I also added the Render tag to theme.liquid.

 

 

Because It's a paid theme I need to find its equivalent of the ".single-option-selector" tag on the snippet I've created.

 

After trying all day with no results, I would be grateful if someone could help me!

 

Store : https://shop-flm96.myshopify.com/

 

Thanks,

Frank

0 Likes
Highlighted
New Member
1 0 1

@Frank_LM The Class you're looking for in prestige is ".ProductForm__Item", but none of these will actually make the code run on the page. After Following instructions here, here and here, I've found none of the proposed solutions have worked for me. Super annoying, because I have a supplier breathing down my neck for displaying products I don't have in stock.

 

I'd also really like a solution to this problem - hundreds of products on our site has multiple options, and we've already had more than a few calls from customers angry they can't order a product that doesn't exist.

At risk of sounding like a massive whinger, I feel like variant linking should really be a native feature. The fact they aren't linked by default feels more like a bug than a feature.

Highlighted
Tourist
3 0 0

@Frank_LM have you found a solution to hide unavailable variants on prestige theme yet? 

0 Likes
Highlighted
Tourist
3 0 2

Im trying to implement the same code in Prestige without luck, have you been able to find any solutions?

Digital Marketing and Ecommerce Website creator.
Colombia
Highlighted
New Member
2 0 0

Any shopify experts on here want to address this?  Also at the risk of sounding like a massive whinger, why the hell would Shopify sell a theme that wasn't coded to show sold out variants as grayed out or 'X"ed out, i'e, unavailable?  Isn't that standard on retail websites?  I wish there was a way to get my money back, didn't notice this until we started building our shop.

0 Likes
Highlighted
Astronaut
1014 91 120

@maggie_m1 - this will need some theme coding edits to make this tweak, it is not a single line code, will take few hours to do it

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Tourist
3 0 2

That's true. Being a premium theme, I agree with @maggie_m1, it should have such an important functionality for the overall Customer Experience and the conversion % of the page.

Other premium themes such as District or Testament do this very well out of the box, while other themes such as Impulse have a different methodology to do achieve similar results. But with prestige, its just not possible without code customization.

I write this to help others find a theme with this functionality, to express my frustration with the Prestige Theme, and to maybe motivate Prestige to implement this.

Having known this from the beginning, I probably wouldn't have bought Prestige, but one of the previously mentioned themes.

Digital Marketing and Ecommerce Website creator.
Colombia