Pomoc
Zaloguj

Wyświetlanie reguł dotyczących ilości i cen zależnych od ilości w sklepie

Możesz wyświetlić w sklepie reguły dotyczące ilości i ceny zależne od ilości dla katalogu B2B, aktualizując szablon do najnowszej wersji.

Jeśli nie chcesz zmieniać ani aktualizować szablonu, możesz dodać do niego poniższy kod, aby wyświetlić reguły dotyczące ilości i ceny zależne od ilości.

Na tej stronie

Kwestie do rozważenia podczas dodawania reguł dotyczących ilości i cen zależnych od ilości do kodu szablonu

Przed dodaniem do kodu szablonu reguł dotyczących ilości i cen zależnych od ilości zapoznaj się z poniższymi uwagami:

  • To jest zaawansowany tutorial. Jeśli nie masz doświadczenia w czytaniu i edytowaniu kodu szablonu, możesz nawiązać współpracę z deweloperem lub zatrudnić Partnera Shopify.
  • Przed wprowadzeniem zmian w plikach szablonu utwórz duplikat szablonu, aby utworzyć kopię zapasową.
  • Reguły dotyczące ilości dla katalogu B2B są obsługiwane w darmowych szablonach Shopify w wersji 8.0.0 lub nowszej. Ceny zależne od ilości są obsługiwane w wersji 11.0.0 lub nowszej.

Ilość produktu w koszyku

Wartość ilości w koszyku dla wariantu produktu może być wyświetlana na stronie produktu lub w sekcji polecanego produktu. Wartość tę można pobrać za pomocą języka Liquid.

Dodaj kod Liquid dla ilości produktu w koszyku

Możesz dodać kod do następujących plików w szablonie, aby włączyć obsługę ilości w koszyku:

  • main-product.liquid lub jego odpowiednik
  • featured-product.liquid lub jego odpowiednik

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. Otwórz plik, który chcesz edytować.

  4. Utwórz nową linię na końcu pliku i dodaj następujący 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. Kliknij Zapisz.

Dodaj kod Javascript dla ilości w koszyku

Gdy zmieni się ilość w koszyku dla danego wariantu, wartość wyświetlana na stronie produktu lub w sekcji polecanego produktu musi zostać zaktualizowana. Zaktualizowaną wartość można pobrać za pomocą kodu Javascript.

Możesz dodać kod do pliku theme.js lub jego odpowiednika.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. Otwórz plik theme.js.

  4. Utwórz nową linię na końcu pliku i dodaj następujący 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. Kliknij Zapisz.

Reguły dotyczące ilości

Reguły dotyczące ilości dla wariantu produktu mogą być wyświetlane na stronie produktu lub w sekcji polecanego produktu. Reguły te można pobrać za pomocą języka Liquid.

Dodaj kod Liquid dla reguł dotyczących ilości

Możesz dodać kod do następujących plików w szablonie, aby włączyć obsługę reguł dotyczących ilości:

  • main-product.liquid lub jego odpowiednik
  • featured-product.liquid lub jego odpowiednik

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. Otwórz plik, który chcesz edytować.

  4. Utwórz nową linię na końcu pliku, a następnie dodaj następujący 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. Kliknij Zapisz.

Dodaj kod Javascript dla reguł dotyczących ilości

Każdy wariant produktu może mieć własny zestaw reguł dotyczących ilości. Po wybraniu innego wariantu reguły dotyczące ilości wyświetlane na stronie produktu lub w sekcji polecanego produktu muszą zostać zaktualizowane. Zaktualizowaną wartość można pobrać za pomocą kodu Javascript.

  • theme.js lub jego odpowiednik
  • en.default.json

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. Otwórz plik theme.js.

  4. Utwórz nową linię na końcu pliku, a następnie dodaj następujący 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. Kliknij Zapisz.

Ceny zależne od ilości

Dodaj kod Liquid dla cen zależnych od ilości

Możesz dodać kod do następujących plików w szablonie, aby wyświetlić ceny zależne od ilości:

  • main-product.liquid lub jego odpowiednik
  • featured-product.liquid lub jego odpowiednik

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. Otwórz plik, który chcesz edytować.

  4. Utwórz nową linię na końcu pliku, a następnie dodaj następujący 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. Kliknij Zapisz.

Dodaj kod Javascript dla cen zależnych od ilości

Możesz dodać kod do następującego pliku w szablonie, aby wyświetlić ceny zależne od ilości:

  • theme.js

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. Otwórz plik theme.js.

  4. Utwórz nową linię na końcu pliku, a następnie dodaj następujący 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. Kliknij Zapisz.

Dodaj ustawienia regionalne

Aby mieć pewność, że reguły dotyczące ilości i ceny zależne od ilości są wyświetlane we wszystkich przetłumaczonych wersjach sklepu online, możesz dodać ustawienia regionalne, dodając następujące ciągi tłumaczeń JSON do pliku en.default.json.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.

  3. Otwórz plik en.default.json.

  4. Utwórz nową linię na końcu pliku, a następnie dodaj następujący kod:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Kliknij Zapisz.