Pomoć
Prijavi se

Prikazivanje pravila o količini i cijene za velike količine u trgovini

Pravila o količini i cijenu za velike količine za svoj B2B katalog možete prikazati u trgovini tako da ažurirate temu svoje trgovine na najnoviju verziju.

Ako ne želite promijeniti ili ažurirati temu, u nju možete dodati sljedeći kod za prikaz pravila o količini i cijene za velike količine.

Na ovoj stranici

Napomene u vezi s dodavanjem pravila o količini i cijene za velike količine u kod teme

Prije dodavanja pravila o količini i cijene za velike količine u kod teme pregledajte sljedeće napomene:

  • Ovo je napredna obuka. Ako niste upoznati s čitanjem i uređivanjem koda teme, možete surađivati s razvojnim programerom ili angažirati Partnera za Shopify.
  • Prije nego što ažurirate datoteke teme, obavezno duplicirajte svoju temu radi izrade sigurnosne kopije.
  • Pravila o količini za B2B katalog podržana su na besplatnim temama platforme Shopify u verziji 8.0.0 ili novijoj. Cijena za velike količine podržana je u verziji 11.0.0 ili novijoj.

Količina proizvoda u košarici

Vrijednost količine u košarici za varijantu proizvoda može se prikazati na stranici proizvoda ili u odjeljku istaknutih proizvoda. Vrijednost se može dohvatiti s pomoću koda Liquid.

Dodavanje koda Liquid za količinu proizvoda u košarici

Kôd možete dodati u sljedeće datoteke u temi za podršku količine u košarici:

  • main-product.liquid ili ekvivalent
  • featured-product.liquid ili ekvivalent

Koraci:

  1. U administratorskoj ploči platforme Shopify idite na Internetska trgovina > Teme.

  2. Pronađite temu koju želite urediti, kliknite na gumb ... za otvaranje izbornika radnji pa kliknite na Uredi kôd.

  3. Otvorite datoteku koju želite urediti.

  4. Izradite novi redak na dnu datoteke i dodajte sljedeći kôd:

{% 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. Kliknite na Spremi.

Dodavanje koda Javascript za količinu u košarici

Kada se promijeni količina varijante u košarici, mora se ažurirati vrijednost prikazana na stranici proizvoda ili u odjeljku istaknutih proizvoda. Ažurirana vrijednost može se dohvatiti s pomoću koda Javascript.

Kôd možete dodati u datoteku theme.js ili ekvivalentnu datoteku.

Koraci:

  1. U administratorskoj ploči platforme Shopify idite na Internetska trgovina > Teme.

  2. Pronađite temu koju želite urediti, kliknite na gumb ... za otvaranje izbornika radnji pa kliknite na Uredi kôd.

  3. Otvorite datoteku theme.js.

  4. Izradite novi redak na dnu datoteke i dodajte sljedeći kôd:

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. Kliknite na Spremi.

Pravila o količini

Pravila o količini za varijantu proizvoda mogu se prikazati na stranici proizvoda ili u odjeljku istaknutih proizvoda. Pravila se mogu dohvatiti s pomoću koda Liquid.

Dodavanje koda Liquid za pravila o količini

Kôd možete dodati u sljedeće datoteke u temi za podršku pravila o količini:

  • main-product.liquid ili ekvivalent
  • featured-product.liquid ili ekvivalent

Koraci:

  1. U administratorskoj ploči platforme Shopify idite na Internetska trgovina > Teme.

  2. Pronađite temu koju želite urediti, kliknite na gumb ... za otvaranje izbornika radnji pa kliknite na Uredi kôd.

  3. Otvorite datoteku koju želite urediti.

  4. Izradite novi redak na dnu datoteke i dodajte sljedeći kôd:

{% 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. Kliknite na Spremi.

Dodavanje koda Javascript za pravila o količini

Svaka varijanta proizvoda može imati vlastiti skup pravila o količini. Nakon odabira druge varijante moraju se ažurirati pravila o količini prikazana na stranici proizvoda ili u odjeljku istaknutih proizvoda. Ažurirana vrijednost može se dohvatiti s pomoću koda Javascript.

  • theme.js ili ekvivalent
  • en.default.json

Koraci:

  1. U administratorskoj ploči platforme Shopify idite na Internetska trgovina > Teme.

  2. Pronađite temu koju želite urediti, kliknite na gumb ... za otvaranje izbornika radnji pa kliknite na Uredi kôd.

  3. Otvorite datoteku theme.js.

  4. Izradite novi redak na dnu datoteke i dodajte sljedeći kôd:

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. Kliknite na Spremi.

Cijena za velike količine

Dodavanje koda Liquid za cijenu za velike količine

Kôd možete dodati u sljedeće datoteke u temi za prikaz cijene za velike količine:

  • main-product.liquid ili ekvivalent
  • featured-product.liquid ili ekvivalent

Koraci:

  1. U administratorskoj ploči platforme Shopify idite na Internetska trgovina > Teme.

  2. Pronađite temu koju želite urediti, kliknite na gumb ... za otvaranje izbornika radnji pa kliknite na Uredi kôd.

  3. Otvorite datoteku koju želite urediti.

  4. Izradite novi redak na dnu datoteke i dodajte sljedeći kôd:

{%- 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. Kliknite na Spremi.

Dodavanje koda Javascript za cijenu za velike količine

Kôd možete dodati u sljedeću datoteku u temi za prikaz cijene za velike količine:

  • theme.js

Koraci:

  1. U administratorskoj ploči platforme Shopify idite na Internetska trgovina > Teme.

  2. Pronađite temu koju želite urediti, kliknite na gumb ... za otvaranje izbornika radnji pa kliknite na Uredi kôd.

  3. Otvorite datoteku theme.js.

  4. Izradite novi redak na dnu datoteke i dodajte sljedeći kôd:

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. Kliknite na Spremi.

Dodavanje regionalnih parametara

Kako biste osigurali prikaz pravila o količini i cijene za velike količine u svim prevedenim verzijama internetske trgovine, možete dodati regionalne parametre dodavanjem sljedećih nizova prijevoda JSON u datoteku en.default.json.

Koraci:

  1. U administratorskoj ploči platforme Shopify idite na Internetska trgovina > Teme.

  2. Pronađite temu koju želite urediti, kliknite na gumb ... za otvaranje izbornika radnji pa kliknite na Uredi kôd.

  3. Otvorite datoteku en.default.json.

  4. Izradite novi redak na dnu datoteke i dodajte sljedeći kôd:

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