உங்கள் ஸ்டோரில் அளவு விதிகளையும் அளவு அடிப்படையிலான விலை நிர்ணயத்தையும் காட்டுதல்

உங்கள் ஸ்டோரின் தீமைப் புதிய பதிப்பிற்குப் புதுப்பிப்பதன் மூலம், உங்கள் ஸ்டோரில் B2B கேட்லாக்கிற்கான அளவு விதிகளையும் அளவு அடிப்படையிலான விலை நிர்ணயத்தையும் காட்டலாம்.

உங்கள் தீமை மாற்றவோ புதுப்பிக்கவோ நீங்கள் விரும்பவில்லை எனில், அளவு விதிகளையும் அளவு அடிப்படையிலான விலை நிர்ணயத்தையும் காட்ட, உங்கள் தீமில் பின்வரும் குறியீட்டைச் சேர்க்கலாம்.

இப்பக்கத்தில் உள்ளவை

உங்கள் தீம் குறியீட்டில் அளவு விதிகளையும் அளவு அடிப்படையிலான விலை நிர்ணயத்தையும் சேர்ப்பதற்கான பரிசீலனைகள்

உங்கள் தீம் குறியீட்டில் அளவு விதிகளையும் அளவு அடிப்படையிலான விலை நிர்ணயத்தையும் சேர்ப்பதற்கு முன், பின்வரும் பரிசீலனைகளை மதிப்பாய்வு செய்யவும்:

இது ஒரு மேம்பட்ட டுடோரியலாகும். தீம் குறியீட்டைப் படிப்பதிலும் திருத்துவதிலும் உங்களுக்குச் சிரமம் இருந்தால், நீங்கள் ஒரு டெவெலப்பருடன் இணைந்து பணியாற்றலாம் அல்லது ஒரு Shopify பார்ட்னரைப் பணியமர்த்தலாம்.
உங்கள் தீம் கோப்புகளில் புதுப்பிப்புகளைச் செய்வதற்கு முன், ஒரு காப்புநகலை உருவாக்க, உங்கள் தீமை நகலெடுப்பதை உறுதிசெய்து கொள்ளவும்.
B2B கேட்லாக்கிற்கான அளவு விதிகள், பதிப்பு 8.0.0 அல்லது அதற்குப் பிந்தைய இலவச Shopify தீம்களில் ஆதரிக்கப்படுகின்றன. அளவு அடிப்படையிலான விலை நிர்ணயம் பதிப்பு 11.0.0 அல்லது அதற்குப் பிந்தைய பதிப்புகளில் ஆதரிக்கப்படுகிறது.

தயாரிப்புக் கார்ட் அளவு

ஒரு தயாரிப்பு மாறுபாட்டின் கார்ட் அளவு மதிப்பைத் தயாரிப்புப் பக்கத்திலோ சிறப்புத் தயாரிப்புப் பிரிவிலோ காட்டலாம். Liquid-ஐப் பயன்படுத்தி மதிப்பை எடுக்க முடியும்.

Liquid தயாரிப்புக் கார்ட் அளவு குறியீட்டைச் சேர்த்தல்

கார்ட் அளவை ஆதரிக்க, உங்கள் தீமில் உள்ள பின்வரும் கோப்புகளில் குறியீட்டைச் சேர்க்கலாம்:

main-product.liquid அல்லது அதற்கு இணையான கோப்பு
featured-product.liquid அல்லது அதற்கு இணையான கோப்பு

படிகள்:

உங்கள் Shopify நிர்வாகியிலிருந்து ஆன்லைன் ஸ்டோருக்குச் செல்லவும்.
நீங்கள் திருத்த விரும்பும் தீமைக் கண்டறிந்து, செயல்கள் மெனுவைத் திறக்க, பொத்தானைக் கிளிக் செய்து, பிறகு குறியீட்டைத் திருத்து என்பதைக் கிளிக் செய்யவும்.
நீங்கள் திருத்த விரும்பும் கோப்பைத் திறக்கவும்.
கோப்பின் கீழ்ப்பகுதியில் புதிய வரியை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

