Prikaz pravil glede količine in količinskih cen v trgovini

Pravila glede količine in količinske cene za katalog B2B lahko v svoji trgovini prikažete tako, da posodobite temo svoje trgovine na najnovejšo različico.

Če ne želite spremeniti ali posodobiti svoje teme, lahko dodate naslednjo kodo v svojo temo za prikaz pravil glede količine in količinskih cen.

Na tej strani

Na kaj morate biti pozorni pri dodajanju pravil glede količine in količinskih cen v kodo teme

Preden v kodo teme dodate pravila glede količine in količinske cene, upoštevajte naslednje:

To je napredna vadnica. Če niste vešči branja in urejanja kode teme, lahko sodelujete z razvijalcem ali pa najamete Shopifyjevega partnerja.
Preden posodobite datoteke teme, podvojite svojo temo, da ustvarite varnostno kopijo.
Pravila glede količine za katalog B2B so podprta v brezplačnih temah Shopify različice 8.0.0 ali novejše. Količinska cena je podprta od različice 11.0.0 naprej.

Količina izdelkov v košarici

Vrednost količine različice izdelka v košarici je lahko prikazana na strani izdelka ali v razdelku z izpostavljenim izdelkom. Vrednost je mogoče pridobiti s kodo Liquid.

Dodajanje kode Liquid za količino izdelka v košarici

Kodo za podporo količini v košarici lahko dodate v naslednje datoteke v svoji temi:

main-product.liquid ali enakovredno datoteko
featured-product.liquid ali enakovredno datoteko

Koraki:

V skrbniku Shopify odprite Spletna trgovina > Teme.
Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.
Odprite datoteko, ki jo želite urediti.
Na dnu datoteke ustvarite novo vrstico in dodajte naslednjo kodo:

{% 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>

Kliknite Shrani.

Dodajanje kode Javascript za količino v košarici

Ko se količina različice v košarici spremeni, je treba posodobiti vrednost, prikazano na strani izdelka ali v razdelku z izpostavljenim izdelkom. Posodobljeno vrednost je mogoče pridobiti s kodo Javascript.

Kodo lahko dodate v datoteko theme.js ali enakovredno datoteko.

Koraki:

V skrbniku Shopify odprite Spletna trgovina > Teme.
Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.
Odprite datoteko theme.js.
Na dnu datoteke ustvarite novo vrstico in dodajte naslednjo kodo:

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;
  });

Kliknite Shrani.

Pravila glede količine

Pravila glede količine različice izdelka so lahko prikazana na strani izdelka ali v razdelku z izpostavljenim izdelkom. Pravila je mogoče pridobiti s kodo Liquid.

Dodajanje kode Liquid za pravila glede količine

Kodo za podporo pravilom glede količine lahko dodate v naslednje datoteke v svoji temi:

main-product.liquid ali enakovredno datoteko
featured-product.liquid ali enakovredno datoteko

Koraki:

V skrbniku Shopify odprite Spletna trgovina > Teme.
Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.
Odprite datoteko, ki jo želite urediti.
Na dnu datoteke ustvarite novo vrstico in nato dodajte naslednjo kodo:

{% 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>

Kliknite Shrani.

Dodajanje kode Javascript za pravila glede količine

Vsaka različica izdelka ima lahko svoj nabor pravil glede količine. Ko izberete drugo različico, je treba pravila glede količine, prikazana na strani izdelka ali v razdelku z izpostavljenim izdelkom, posodobiti. Posodobljeno vrednost je mogoče pridobiti s kodo Javascript.

theme.js ali enakovredno datoteko
en.default.json

Koraki:

V skrbniku Shopify odprite Spletna trgovina > Teme.
Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.
Odprite datoteko theme.js.
Na dnu datoteke ustvarite novo vrstico in nato dodajte naslednjo kodo:

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;
  });

Kliknite Shrani.

Količinska cena

Dodajanje kode Liquid za količinsko ceno

Kodo za prikaz količinske cene lahko dodate v naslednje datoteke v svoji temi:

main-product.liquid ali enakovredno datoteko
featured-product.liquid ali enakovredno datoteko

Koraki:

V skrbniku Shopify odprite Spletna trgovina > Teme.
Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.
Odprite datoteko, ki jo želite urediti.
Na dnu datoteke ustvarite novo vrstico in nato dodajte naslednjo kodo:

{%- 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 -%}

Kliknite Shrani.

Dodajanje kode Javascript za količinsko ceno

Kodo za prikaz količinske cene lahko dodate v naslednjo datoteko v svoji temi:

theme.js

Koraki:

V skrbniku Shopify odprite Spletna trgovina > Teme.
Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.
Odprite datoteko theme.js.
Na dnu datoteke ustvarite novo vrstico in nato dodajte naslednjo kodo:

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');
        }
      }
    },
  );
}

Kliknite Shrani.

Dodajanje območnih nastavitev

Da zagotovite prikaz pravil glede količine in količinske cene v vseh prevedenih različicah spletne trgovine, lahko območne nastavitve dodate z vnosom naslednjih nizov prevodov JSON v datoteko en.default.json.

Koraki:

V skrbniku Shopify odprite Spletna trgovina > Teme.
Poiščite temo, ki jo želite urediti, kliknite gumb …, da odprete meni dejanj, in nato kliknite Uredi kodo.
Odprite datoteko en.default.json.
Na dnu datoteke ustvarite novo vrstico in nato dodajte naslednjo kodo:

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

Kliknite Shrani.