Seul l'affichage des options disponibles sur Shopify

Question

En Snippets/product-form.liquid il y a un bloc de code:

<div class="swatch_options"> 
    {% for option in product.options %} 
    {% include 'product-swatch' with option %} 
    {% endfor %} 
</div> 

Cette affiche des options pour les produits avec des X sur les nuanciers indisponibles:

<div data-value="option name" class="swatch-element color optionName-swatch available soldout"> 
    <div class="tooltip">Option Name</div> 
    <label for="optionName"> 
    <span class="crossed-out"></span> 
    </label> 
</div> 

Lorsque ces variantes non compatibles sont cliqués, un grand message "INDISPONIBLE" s'affiche:

<p class="modal_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> 
    <meta itemprop="priceCurrency" content="USD"> 
    <meta itemprop="seller" content="site"> 
    <link itemprop="availability" href="http://schema.org/InStock"> 
    <meta itemprop="itemCondition" content="New"> 
    <span class="sold_out">Unavailable</span> 
    <span itemprop="price" content="10.00" class=""> 
    <span class="current_price "></span> 
    </span> 
    <span class="was_price"></span> 
    <span class="sale savings"></span> 
</p> 

J'ai essayé de vérifier pour variant.available, product.variants.first.available, et variant.inventory_quantity > 0 avant {% include 'product-swatch' with option %}, sans succès.

Comment cacher les variantes non compatibles?

Edit: Voici ce qui est actuellement à l'intérieur de product-swatch.liquid:

{% comment %} 
    Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'. 
{% endcomment %} 

{% assign file_extension = 'png' %} 

{% assign swatch = product-swatch %} 
{% assign found_option = false %} 
{% assign is_color = false %} 
{% assign option_index = 0 %} 

{% for option in product.options %} 
    {% if option == swatch %} 
    {% assign found_option = true %} 
    {% assign option_index = forloop.index0 %} 
    {% assign downcased_option = swatch | downcase %} 
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %} 
     {% assign is_color = true %} 
    {% endif %} 
    {% endif %} 
{% endfor %} 

<div class="swatch clearfix" data-option-index="{{ option_index }}"> 
    <div class="option_title">{{ swatch }}</div> 
    {% assign values = '' %} 
    {% for variant in product.variants %} 
    {% if variant.available %} 
    {% assign value = variant.options[option_index] %} 
    {% unless values contains value %} 
     {% assign values = values | join: ',' %} 
     {% assign values = values | append: ',' | append: value %} 
     {% assign values = values | split: ',' %} 
     <input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} /> 
     <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}"> 
     {% if is_color %} 
      <div class="tooltip">{{ value }}</div> 
     {% endif %} 
     {% if is_color %} 
      <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};"> 
      <span class="crossed-out"></span> 
      </label> 
     {% else %} 
      <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}"> 
      {{ value }} 
      <span class="crossed-out"></span> 
      </label> 
     {% endif %} 
     </div> 
    {% endunless %} 
    {% endif %} 
    {% endfor %} 
</div> 

Answer 1

Il semble que vous recherchiez la fonctionnalité Linked Options.

Jetez un oeil à ce document: https://help.shopify.com/themes/customization/navigation/link-product-options-in-menus

Le code est hébergé sur GitHub: https://gist.github.com/carolineschnapp/1083007

Il est ajusté à travailler avec nuanciers ainsi (je suppose que vous utilisez le default implementation).

Answer 2

Modifier votre fiche produit-swatch.liquid sous dossier "extraits".

Recherchez {% for variant in product.variants %} et placez {% if variant.available %} juste après.

Trouvez {% endfor %} et placez {% endif %} juste avant.

Si cela ne fonctionne pas, partagez les codes de product-swatch.liquid avec nous.