சேமி என்பதைக் கிளிக் செய்யவும்.

Javascript கார்ட் அளவு குறியீட்டைச் சேர்த்தல்

ஒரு மாறுபாட்டின் கார்ட் அளவு மாறும்போது, தயாரிப்புப் பக்கத்திலோ சிறப்புத் தயாரிப்புப் பிரிவிலோ காட்டப்படும் மதிப்பு புதுப்பிக்கப்பட வேண்டும். புதுப்பிக்கப்பட்ட மதிப்பை Javascript குறியீட்டைப் பயன்படுத்தி எடுக்க முடியும்.

theme.js கோப்பிலோ அதற்கு இணையான கோப்பிலோ குறியீட்டைச் சேர்க்கலாம்.

படிகள்:

உங்கள் Shopify நிர்வாகியிலிருந்து ஆன்லைன் ஸ்டோருக்குச் செல்லவும்.
நீங்கள் திருத்த விரும்பும் தீமைக் கண்டறிந்து, செயல்கள் மெனுவைத் திறக்க, பொத்தானைக் கிளிக் செய்து, பிறகு குறியீட்டைத் திருத்து என்பதைக் கிளிக் செய்யவும்.
theme.js கோப்பைத் திறக்கவும்.
கோப்பின் கீழ்ப்பகுதியில் புதிய வரியை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

சேமி என்பதைக் கிளிக் செய்யவும்.

அளவு விதிகள்

ஒரு தயாரிப்பு மாறுபாட்டின் அளவு விதிகளைத் தயாரிப்புப் பக்கத்திலோ சிறப்புத் தயாரிப்புப் பிரிவிலோ காட்டலாம். Liquid-ஐப் பயன்படுத்தி விதிகளை எடுக்க முடியும்.

Liquid அளவு விதிகள் குறியீட்டைச் சேர்த்தல்

அளவு விதிகளை ஆதரிக்க, உங்கள் தீமில் உள்ள பின்வரும் கோப்புகளில் குறியீட்டைச் சேர்க்கலாம்:

main-product.liquid அல்லது அதற்கு இணையான கோப்பு
featured-product.liquid அல்லது அதற்கு இணையான கோப்பு

படிகள்:

உங்கள் Shopify நிர்வாகியிலிருந்து ஆன்லைன் ஸ்டோருக்குச் செல்லவும்.
நீங்கள் திருத்த விரும்பும் தீமைக் கண்டறிந்து, செயல்கள் மெனுவைத் திறக்க, பொத்தானைக் கிளிக் செய்து, பிறகு குறியீட்டைத் திருத்து என்பதைக் கிளிக் செய்யவும்.
நீங்கள் திருத்த விரும்பும் கோப்பைத் திறக்கவும்.
கோப்பின் கீழ்ப்பகுதியில் புதிய வரியை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

சேமி என்பதைக் கிளிக் செய்யவும்.

Javascript அளவு விதிகள் குறியீட்டைச் சேர்த்தல்

ஒரு தயாரிப்பின் ஒவ்வொரு மாறுபாடும் அதற்கே உரிய அளவு விதிகளைக் கொண்டிருக்கலாம். வேறு மாறுபாடு தேர்ந்தெடுக்கப்பட்ட பிறகு, தயாரிப்புப் பக்கத்திலோ சிறப்புத் தயாரிப்புப் பிரிவிலோ காட்டப்படும் அளவு விதிகளைப் புதுப்பிக்க வேண்டும். புதுப்பிக்கப்பட்ட மதிப்பை Javascript குறியீட்டைப் பயன்படுத்தி எடுக்க முடியும்.

theme.js அல்லது அதற்கு இணையான கோப்பு
en.default.json

படிகள்:

