Aggiunta di regole sulla quantità al tema Shopify

Questa pagina è stata stampata il Jun 11, 2023. Per la versione aggiornata, visita https://help.shopify.com/it/manual/b2b/catalogs/code.

Le regole sulla quantità per il catalogo B2B sono supportate solo sui temi Shopify gratuiti, versione 8.0.0 o successiva. Se non vuoi modificare o aggiornare il tuo tema, puoi aggiungere il seguente codice al tema per visualizzare le regole sulla quantità.

Su questa pagina

Quantità del carrello dei prodotti

Nella pagina del prodotto o nella sezione del prodotto in primo piano può essere visualizzato il valore per la quantità del carrello della variante di prodotto. Il valore può essere recuperato utilizzando Liquid.

Aggiunta del codice Liquid della quantità del carrello dei prodotti

Per supportare la quantità del carrello, nel tuo tema puoi aggiungere un codice ai file seguenti:

  • main-product.liquid o equivalente
  • featured-product.liquid o equivalente

Procedura:

  1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Apri il file che desideri modificare.
  2. Crea una nuova riga in fondo al file e aggiungi il codice seguente: 
{% comment %} Cart quantity {% endcomment %}
<span id="CartQuantity-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>
  1. Clicca su Salva.

Aggiunta del codice Javascript della quantità del carrello

Quando la quantità del carrello di una variante cambia, devi aggiornare il valore visualizzato sulla pagina di prodotto o sulla sezione del prodotto in primo piano. Il valore aggiornato può essere recuperato utilizzando il codice Javascript.

Puoi aggiungere un codice al file theme.js o equivalente.

Procedura:

  1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Apri il file theme.js.
  2. Crea una nuova riga in fondo al file e aggiungi il codice seguente: 
let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the cart quantity
        const currentCartQuantity = document.querySelector(`#CartQuantity-${sectionId}`);
        const updatedCartQuantity = updatedHtml.querySelector(`#CartQuantity-${sectionId}`);
        currentCartQuantity.innerHTML = updatedCartQuantity.innerHTML;
    });
  1. Clicca su Salva.

Regole sulla quantità

Le regole sulla quantità di una variante di prodotto possono essere visualizzate nella pagina del prodotto o nella sezione del prodotto in primo piano. Le regole possono essere recuperate utilizzando Liquid.

Aggiunta del codice Liquid delle regole sulla quantità

Per supportare la quantità del carrello di un prodotto, nel tuo tema puoi aggiungere un codice ai file seguenti:

  • main-product.liquid o equivalente
  • featured-product.liquid o equivalente

Procedura:

  1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Apri il file che desideri modificare.
  2. Crea una nuova riga in fondo al file e aggiungi il codice seguente: 
{% comment %} Quantity rules {% endcomment %}
<div id="QuantityRules-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
        <span>
        {{- 'products.product.quantity.multiples_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.minimum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.min -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
        </span>
    {%- endif -%}
</div>
  1. Clicca su Salva.

Aggiunta del codice Javascript delle regole sulla quantità

Ogni variante di un prodotto può avere una propria serie di regole di quantità. Dopo aver selezionato una variante diversa, devi aggiornare le regole sulla quantità visualizzate in una pagina del prodotto o in una sezione di prodotti in primo piano. Il valore aggiornato può essere recuperato utilizzando il codice Javascript.

  • theme.js o equivalente
  • en.default.json

Procedura:

  1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Apri il file theme.js.
  2. Crea una nuova riga in fondo al file e aggiungi il codice seguente: 
let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// `variantId` is set to the current variant's id. Replace this value with the updated variant's id

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the quantity rules
        const currentQuantityRules = document.querySelector(`#QuantityRules-${sectionId}`);
        const updatedQuantityRules = updatedHtml.querySelector(`#QuantityRules-${sectionId}`);
        currentQuantityRules.innerHTML = updatedQuantityRules.innerHTML;
    });
  1. Clicca su Salva.

Aggiunta di impostazioni locali

Aggiunta di stringhe di traduzione JSON

Procedura:

  1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Nell'app Shopify tocca Negozio.

  2. Nella sezione Canali di vendita, tocca Negozio online.

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

  1. Apri il file en.default.json.
  2. Crea una nuova riga in fondo al file e aggiungi il codice seguente: 
{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}
  1. Clicca su Salva.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis