Visning af mængderegler og mængdebaserede priser i din butik

Du kan vise mængderegler og mængdebaserede priser for dit B2B-katalog i din butik ved at opdatere din butiks tema til den seneste version.

Hvis du ikke vil ændre eller opdatere dit tema, kan du føje følgende kode til dit tema for at vise mængderegler og mængdebaserede priser.

På denne side

Overvejelser i forbindelse med at tilføje mængderegler og mængdebaserede priser til din temakode

Før du føjer mængderegler og mængdebaserede priser til din temakode, bør du overveje følgende:

Dette er en avanceret vejledning. Hvis du ikke er tryg ved at læse og redigere temakode, kan du samarbejde med en udvikler eller ansætte en Shopify-partner.
Inden du foretager ændringer af dine temafiler, skal du sørge for at duplikere dit tema for at oprette en sikkerhedskopi.
Du kan kun angive mængderegler for B2B-kataloger, hvis du anvender gratis Shopify-temaer, version 8.0.0 eller nyere. Mængdebaserede priser er understøttet i version 11.0.0 eller nyere.

Produktets kurvantal

Værdien for en produktvariants kurvantal kan vises på produktsiden eller i afsnittet med udvalgte produkter. Værdien kan hentes ved hjælp af Liquid.

Tilføj Liquid-kode for produktets kurvantal

Du kan føje kode til følgende filer i dit tema for at understøtte kurvantal:

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

Trin:

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn den fil, du vil redigere.
Opret en ny linje i bunden af filen, og tilføj derefter 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 }}">
    {{ cart | line_items_for: product | sum: 'quantity' }}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>

Klik på Gem.

Tilføj Javascript-kode for kurvantal

Når en variants kurvantal ændrer sig, skal den værdi, der vises på produktsiden eller i afsnittet med udvalgte produkter, opdateres. Du kan hente den opdaterede værdi ved hjælp af Javascript-kode.

Du kan føje kode til theme.js-filen eller tilsvarende.

Trin:

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn theme.js-filen.
Opret en ny linje i bunden af filen, og tilføj derefter 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;
  });

Klik på Gem.

Mængderegler

En produktvariants mængderegler kan vises på produktsiden eller i afsnittet med udvalgte produkter. Reglerne kan hentes ved hjælp af Liquid.

Tilføj Liquid-kode for mængderegler

Du kan føje kode til følgende filer i dit tema for at understøtte mængderegler:

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

Trin:

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn den fil, du vil redigere.
Opret en ny linje i bunden af filen, og tilføj derefter 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>

Klik på Gem.

Tilføj Javascript-kode for mængderegler

Hver variant for et produkt kan have sine egne mængderegler. Når du har valgt en anden variant, skal de mængderegler, der vises på produktsiden eller i afsnittet med udvalgte produkter, opdateres. Du kan hente den opdaterede værdi ved hjælp af Javascript-kode.

theme.js eller tilsvarende
en.default.json

Trin:

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn theme.js-filen.
Opret en ny linje i bunden af filen, og tilføj derefter 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;
  });

Klik på Gem.

Mængdebaserede priser

Tilføj Liquid-kode for mængdebaserede priser

Du kan føje kode til følgende filer i dit team for at vise mængdebaserede priser:

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

Trin:

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn den fil, du vil redigere.
Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:

{%- if product.quantity_price_breaks_configured? -%}
  <div class="volume-pricing-note">
    <span>{{ 'products.product.volume_pricing.note' | t }}</span>
  </div>
  <volume-pricing class="parent-display" id="Volume-{{ section.id }}">
    {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
      <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
      <ul class="list-unstyled no-js-hidden">
        <li>
          <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
          {%- assign price = product.selected_or_first_available_variant.price
            | money_with_currency
          -%}
          <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
            {{ 'sections.quick_order_list.each' | t: money: price -}}
          </span>
        </li>
        {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
          {%- assign price_break_price = price_break.price | money_with_currency -%}
          <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
            <span>
              {{- price_break.minimum_quantity -}}
              <span aria-hidden="true">+</span></span
            >
            {%- assign price = price_break.price | money_with_currency -%}
            <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}">
              {{ 'sections.quick_order_list.each' | t: money: price -}}
            </span>
          </li>
        {%- endfor -%}
      </ul>
      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
        <show-more-button>
          <button
            class="button-show-more link underlined-link no-js-hidden"
            id="Show-More-{{ section.id }}"
            type="button"
          >
            <span class="label-show-more label-text"
              ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}
            </span>
          </button>
        </show-more-button>
      {%- endif -%}
    {%- endif -%}
  </volume-pricing>
{%- endif -%}

Klik på Gem.

Tilføj Javascript-kode for mængdebaserede priser

Du kan føje kode til følgende fil i dit tema for at vise mængdebaserede priser:

theme.js

Trin:

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn theme.js-filen.
Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:

if (!customElements.get('show-more-button')) {
  customElements.define(
    'show-more-button',
    class ShowMoreButton extends HTMLElement {
      constructor() {
        super();
        const button = this.querySelector('button');
        button.addEventListener('click', (event) => {
          this.expandShowMore(event);
          const nextElementToFocus = event.target
            .closest('.parent-display')
            .querySelector('.show-more-item');
          if (
            nextElementToFocus &&
            !nextElementToFocus.classList.contains('hidden') &&
            nextElementToFocus.querySelector('input')
          ) {
            nextElementToFocus.querySelector('input').focus();
          }
        });
      }
      expandShowMore(event) {
        const parentDisplay = event.target
          .closest('[id^="Show-More-"]')
          .closest('.parent-display');
        const parentWrap = parentDisplay.querySelector('.parent-wrap');
        this.querySelectorAll('.label-text').forEach((element) =>
          element.classList.toggle('hidden'),
        );
        parentDisplay
          .querySelectorAll('.show-more-item')
          .forEach((item) => item.classList.toggle('hidden'));
        if (!this.querySelector('.label-show-less')) {
          this.classList.add('hidden');
        }
      }
    },
  );
}

Klik på Gem.

Tilføj landestandarder

For at sikre, at mængderegler og mængdebaserede priser vises i alle oversatte versioner af din webshop, kan du tilføje landestandarder ved at føje følgende JSON-oversættelsesstrenge til din en.default.json-fil.

Trin:

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn en.default.json-filen.
Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}

Klik på Gem.