Vis mængderegler og mængdebaserede priser i din butik

Denne side blev udskrevet kl. Apr 26, 2024. Besøg https://help.shopify.com/da/manual/b2b/theme-code/quantity-pricing for at se den aktuelle version.

Mængderegler for B2B-kataloger understøttes i gratis Shopify-temaer, version 8.0.0 eller nyere, mens mængdebaserede priser understøttes i version 11.0.0 eller nyere. Hvis du vil vise mængderegler og mængdebaserede priser i din butik, kan du 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ængdebaserede priser. Inden du foretager ændringer af dine temafiler, skal du sørge for at duplikere dit tema for at oprette en sikkerhedskopi.

På denne side

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:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
  3. Åbn den fil, du vil redigere.
  4. 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>
  1. 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:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
  3. Åbn theme.js-filen.
  4. 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;
  });
  1. 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:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
  3. Åbn den fil, du vil redigere.
  4. 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>
  1. 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:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
  3. Åbn theme.js-filen.
  4. 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;
  });
  1. 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:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
  3. Åbn den fil, du vil redigere.
  4. 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 -%}
  1. 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:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
  3. Åbn theme.js-filen.
  4. 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');
        }
      }
    },
  );
}
  1. 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:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
  3. Åbn en.default.json-filen.
  4. 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"
    }
  }
}
  1. Klik på Gem.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis