Näytä määräsäännöt ja volyymihinnoittelu kaupassasi

Tämä sivu on tulostettu Apr 28, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/b2b/theme-code/quantity-pricing.

B2B-luettelon määräsääntöjä tuetaan ilmaisissa Shopify-teemoissa, versiossa 8.0.0 tai sitä uudemmissa. Volyymihinnoittelua tuetaan versiossa 11.0.0 tai sitä uudemmissa. Jos haluat näyttää määräsäännöt ja volyymihinnoittelun kaupassasi, ehdotamme, että päivität kauppasi teeman uusimpaan versioon.

Jos et halua muuttaa tai päivittää teemaa, voit näyttää määräsäännöt ja volyymihinnoittelun lisäämällä teemaan seuraavan koodin. Ennen kuin teet päivityksiä teematiedostoihisi, varmista, että kopioit teemasi ja luot siitä varmuuskopion.

Tällä sivulla

Tuotekorin määrä

Tuoteversion ostoskorin määrän arvo voidaan näyttää tuotesivulla tai esittelytuoteosiossa. Arvo voidaan noutaa Liquidia käyttämällä.

Lisää Liquid-tuotekorin määräkoodi

Voit tukea ostoskorin määrää lisäämällä koodia seuraaviin teemasi tiedostoihin:

  • main-product.liquid tai vastaava
  • featured-product.liquid tai vastaava

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Avaa tiedosto, jota haluat muokata.
  4. Luo uusi rivi tiedoston loppuun ja lisää seuraava koodi: 
{% 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. Klikkaa Tallenna.

Lisää Javascript-tuotekorin määräkoodi

Kun tuoteversion ostoskorin määrä muuttuu, tuotesivulla tai esittelytuoteosiossa näkyvä arvo on päivitettävä. Päivitetty arvo voidaan noutaa Javascript-koodilla.

Voit lisätä koodin theme.js-tiedostoon tai vastaavaan.

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Avaa theme.js -tiedosto.
  4. Luo uusi rivi tiedoston loppuun ja lisää seuraava koodi: 
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. Klikkaa Tallenna.

Määräsäännöt

Tuoteversiota koskevat määräsäännöt voidaan näyttää tuotesivulla tai esittelytuoteosiossa. Säännöt voidaan noutaa Liquidin avulla.

Lisää Liquid-määräsääntökoodi

Voit tukea määräsääntöjä lisäämällä koodia seuraaviin teemasi tiedostoihin:

  • main-product.liquid tai vastaava
  • featured-product.liquid tai vastaava

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Avaa tiedosto, jota haluat muokata.
  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi: 
{% 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. Klikkaa Tallenna.

Lisää Javascript-määräsääntökoodi

Jokaisella tuoteversiolla voi olla omat määräsääntönsä. Kun eri versio on valittu, tuotesivulla tai esittelytuoteosiossa näkyvät määräsäännöt on päivitettävä. Päivitetty arvo voidaan noutaa Javascript-koodilla.

  • theme.js tai vastaava
  • en.default.json

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Avaa theme.js -tiedosto.
  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi: 
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. Klikkaa Tallenna.

Volyymihinnoittelu

Liquid-volyymihinnoittelukoodin lisääminen

Jos haluat näyttää volyymihinnoittelun, voit lisätä koodia teemasi seuraaviin tiedostoihin:

  • main-product.liquid tai vastaava
  • featured-product.liquid tai vastaava

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Avaa tiedosto, jota haluat muokata.
  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi: 
{%- 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. Klikkaa Tallenna.

Javascript-volyymihinnoittelukoodin lisääminen

Jos haluat näyttää volyymihinnoittelun, voit lisätä koodin teemasi seuraavaan tiedostoon:

  • theme.js

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Avaa theme.js -tiedosto.
  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi: 
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. Klikkaa Tallenna.

Lisää alueita

Voit varmistaa, että määräsäännöt ja volyymihinnoittelu näkyvät verkkokaupan kaikissa käännetyissä versioissa, lisäämällä tiedostoon seuraavat JSON-käännösjonot en.default.json -tiedostoosi.

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Avaa en.default.json-tiedosto.
  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi: 
"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Klikkaa Tallenna.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi