Logga in
Kontakta oss

Visar kvantitetsregler och volymbaserad prissättning i din butik

Du kan visa kvantitetsregler och volymbaserad prissättning för din B2B-katalog i din butik genom att uppdatera din butiks tema till den senaste versionen.

Om du inte vill ändra eller uppdatera ditt tema kan du lägga till följande kod i temat för att visa kvantitetsregler och volymbaserad prissättning.

På den här sidan

Överväganden för att lägga till kvantitetsregler och volymbaserad prissättning till din temakod

Innan du lägger till kvantitetsregler och volymbaserad prissättning till din temakod granskar du följande överväganden:

  • Detta är en avancerad handledning. Om du inte är bekväm med att läsa och redigera temakod kan du arbeta med en utvecklare eller anlita en Shopify partner.
  • Se till att du duplicerar ditt tema för att skapa en säkerhetskopia innan du gör uppdateringar i dina temafiler.
  • Kvantitetsregler för B2B-katalogen stöds endast för gratis Shopify-teman, version 8.0.0 eller senare. Volymbaserad prissättning stöds i version 11.0.0 eller senare.

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.
Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!