Annullamento della visualizzazione delle varianti esaurite

Attenzione

I temi vintage non sono disponibili nel Theme Store. Questi temi non dispongono delle funzionalità incluse nei temi dell'Online Store 2.0 di Shopify e i temi vintage gratuiti di Shopify non ricevono aggiornamenti oltre alle correzioni di sicurezza.

Nota

Se utilizzi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Scopri di più su Shopify Design Policy.

Nota

Questa personalizzazione è per i temi Shopify vintage e non si applica ai temi dell'Online Store 2.0.

• Scopri la versione della struttura del tuo tema
• Esplora le opzioni di personalizzazione del tema dell'Online Store 2.0.

Puoi impedire ai clienti di selezionare le varianti esaurite rimuovendo o disabilitando tali varianti dalla pagina del prodotto.

Limitazioni

Le personalizzazioni delineate in questa pagina non funzionano nei casi seguenti:

• I tuoi prodotti hanno più di un'opzione di prodotto.
• Utilizzi il tema Express e la pagina del prodotto è impostata in modo da mostrare i prodotti in sovrapposizione.

Nota

I passaggi di questo tutorial variano a seconda che si usi un tema con sezioni o senza sezioni. Un tema con sezioni ti consente di trascinare e rilasciare le sezioni per organizzare il layout della homepage, diversamente da quanto accade con un tema senza sezioni.

Per scoprire se il tuo tema supporta le sezioni, vai alla pagina Modifica codice del tema. Se la directory Sections contiene file, stai usando un tema con sezioni. I temi senza sezioni sono stati pubblicati prima di ottobre 2016 e non hanno file nella directory Sections.

Se usi un tema con sezioni, fai clic sul pulsante Temi con sezioni e segui le istruzioni. Se usi un tema precedente senza sezioni, fai clic sul pulsante Temi senza sezioni e segui le istruzioni.

Passaggi per i Temi con sezioni

Seleziona il tuo tema

I passaggi per questa personalizzazione variano a seconda del tuo tema. Clicca sul pulsante del tema prima di seguire le istruzioni qui sotto:

Passaggi per i Temi senza sezioni

Annullamento della visualizzazione delle varianti esaurite

Se utilizzi un tema senza sezioni, puoi seguire questi passaggi per nascondere le varianti esaurite sulla pagina del prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
4. Assegna al nuovo frammento il nome remove-sold-out:

   

5. Nel nuovo file del frammento, incolla il codice seguente:

{% 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. Clicca su Salva.
2. Nella directory Layout, clicca su theme.liquid.
3. Vicino alla parte finale del file, subito prima del tag di chiusura </body>, incolla il codice seguente:

{% render 'remove-sold-out' %}

1. Clicca su Salva.

Disattivazione delle varianti esaurite

Se utilizzi un tema senza sezioni, puoi seguire questi passaggi per disattivare le varianti esaurite. Le varianti saranno ancora mostrate sulla pagina del prodotto, ma non potranno essere selezionate.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
4. Assegna al nuovo frammento il nome disable-sold-out:

   

5. Nel nuovo file del frammento, incolla il codice seguente:

{% 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. Clicca su Salva.
2. Nella directory Layout, clicca su theme.liquid.
3. Vicino alla parte finale del file, subito prima del tag di chiusura </body>, incolla il codice seguente:

{% render 'disable-sold-out' %}

1. Clicca su Salva.