Axuda
Iniciar sesión

Mostrar regras de cantidade e prezos por volume na túa tenda

Podes mostrar as regras de cantidade e os prezos por volume do teu catálogo B2B na túa tenda actualizando o tema da túa tenda á versión máis recente.

Se non queres cambiar nin actualizar o teu tema, podes engadir o seguinte código a el para mostrar as regras de cantidade e os prezos por volume.

Nesta páxina

Consideracións para engadir as regras de cantidade e os prezos por volume ao código do teu tema

Antes de engadir as regras de cantidade e os prezos por volume ao código do teu tema, revisa as seguintes consideracións:

  • Este é un tutorial avanzado. Se non tes experiencia lendo e editando código de temas, podes traballar cun programador ou contratar un Partner de Shopify.
  • Antes de actualizar os ficheiros do teu tema, asegúrate de duplicar o teu tema para crear unha copia de seguranza.
  • As regras de cantidade para o catálogo B2B son compatibles nos temas gratuítos de Shopify, na versión 8.0.0 ou nunha posterior. Os prezos por volume son compatibles na versión 11.0.0 ou nunha posterior.

Cantidade do produto no carro

O valor da cantidade do carro dunha variante do produto pódese mostrar na páxina do produto ou na sección de produtos destacados. O valor pódese obter usando Liquid.

Engadir o código Liquid de cantidade do produto no carro

Podes engadir código aos seguintes ficheiros do teu tema para que sexan compatibles coa cantidade do carro:

  • main-product.liquid ou equivalente
  • featured-product.liquid ou equivalente

Pasos:

  1. Desde o administrador de Shopify, vai a Tenda en liña.

  2. Busca o tema que queres editar, fai clic no botón Menú horizontal para abrir o menú de accións e, a continuación, fai clic en Editar código.

  3. Abre o ficheiro que queres editar.

  4. Crea unha nova liña na parte inferior do ficheiro e engade o seguinte código:

{% 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. Fai clic en Gardar.

Engadir o código Javascript da cantidade do carro

Cando a cantidade do carro dunha variante cambie, debe actualizarse o valor mostrado na páxina do produto ou na sección do produto destacado. O valor actualizado pódese obter usando código Javascript.

Podes engadir código ao ficheiro theme.js ou equivalente.

Pasos:

  1. Desde o administrador de Shopify, vai a Tenda en liña.

  2. Busca o tema que queres editar, fai clic no botón Menú horizontal para abrir o menú de accións e, a continuación, fai clic en Editar código.

  3. Abre o ficheiro theme.js.

  4. Crea unha nova liña na parte inferior do ficheiro e engade o seguinte código:

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. Fai clic en Gardar.

Regras de cantidade

As regras de cantidade dunha variante do produto pódense mostrar na páxina do produto ou na sección de produtos destacados. As regras pódense obter usando Liquid.

Engadir o código Liquid das regras de cantidade

Podes engadir código aos seguintes ficheiros do teu tema para que sexan compatibles coas regras de cantidade:

  • main-product.liquid ou equivalente
  • featured-product.liquid ou equivalente

Pasos:

  1. Desde o administrador de Shopify, vai a Tenda en liña.

  2. Busca o tema que queres editar, fai clic no botón Menú horizontal para abrir o menú de accións e, a continuación, fai clic en Editar código.

  3. Abre o ficheiro que queres editar.

  4. Crea unha nova liña na parte inferior do ficheiro e despois engade o seguinte código:

{% 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. Fai clic en Gardar.

Engadir o código Javascript das regras de cantidade

Cada variante dun produto pode ter as súas propias regras de cantidade. Despois de seleccionar unha variante diferente, é necesario actualizar as regras de cantidade mostradas nunha páxina de produto ou nunha sección de produto destacado. O valor actualizado pódese obter usando código Javascript.

  • theme.js ou equivalente
  • en.default.json

Pasos:

  1. Desde o administrador de Shopify, vai a Tenda en liña.

  2. Busca o tema que queres editar, fai clic no botón Menú horizontal para abrir o menú de accións e, a continuación, fai clic en Editar código.

  3. Abre o ficheiro theme.js.

  4. Crea unha nova liña na parte inferior do ficheiro e despois engade o seguinte código:

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. Fai clic en Gardar.

Prezos por volume

Engadir o código Liquid dos prezos por volume

Podes engadir código aos seguintes ficheiros do teu tema para mostrar os prezos por volume:

  • main-product.liquid ou equivalente
  • featured-product.liquid ou equivalente

Pasos:

  1. Desde o administrador de Shopify, vai a Tenda en liña.

  2. Busca o tema que queres editar, fai clic no botón Menú horizontal para abrir o menú de accións e, a continuación, fai clic en Editar código.

  3. Abre o ficheiro que queres editar.

  4. Crea unha nova liña na parte inferior do ficheiro e despois engade o seguinte código:

{%- 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. Fai clic en Gardar.

Engadir o código Javascript dos prezos por volume

Podes engadir código ao seguinte ficheiro do teu tema para mostrar os prezos por volume:

  • theme.js

Pasos:

  1. Desde o administrador de Shopify, vai a Tenda en liña.

  2. Busca o tema que queres editar, fai clic no botón Menú horizontal para abrir o menú de accións e, a continuación, fai clic en Editar código.

  3. Abre o ficheiro theme.js.

  4. Crea unha nova liña na parte inferior do ficheiro e despois engade o seguinte código:

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. Fai clic en Gardar.

Engadir configuracións rexionais

Para asegurarte de que as regras de cantidade e os prezos por volume se mostren en todas as versións traducidas da túa tenda en liña, podes engadir configuracións rexionais engadindo as seguintes cadeas de tradución JSON ao teu ficheiro en.default.json.

Pasos:

  1. Desde o administrador de Shopify, vai a Tenda en liña.

  2. Busca o tema que queres editar, fai clic no botón Menú horizontal para abrir o menú de accións e, a continuación, fai clic en Editar código.

  3. Abre o ficheiro en.default.json.

  4. Crea unha nova liña na parte inferior do ficheiro e despois engade o seguinte código:

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