Hoeveelheidsregels aan het Shopify-thema toevoegen

Hoeveelheidsregels voor B2B-assortimenten worden alleen ondersteund bij gratis Shopify-thema's, versie 8.0.0 of hoger. Als je het thema niet wilt wijzigen of bijwerken, kun je de volgende code aan het thema toevoegen om hoeveelheidsregels weer te geven.

Je bedrijf laten groeien

Dit is een geavanceerde tutorial. Als je niet vertrouwd bent met het lezen en bewerken van themacodes, kun je samenwerken met een ontwikkelaar of een Shopify Expert inhuren.

Winkelwagenhoeveelheid product

Je kunt de waarde van de winkelwagenhoeveelheid van een productvariant weergeven op de productpagina of in de uitgelichte productsectie. Je kunt de waarde ophalen met behulp van Liquid.

Liquid-code voor winkelwagenhoeveelheid product toevoegen

Je kunt code toevoegen aan de volgende bestanden in het thema om de winkelwagenhoeveelheid te ondersteunen:

• main-product.liquid of een equivalent daarvan;
• featured-product.liquid of een equivalent daarvan.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > 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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. Open het bestand dat je wilt bewerken.
2. Maak een nieuwe regel onder in het bestand en voeg de volgende code toe:

{% 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. Klik op Opslaan.

Javascript-code voor winkelwagenhoeveelheid toevoegen

Wanneer de winkelwagenhoeveelheid van een variant verandert, is het nodig om de waarde die wordt weergegeven op de productpagina of of in de uitgelichte productsectie bij te werken. Je kunt de bijgewerkte waarde ophalen met behulp van Javascript-code.

Je kunt code toevoegen aan het bestand theme.js of een equivalent daarvan.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > 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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. Open het bestand theme.js.
2. Maak een nieuwe regel onder in het bestand en voeg de volgende code toe:

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. Klik op Opslaan.

Hoeveelheidsregels

Je kunt de hoeveelheidsregels van een productvariant weergeven op de productpagina of in de uitgelichte productsectie. Je kunt de regels ophalen met behulp van Liquid.

Liquid-code voor hoeveelheidsregels toevoegen

Je kunt code toevoegen aan de volgende bestanden in het thema om de winkelwagenhoeveelheid van een product te ondersteunen:

• main-product.liquid of een equivalent daarvan;
• featured-product.liquid of een equivalent daarvan.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > 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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. Open het bestand dat je wilt bewerken.
2. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe:

{% 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. Klik op Opslaan.

Javascript-code voor hoeveelheidsregels toevoegen

Voor elke variant van een product kan een unieke reeks hoeveelheidsregels gelden. Werk de hoeveelheidsregels die worden weergegeven op een productpagina of in een uitgelichte productsectie bij als je een andere variant selecteert. Je kunt de bijgewerkte waarde ophalen met behulp van Javascript-code:

• theme.js of een equivalent daarvan
• en.default.json

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > 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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. Open het bestand theme.js.
2. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe:

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. Klik op Opslaan.

Landinstellingen toevoegen

JSON-tekenreeksen voor vertalingen toevoegen

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > 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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. Open het bestand en.default.json.
2. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe:

{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}

1. Klik op Opslaan.