Visa kvantitetsregler och volympriser i din butik

Den här sidan skrevs ut den Apr 26, 2024. Besök https://help.shopify.com/sv/manual/b2b/theme-code/quantity-pricing för den aktuella versionen.

Kvantitetsregler för B2B-katalog stöds i gratis Shopify-teman, version 8.0.0 eller senare, och volympriser stöds i version 11.0.0 eller senare. Om du vill visa kvantitetsregler och volympriser i din butik kan du uppdatera ditt butikstema till den senaste versionen.

Om du inte vill ändra eller uppdatera ditt tema kan du lägga till följande kod i ditt tema för att visa kvantitetsregler och volympriser.Se till att du duplicerar ditt tema för att skapa en säkerhetskopia innan du gör uppdateringar i dina temafiler.

På den här sidan

Produktens varukorgskvantitet

Kvantitetsvärdet för en produktvariant i varukorgen kan visas på produktsidan eller avsnittet med den utvalda produkten. Värdet kan hämtas med Liquid.

Lägg till kvantitetskod för Liquid-produktkorg

Du kan lägga till kod i följande filer i ditt tema för att tillhandahålla varukorgskvantitet:

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

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna filen som du vill redigera.
  4. Skapa en ny rad längst ner i filen och lägg till följande kod: 
{% 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. Klicka på Spara.

Lägg till en kvantitetskod för Javascript-varukorg

När en variants varukorgskvantitet ändras måste värdet som visas på produktsidan eller avsnittet med den utvalda produkten uppdateras. Det uppdaterade värdet kan hämtas med hjälp av Javascript-kod.

Du kan lägga till kod i theme.js-filen eller motsvarande.

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna theme.js-filen.
  4. Skapa en ny rad längst ner i filen och lägg till följande kod: 
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. Klicka på Spara.

Kvantitetsregler

En produktvariants kvantitetsregler kan visas på produktsidan eller avsnittet med utvalda produkter. Reglerna kan hämtas med hjälp av Liquid.

Lägg till kod för Liquid-kvantitetregler

Du kan lägga till kod i följande filer i ditt tema för att tillhandahålla kvantitetsregler:

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

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna filen som du vill redigera.
  4. Skapa en ny rad längst ner i filen och lägg sedan till följande kod: 
{% 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. Klicka på Spara.

Lägg till kod för Javascript-kvantitetsregler

Varje variant av en produkt kan ha sin egen uppsättning kvantitetsregler. När en annan variant har valts måste kvantitetsreglerna som visas på en produktsida eller ett utvalt produktavsnitt uppdateras. Det uppdaterade värdet kan hämtas med hjälp av Javascript-kod.

  • theme.js eller motsvarande
  • en.default.json

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna theme.js-filen.
  4. Skapa en ny rad längst ner i filen och lägg sedan till följande kod: 
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. Klicka på Spara.

Volympriser

Lägg till volympriskod för Liquid

Du kan lägga till kod i följande filer i ditt tema för att visa volymprissättning:

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

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna filen som du vill redigera.
  4. Skapa en ny rad längst ner i filen och lägg sedan till följande kod: 
{%- 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. Klicka på Spara.

Lägg till en volympriskod för Javascript

Du kan lägga till kod till följande fil i ditt tema för att visa volympriser:

  • theme.js

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna theme.js-filen.
  4. Skapa en ny rad längst ner i filen och lägg sedan till följande kod: 
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. Klicka på Spara.

Lägg till ort

För att säkerställa att kvantitetsregler och volympriser visas i alla översatta versioner av din webbshop kan du lägga till platser genom att lägga till följande JSON-översättningssträngar i din en.default.json-fil.

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna en.default.json-filen.
  4. Skapa en ny rad längst ner i filen och lägg sedan till följande kod: 
"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Klicka på Spara.

Är du redo att börja sälja med Shopify?

Prova gratis