Verberg uitverkochte varianten

Je kunt voorkomen dat klanten uitverkochte varianten selecteren door deze varianten op de productpagina te verwijderen of uit te schakelen.

Beperkingen

De op deze pagina beschreven aanpassingen werken niet in de volgende gevallen:

  • Er is meer dan één productoptie voor producten.
  • Je gebruikt het Express-thema en je hebt de productpagina ingesteld om producten in een overlay weer te geven.

Stappen voor thema's met secties

Je thema selecteren

De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop voor je thema voordat je de onderstaande instructies volgt:

Stappen voor thema's zonder secties

Verberg uitverkochte varianten

Als je een thema zonder secties gebruikt, kun je de volgende stappen volgen om uitverkochte varianten op de productpagina te verbergen.

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
  4. Geef het nieuwe fragment de naam remove-sold-out:
    Add new snippet
  5. Plak de volgende code in je nieuwe fragmentbestand:
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. Klik op Opslaan.
  2. Klik in de directory Opmaak op theme.liquid.
  3. Plak de volgende code aan het eind van het bestand, vlak voor de sluitende tag </body>:
{% render 'remove-sold-out' %}
  1. Klik op Opslaan.

Uitverkochte varianten deactiveren

Als je een thema zonder secties gebruikt, kun je deze stappen volgen om uitverkochte varianten te deactiveren. De varianten worden nog steeds weergegeven op de productpagina, maar kunnen niet worden geselecteerd.

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
  4. Geef het nieuwe fragment de naam disable-sold-out:
    Add new snippet
  5. Plak de volgende code in je nieuwe fragmentbestand:
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. Klik op Opslaan.
  2. Klik in de directory Opmaak op theme.liquid.
  3. Plak de volgende code aan het eind van het bestand, vlak voor de sluitende tag </body>:
{% render 'disable-sold-out' %}
  1. Klik op Opslaan.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis