Hjälp
Logga in

Visa 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 butikens tema 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 volymbaserad prissättning.

På den här sidan

Att tänka på när du lägger till kvantitetsregler och volymbaserad prissättning i din temakod

Tänk på följande innan du lägger till kvantitetsregler och volymbaserad prissättning i din temakod:

  • 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-kataloger stöds på gratis Shopify-teman, version 8.0.0 eller senare. Volymbaserad prissättning stöds på version 11.0.0 eller senare.

Produktkvantitet i varukorg

En produktvariants kvantitet i varukorgen kan visas på produktsidan eller i avsnittet utvald produkt. Värdet kan hämtas med hjälp av Liquid.

Lägg till Liquid-kod för produktkvantitet i varukorg

Du kan lägga till kod i följande filer i ditt tema för att stödja kvantitet i varukorgen:

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

Steg:

  1. Gå till Webbshop > Teman i din Shopify-admin.

  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 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 Javascript-kod för kvantitet i varukorgen

När en variants kvantitet i varukorgen ändras måste värdet som visas på produktsidan eller i avsnittet utvald produkt uppdateras. Det uppdaterade värdet kan hämtas med hjälp av Javascript-kod.

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

Steg:

  1. Gå till Webbshop > Teman i din Shopify-admin.

  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 theme.js.

  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 i avsnittet utvald produkt. Reglerna kan hämtas med hjälp av Liquid.

Lägg till Liquid-kod för kvantitetsregler

Du kan lägga till kod i följande filer i ditt tema för att stödja kvantitetsregler:

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

Steg:

  1. Gå till Webbshop > Teman i din Shopify-admin.

  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 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 Javascript-kod för kvantitetsregler

Varje variant av en produkt kan ha en egen uppsättning kvantitetsregler. När en annan variant väljs måste de kvantitetsregler som visas på en produktsida eller i avsnittet utvald produkt uppdateras. Det uppdaterade värdet kan hämtas med hjälp av Javascript-kod.

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

Steg:

  1. Gå till Webbshop > Teman i din Shopify-admin.

  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 theme.js.

  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.

Volymbaserad prissättning

Lägg till Liquid-kod för volymbaserad prissättning

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

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

Steg:

  1. Gå till Webbshop > Teman i din Shopify-admin.

  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 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 Javascript-kod för volymbaserad prissättning

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

  • theme.js

Steg:

  1. Gå till Webbshop > Teman i din Shopify-admin.

  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 theme.js.

  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 språkversioner

För att se till att kvantitetsregler och volymbaserad prissättning visas på alla översatta versioner av din webbshop kan du lägga till språkversioner genom att lägga till följande JSON-översättningssträngar i din en.default.json-fil.

Steg:

  1. Gå till Webbshop > Teman i din Shopify-admin.

  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 en.default.json.

  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.