உங்கள் Shopify நிர்வாகியிலிருந்து ஆன்லைன் ஸ்டோருக்குச் செல்லவும்.
நீங்கள் திருத்த விரும்பும் தீமைக் கண்டறிந்து, செயல்கள் மெனுவைத் திறக்க, பொத்தானைக் கிளிக் செய்து, பிறகு குறியீட்டைத் திருத்து என்பதைக் கிளிக் செய்யவும்.
theme.js கோப்பைத் திறக்கவும்.
கோப்பின் கீழ்ப்பகுதியில் புதிய வரியை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

சேமி என்பதைக் கிளிக் செய்யவும்.

அளவு அடிப்படையிலான விலை நிர்ணயம்

Liquid அளவு அடிப்படையிலான விலை நிர்ணயக் குறியீட்டைச் சேர்த்தல்

அளவு அடிப்படையிலான விலை நிர்ணயத்தைக் காட்ட, உங்கள் தீமில் உள்ள பின்வரும் கோப்புகளில் குறியீட்டைச் சேர்க்கலாம்:

main-product.liquid அல்லது அதற்கு இணையான கோப்பு
featured-product.liquid அல்லது அதற்கு இணையான கோப்பு

படிகள்:

உங்கள் Shopify நிர்வாகியிலிருந்து ஆன்லைன் ஸ்டோருக்குச் செல்லவும்.
நீங்கள் திருத்த விரும்பும் தீமைக் கண்டறிந்து, செயல்கள் மெனுவைத் திறக்க, பொத்தானைக் கிளிக் செய்து, பிறகு குறியீட்டைத் திருத்து என்பதைக் கிளிக் செய்யவும்.
நீங்கள் திருத்த விரும்பும் கோப்பைத் திறக்கவும்.
கோப்பின் கீழ்ப்பகுதியில் புதிய வரியை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

சேமி என்பதைக் கிளிக் செய்யவும்.

Javascript அளவு அடிப்படையிலான விலை நிர்ணயக் குறியீட்டைச் சேர்த்தல்

அளவு அடிப்படையிலான விலை நிர்ணயத்தைக் காட்ட, உங்கள் தீமில் உள்ள பின்வரும் கோப்பில் குறியீட்டைச் சேர்க்கலாம்:

theme.js

படிகள்:

உங்கள் Shopify நிர்வாகியிலிருந்து ஆன்லைன் ஸ்டோருக்குச் செல்லவும்.
நீங்கள் திருத்த விரும்பும் தீமைக் கண்டறிந்து, செயல்கள் மெனுவைத் திறக்க, பொத்தானைக் கிளிக் செய்து, பிறகு குறியீட்டைத் திருத்து என்பதைக் கிளிக் செய்யவும்.
theme.js கோப்பைத் திறக்கவும்.
கோப்பின் கீழ்ப்பகுதியில் புதிய வரியை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

சேமி என்பதைக் கிளிக் செய்யவும்.

வட்டாரங்களைச் சேர்

உங்கள் ஆன்லைன் ஸ்டோரின் மொழிபெயர்க்கப்பட்ட அனைத்துப் பதிப்புகளிலும் அளவு விதிகளும் அளவு அடிப்படையிலான விலை நிர்ணயமும் காட்டப்படுவதை உறுதிசெய்ய, en.default.json கோப்பில் பின்வரும் JSON மொழிபெயர்ப்புச் சரங்களைச் சேர்ப்பதன் மூலம் வட்டாரங்களைச் சேர்க்கலாம்.

படிகள்:

உங்கள் Shopify நிர்வாகியிலிருந்து ஆன்லைன் ஸ்டோருக்குச் செல்லவும்.
நீங்கள் திருத்த விரும்பும் தீமைக் கண்டறிந்து, செயல்கள் மெனுவைத் திறக்க, பொத்தானைக் கிளிக் செய்து, பிறகு குறியீட்டைத் திருத்து என்பதைக் கிளிக் செய்யவும்.
en.default.json கோப்பைத் திறக்கவும்.
கோப்பின் கீழ்ப்பகுதியில் புதிய வரியை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

சேமி என்பதைக் கிளிக் செய்யவும்.