Vis antallsregler og volumprissetting i butikken

Denne siden ble skrevet ut den Apr 24, 2024. Gå til https://help.shopify.com/nb/manual/b2b/theme-code/quantity-pricing for nyeste versjon.

Antallsregler for B2B-kataloger støttes i gratis Shopify-temaer, versjon 8.0.0 eller nyere, og volumprissetting støttes i versjon 11.0.0 eller nyere. Hvis du ønsker å vise antallsregler og volumprissetting i butikken kan du oppdatere butikkens tema til den nyeste versjonen.

Hvis du ikke vil endre eller oppdatere tema, kan du legge til følgende kode i temaet for å vise antallsregler og volumprissetting. Før du gjør oppdateringer i temafiler, må du sikre at du dupliserer temaet for å opprette en sikkerhetskopi.

På denne siden

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. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
  3. Åpne filen du vil redigere.
  4. 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 }}">
    {{ cart | line_items_for: product | sum: 'quantity' }}
    {{- '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. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
  3. Åpne filen theme.js.
  4. 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 antallsregler:

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

Trinn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
  3. Åpne filen du vil redigere.
  4. 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. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
  3. Åpne filen theme.js.
  4. 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.

Volumprising

Legg til Liquid-kode for volumprissetting

Du kan legge til kode i følgende filer i temaet for å vise volumprissetting:

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

Trinn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
  3. Åpne filen du vil redigere.
  4. Opprett en ny linje nederst i filen, og legg til 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. Klikk på Lagre.

Legg til Javascript-kode for volumprissetting

Du kan legge til kode i følgende fil i temaet for å vise volumprissetting:

  • theme.js

Trinn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
  3. Åpne filen theme.js.
  4. Opprett en ny linje nederst i filen, og legg til 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. Klikk på Lagre.

Legg til nasjonale innstillinger

For å sikre at antallsregler og volumprissetting vises for alle oversatte versjoner av nettbutikken kan du legge til lokale innstillinger ved å legge til følgende JSON-oversettelsesstrenger i filen en.default.json.

Trinn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
  3. Åpne filen en.default.json.
  4. Opprett en ny linje nederst i filen, og legg til 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. Klikk på Lagre.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis