Sådan viser du mængderegler og mængdebaseret pris i din butik

Du kan vise mængderegler og mængdebaseret pris for dit B2B-katalog i din butik ved at opdatere din butiks tema til den nyeste 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ængdebaseret pris.

På denne side

Overvejelser i forbindelse med at føje mængderegler og mængdebaseret pris til din temakode

Gennemgå følgende overvejelser, før du føjer mængderegler og mængdebaseret pris til din temakode:

Dette er en avanceret vejledning. Hvis du ikke er tryg ved at læse og redigere temakode, kan du samarbejde med en udvikler eller hyre en Shopify-partner.
Sørg for, at du dublerer dit tema for at oprette en sikkerhedskopi, før du opdaterer dine temafiler.
Mængderegler for B2B-kataloger understøttes på gratis Shopify-temaer, version 8.0.0 eller nyere. Mængdebaseret pris understøttes på version 11.0.0 eller nyere.

Antal i indkøbskurv

Antallet for en produktvariant i indkøbskurven kan vises på produktsiden eller i afsnittet med udvalgte produkter. Værdien kan hentes ved hjælp af Liquid.

Tilføj Liquid-kode for antal i indkøbskurv

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

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

Fremgangsmåde:

Gå til Webshop > Temaer fra 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 nederst i filen, og tilføj 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 antal i indkøbskurv

Når antallet for en variant i indkøbskurven ændres, skal den viste værdi på produktsiden eller i afsnittet med udvalgte produkter opdateres. Den opdaterede værdi kan hentes ved hjælp af Javascript-kode.

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

Fremgangsmåde:

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

Fremgangsmåde:

Gå til Webshop > Temaer fra 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 nederst i 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 af et produkt kan have sit eget sæt mængderegler. Når en anden variant vælges, skal de mængderegler, der vises på en produktside eller i afsnittet med udvalgte produkter, opdateres. Den opdaterede værdi kan hentes ved hjælp af Javascript-kode.

theme.js eller tilsvarende
en.default.json

Fremgangsmåde:

Gå til Webshop > Temaer fra din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn filen theme.js.
Opret en ny linje nederst i 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ængdebaseret pris

Tilføj Liquid-kode for mængdebaseret pris

Du kan føje kode til følgende filer i dit tema for at vise mængdebaseret pris:

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

Fremgangsmåde:

Gå til Webshop > Temaer fra 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 nederst i 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ængdebaseret pris

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

theme.js

Fremgangsmåde:

Gå til Webshop > Temaer fra din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn filen theme.js.
Opret en ny linje nederst i 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ængdebaseret pris 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.

Fremgangsmåde:

Gå til Webshop > Temaer fra din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn filen en.default.json.
Opret en ny linje nederst i 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.