Kirjaudu sisään
Ota yhteyttä

Määräsääntöjen ja volyymihinnoittelun näyttäminen kaupassasi

Voit näyttää B2B-luettelon määräsäännöt ja volyymihinnoittelun kaupassasi, kun 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.

Tällä sivulla

Huomioitavaa määräsääntöjen ja volyymihinnoittelun lisäämisestä teeman koodiin

Ennen kuin lisäät määräsääntöjä ja volyymihinnoittelun teeman koodiin, ota huomioon seuraavat seikat:

  • Tämä on edistyneille käyttäjille tarkoitettu tutoriaali. Jos et halua lukea ja muokata teeman koodia, voit työskennellä kehittäjän kanssa tai palkata Shopify Partnerin.
  • Ennen kuin teet päivityksiä teematiedostoihisi, varmista, että kopioit teemasi ja luot siitä varmuuskopion.
  • B2B-luettelon määräsääntöjä tuetaan ilmaisissa Shopify-teemoissa, joiden versio on vähintään 8.0.0. Volyymihinnoittelua tuetaan versiossa 11.0.0 ja sitä uudemmissa versioissa.

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

Ohjeet:

  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.

Ohjeet:

  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

Ohjeet:

  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

Ohjeet:

  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

Ohjeet:

  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

Ohjeet:

  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.

Ohjeet:

  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.
Etkö löydä hakemaasi vastausta? Autamme mielellämme.