Legg til antallsregler i Shopify-temaet

Antallsregler for B2B-kataloger støttes bare i gratis Shopify-temaer med versjon 8.0.0 eller nyere. Hvis du ikke vil endre eller oppdatere temaet kan du legge til følgende kode i temaet for å vise antallsregler.

Antall produkter i handlekurven

Antallsverdien for en produktvariant i handlekurven kan vises på produktsiden eller i en seksjon for fremhevede produkter. Verdien kan hentes med Liquid.

Legg til Liquid-kode for antall produkter i handlekurven

Du kan legge til kode i følgende filer i temaet for å støtte handlekurvantall:

  • main-product.liquid eller tilsvarende
  • featured-product.liquid eller tilsvarende

Trinn:

  1. Åpne filen du vil redigere.
  2. Opprett en ny linje nederst i filen, og legg til følgende kode.
{% 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. Klikk på Lagre.

Legg til Javascript-kode for antall i handlekurven

Når handlekurvantallet for en variant endres må verdien som vises på produktsiden eller den fremhevede produktseksjonen oppdateres. Den oppdaterte verdien kan hentes ved hjelp av Javascript-kode.

Du kan legge til kode i theme.js-filen eller tilsvarende.

Trinn:

  1. Åpne filen theme.js.
  2. Opprett en ny linje nederst i filen, og legg til følgende kode.
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. Klikk på Lagre.

Antallsregler

Antallsregler for en produktvariant kan vises på produktsiden eller den fremhevede produktseksjonen. Reglene kan hentes ved hjelp av Liquid.

Legg til Liquid-kode for antallsregler

Du kan legge til kode i følgende filer i temaet for å støtte antall produkter i handlekurven:

  • main-product.liquid eller tilsvarende
  • featured-product.liquid eller tilsvarende

Trinn:

  1. Åpne filen du vil redigere.
  2. Opprett en ny linje nederst i filen, og legg til følgende kode:
{% 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. Klikk på Lagre.

Legg til Javascript-kode for antallsregler

Hver variant av et produkt kan ha sitt eget sett med antallsregler. Når en annen variant velges må antallsreglene som vises på en produktside eller en fremhevet produktseksjon oppdateres. Den oppdaterte verdien kan hentes med Javascript-kode.

  • theme.js eller tilsvarende
  • en.default.json

Trinn:

  1. Åpne filen theme.js.
  2. Opprett en ny linje nederst i filen, og legg til følgende kode:
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. Klikk på Lagre.

Legg til nasjonale innstillinger

Legg til JSON-oversettelsesstrenger

Trinn:

  1. Åpne filen en.default.json.
  2. Opprett en ny linje nederst i filen, og legg til følgende kode:
{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}
  1. Klikk på Lagre.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis