Yksikköhintojen näyttäminen

Huomaa

Yksikköhinnoittelu on tällä hetkellä käytettävissä vain Euroopan unionissa (EU) ja Sveitsissä toimiville kauppiaille. Jos myyt tuotteitasi EU:ssa tai Sveitsissä, mutta yrityksesi ei toimi näillä alueilla, ota yhteyttä Shopify-tukeen, jotta ominaisuus voidaan aktivoida.

Jos myyt tuotteita määrinä tai mittoja, sinun on ehkä näytettävä yksikköhinta tietyille tuotteille. Kun syötät tuotteen yksikköhinnan, se näkyy tuotesivuilla, kokoelmasivuilla, ostoskorisivulla, kassasivuilla ja tilausvahvistusilmoituksissa.

Lisää tuotteeseen yksikköhinnat

Tietokone

1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

2. Klikkaa muokattavaa tuotetta.

3. Valinnainen: Jos tuotteellasi on tuoteversioita, klikkaa Versiot-osiossa versiota, jota haluat muokata.

4. Valitse Hinnoittelu-osiossa Näytä tämän tuotteen yksikköhinta.

5. Syötä tuotteesi kokonaismitat Tuotteen kokonaismitat -kenttään ja valitse mittayksikkö.

6. Valinnaista: Jos haluat vaihtaa oletusarvoisen perusmitan, lisää Perusmitta-kenttään uusi perusmitta ja valitse sitten mittayksikkö. Esimerkiksi 200 g:n painoiselle tuotteelle voit valita perusyksiköksi 1 kg.

7. Klikkaa Tallenna.

iPhone

1. Valitse Shopify-sovelluksessa Tuotteet > Kaikki tuotteet.
2. Napauta tuotetta, jota haluat muokata.
3. Napauta tuotteen hinta-aluetta.
4. Valitse Näytä yksikköhinta.
5. Syötä tuotteesi kokonaismitat Tuotteen kokonaismitat -kenttään ja valitse mittayksikkö.
6. Valinnaista: Jos haluat vaihtaa oletusarvoisen perusmitan, lisää Perusmitta-kenttään uusi perusmitta ja valitse sitten mittayksikkö. Esimerkiksi 200 g:n painoiselle tuotteelle voit valita perusyksiköksi 1 kg.
7. Napauta Tallenna.

Android

1. Valitse Shopify-sovelluksessa Tuotteet > Kaikki tuotteet.
2. Napauta tuotetta, jota haluat muokata.
3. Napauta tuotteen hinta-aluetta.
4. Valitse Näytä yksikköhinta.
5. Syötä tuotteesi kokonaismitat Tuotteen kokonaismitat -kenttään ja valitse mittayksikkö.
6. Valinnaista: Jos haluat vaihtaa oletusarvoisen perusmitan, lisää Perusmitta-kenttään uusi perusmitta ja valitse sitten mittayksikkö. Esimerkiksi 200 g:n painoiselle tuotteelle voit valita perusyksiköksi 1 kg.
7. Napauta ✓.

Näytä yksikköhinnat verkkokaupassasi

Yksikköhintaominaisuus on jo käytettävissä kaikissa Online Store 2.0 -teemoissa. Mitään toimenpiteitä ei tarvita yksikköhintojen näyttämiseksi verkkokaupassasi.

Jos käytössäsi on vanha teema etkä voi päivittää sitä yksikköhintaominaisuutta tukevaan versioon, voit mukauttaa teeman koodia manuaalisesti yksikköhinnan näyttämiseksi.

Yksikköhintojen näyttäminen vanhassa teemassa

Huomio

Tee teemastasi varmuuskopio, ennen kuin aloitat koodin muokkaamisen. Ohjeiden seuraava vaihe voi olla haastava. Jos tarvitset apua ominaisuuden lisäämisessä teemaasi, voit hankkia apua mukautuksia varten.

Tämän mukautuksen toimintavaiheet vaihtelevat teeman mukaan. Klikkaa teeman painiketta ennen kuin noudatat seuraavia ohjeita:

Debut

Debut-teeman toimintavaiheet

Yksikköhinnat ovat saatavilla Debut-teemassa versioille 12.1.0 ja uudemmille. Jos et pysty päivittämään teemaa uusimpaan versioon, voit lisätä yksikköhinnan mukautukset Debut-teeman aiempiin versioihin.

Muokkaa tuotteen hinnan koodinpätkää

1. klikkaa Koodinpätkät-hakemistossa product-price.liquid-tiedostoa.

2. Etsi koodi data-price käyttämällä Etsi pikanäppäin -toimintoa:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

1. Korvaa koodi seuraavalla koodinpätkällä:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi koodi price__sale käyttämällä Etsi pikanäppäin -toimintoa:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. Lisää seuraava koodi viimeisen </div>-tunnisteen alle:

{% if variant.unit_price_measurement %}
<div class="price__unit">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd class="price-unit-price">
    {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa ostoskorisivua

1. klikkaa Osiot-hakemistossa cart-template.liquid-tiedostoa.

2. Etsi koodi cart__price-wrapper käyttämällä Etsi pikanäppäin -toimintoa:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. Korvaa koodi seuraavalla koodinpätkällä:

<dl>
  {%- if item.original_price != item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Muokkausten jälkeen cart-template.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa kokoelmasivua

1. klikkaa Osiot-hakemistossa collection.liquid-tiedostoa.

2. Etsi koodi grid-view-item__title käyttämällä Etsi pikanäppäin -toimintoa:

{% include 'product-price' %}

1. Korvaa koodi seuraavalla koodinpätkällä:

{% include 'product-price', variant: nil %}

Muokkausten jälkeen collection.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuotekorttiruudukkoa

1. klikkaa Koodinpätkät-hakemistossa product-card-grid.liquid-tiedostoa.

2. Etsi koodi grid-view-item__title käyttämällä Etsi pikanäppäin -toimintoa:

{% include 'product-price', variant: product %}

1. Korvaa koodi seuraavalla koodinpätkällä:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Muokkausten jälkeen product-card-grid.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuotekorttiluetteloa

1. klikkaa Koodinpätkät-hakemistossa product-card-list.liquid-tiedostoa.

2. Etsi koodi {% if product.available %} käyttämällä Etsi pikanäppäin -toimintoa:

{% include 'product-price', variant: product %}

1. Korvaa koodi seuraavalla koodinpätkällä:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Muokkausten jälkeen product-card-list.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tilaussivua

1. klikkaa Mallit-hakemistossa customers/order.liquid-tiedostoa.

2. Etsi koodi data-label="{{ 'customer.order.price' | t }}" käyttämällä Etsi pikanäppäin -toimintoa:

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Korvaa koodi seuraavalla koodinpätkällä:

<dl>
  {%- if line_item.original_price != line_item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ line_item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ line_item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if line_item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Muokkausten jälkeen customers/order.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Teeman tyylien muokkaaminen

1. klikkaa Sisällöt-hakemistossa theme.scss.liquid-tiedostoa.

2. Etsi koodi .price__vendor { käyttämällä Etsi pikanäppäin -toimintoa:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. Lisää seuraava koodinpätkä vaiheen 2 koodin alapuolelle:

.price__unit {
  @include flex-basis(100%);
  display: none;

  .price--unit-available & {
    display: block;
  }
}
.price-unit-price {
  color: $color-body-text;
  font-size: 0.8em;
}

Muokkausten jälkeen theme.scss.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa JavaScript-teemakoodia

1. klikkaa Sisällöt-hakemistossa theme.js-tiedostoa.

2. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

salePrice: '[data-sale-price]'

1. Lisää seuraava koodinpätkä vaiheen 2 koodin yläpuolelle:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

productOnSale: 'price--on-sale',

1. Lisää seuraava koodinpätkä vaiheen 4 koodin jälkeen:

productUnitAvailable: 'price--unit-available',

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';

1. Korvaa koodi seuraavalla koodinpätkällä:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

var salePrice = '';

1. Lisää seuraava koodinpätkä vaiheen 8 koodin alapuolelle:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

.replace('[$]', salePrice)

1. Lisää seuraava koodinpätkä vaiheen 10 koodin alapuolelle:

.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

_updatePrice: function(evt) {

1. Lisää seuraava koodinpätkä ennen vaiheen 12 koodia:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

var $salePrice = $(this.selectors.salePrice, $priceContainer);

1. Lisää seuraava koodinpätkä vaiheen 14 koodin alapuolelle:

var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
  this.selectors.unitPriceBaseUnit,
  $priceContainer
);

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

.removeClass(this.classes.productOnSale)

1. Lisää seuraava koodinpätkä vaiheen 16 koodin alapuolelle:

.removeClass(this.classes.productUnitAvailable)

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

else {
  // Regular price
  $regularPrice.html(
    theme.Currency.formatMoney(variant.price, theme.moneyFormat)
  );
}

1. Lisää seuraava koodinpätkä vaiheen 18 koodin alapuolelle:

// Unit price
if (variant.unit_price_measurement) {
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $priceContainer.addClass(this.classes.productUnitAvailable);
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa englanninkielisiä käännöksiä

1. klikkaa Kieliversiot-hakemistossa en.default.json-tiedostoa.

2. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

"selection_help": "press the space key then arrow keys to make a selection"

1. Lisää seuraava koodinpätkä vaiheen 2 koodin yläpuolelle:

"unit_price_separator": "per",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

"include_taxes": "Tax included.",

1. Lisää seuraava koodinpätkä vaiheen 4 koodin alapuolelle:

"unit_price_label": "Unit price",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa teeman asettelua

1. klikkaa Asettelu-hakemistossa theme.liquid-tiedostoa.

2. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

regularPrice: {{ 'products.product.regular_price' | t | json }},

1. Lisää seuraava koodinpätkä vaiheen 2 koodin alapuolelle:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Muokkausten jälkeen theme.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

(Valinnainen) Lisää käännöksiä muille kielille

1. Siirry Shopify Adminin Teemat-sivulle.

2. Klikkaa ...-painiketta > Muokkaa oletusteemasisältöä.

3. Valitse Vaihda teeman kieli, ja valitse sitten kieli jota haluat muokata. Tämä on mahdollista vain julkaistussa teemassa.

4. Syötä hakukenttään Unit Price.

5. Päivitä yksikköhinnan erottelu -kenttä kohdassa Yleiset / Esteettömyys.

6. Päivitä Yksikköhinta -kenttä kohdassa Tuotteet / Tuote.

7. Klikkaa Tallenna.

Brooklyn

Brooklyn-teeman toimintavaiheet

Yksikköhinnat ovat saatavilla Brooklyn-teemassa versioille 13.1.0 ja uudemmille. Jos et pysty päivittämään teemaa uusimpaan versioon, voit lisätä yksikköhinnan mukautukset Brooklyn-teeman aiempiin versioihin.

Lisää tuotteen hinnan koodinpätkä

1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

2. Syötä product-price nimikenttään.

3. Kopioi ja liitä tiedostoon seuraava koodi.

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa esittelyssä olevien tuotteiden sivua

1. klikkaa Osiot-hakemistossa featured-product.liquid-tiedostoa.

2. Etsi koodi itemprop="offers" käyttämällä Etsi pikanäppäin -toimintoa:

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. Korvaa koodi seuraavalla koodinpätkällä:

{% include 'product-price', variant: current_variant %}

Muokkausten jälkeen featured-product.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuotesivua

1. klikkaa Osiot-hakemistossa product-template.liquid-tiedostoa.

2. Etsi koodi itemprop="offers" käyttämällä Etsi pikanäppäin -toimintoa:

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. Korvaa koodi seuraavalla koodinpätkällä:

{% include 'product-price', variant: current_variant %}

Muokkausten jälkeen product-template.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa Ajax-ostoskoriasi

1. klikkaa Koodinpätkät-hakemistossa ajax-cart-template.liquid-tiedostoa.

2. Etsi koodi <span class="ajaxcart__price">{{{price}}}</span> käyttämällä Etsi pikanäppäin -toimintoa:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. Lisää seuraava koodi vaiheen 2 {{/if}} alapuolelle:

{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
    <span class="cart__unit-price">
        {% endraw %}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

Muokkausten jälkeen ajax-cart-template.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuoteruudukon kohdetta

1. klikkaa Koodinpätkät-hakemistossa product-grid-template.liquid-tiedostoa.

2. Etsi koodi capture img_id_class käyttämällä Etsi pikanäppäin -toimintoa:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. Lisää seuraava koodinpätkä ennen vaiheen 2 koodia:

{%- assign variant = product.selected_or_first_available_variant -%}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi koodi {{ product.price | money_without_trailing_zeros }} käyttämällä Etsi pikanäppäin -toimintoa:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. Lisää seuraava koodi </span> alle:

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa ostoskorisivua

1. klikkaa Mallit-hakemistossa cart.liquid-tiedostoa.

2. Etsi koodi <span class="cart__price"> käyttämällä Etsi pikanäppäin -toimintoa:

{%- if item.original_line_price != item.final_line_price -%}
  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
  <del class="cart__price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}

Huomaa

Jos sinulla on vanhempi teemaversio, et välttämättä löydä tätä koodinpätkää. Tässä tapauksessa lisää koodi vaiheesta 3 suoraan <span class="cart__price">-elementin alle.

1. Lisää seuraava koodinpätkä vaiheen 2 koodin alapuolelle:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Muokkausten jälkeen cart.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tilaussivua

1. klikkaa Mallit-hakemistossa customers/order.liquid-tiedostoa.

2. Etsi koodi {{ line_item.original_price | money }} käyttämällä Etsi pikanäppäin -toimintoa:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. Lisää seuraava koodinpätkä ennen </td> vaiheessa 2:

{%- if line_item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="product-unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Muokkausten jälkeen customers/order.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Teeman tyylien muokkaaminen - osa 1

1. klikkaa Sisällöt-hakemistossa theme.scss.liquid-tiedostoa.

2. Etsi koodi .ajaxcart__price { käyttämällä Etsi pikanäppäin -toimintoa:

.ajaxcart__price {
    font-size: em(13px);
    display: block;
}

1. Lisää seuraava koodinpätkä vaiheen 2 koodin alapuolelle:

.cart__unit-price {
    display: block;
}

Muokkausten jälkeen theme.scss.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Teeman tyylien muokkaaminen - osa 2

1. klikkaa Sisällöt-hakemistossa timber.scss.liquid-tiedostoa.

2. Etsi koodi .product-single__policies { käyttämällä Etsi pikanäppäin -toimintoa:

.product-single__policies {
  margin: 15px 0 25px 0;
}

1. Lisää seuraava koodinpätkä vaiheen 2 koodin yläpuolelle:

.product-single__unit {
  display: none;

  .price-container--unit-available & {
    display: block;
  }
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Siirry tiedoston loppuun ja lisää seuraava koodi:

.product-unit-price {
  color: $colorTextBody;
  display: block;
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa JavaScript-teemakoodia

1. klikkaa Sisällöt-hakemistossa theme.js.liquid-tiedostoa.

2. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

var prodImg;

1. Lisää seuraava koodinpätkä vaiheen 2 koodin alapuolelle:

var unitPrice = null;

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

// Create item's data object and add to 'items' array

1. Lisää seuraava koodinpätkä vaiheen 2 koodin yläpuolelle:

if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      settings.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

vendor: cartItem.vendor

1. Lisää seuraava koodinpätkä vaiheen 6 koodin yläpuolelle:

unitPrice: unitPrice,

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

productPrice: '#ProductPrice',

1. Lisää seuraava koodinpätkä vaiheen 8 koodin alapuolelle:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi koodi $(this.selectors.priceContainer, this.$container).removeClass( käyttämällä Etsi pikanäppäin -toimintoa:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden'
);

1. Korvaa koodi seuraavalla koodinpätkällä:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden price-container--unit-available'
);

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

$(this.selectors.SKU).html(variant.sku);

1. Lisää seuraava koodinpätkä vaiheen 12 koodin yläpuolelle:

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, moneyFormat)
  );
  $unitPriceBaseUnit.html(this.getBaseUnit(variant));

  $(this.selectors.priceContainer, this.$container).addClass(
    'price-container--unit-available'
  );
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi koodi this.destroyImageCarousel(); käyttämällä Etsi pikanäppäin -toimintoa:

onUnload: function() {
  this.$container.off(this.settings.namespace);
  this.destroyImageCarousel();
}

1. Lisää seuraava koodinpätkä vaiheen 14 koodin yläpuolelle:

getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa englanninkielisiä käännöksiä

1. klikkaa Kieliversiot-hakemistossa en.default.json-tiedostoa.

2. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

"refresh_page": "choosing a selection results in a full page refresh"

1. Lisää seuraava koodinpätkä vaiheen 2 koodin yläpuolelle:

"unit_price_separator": "per",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodin etsimiseen:

"include_taxes": "Tax included.",

1. Lisää seuraava koodinpätkä vaiheen 4 koodin alapuolelle:

"unit_price": "Unit price",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

(Valinnainen) Lisää käännöksiä muille kielille

1. Siirry Shopify Adminin Teemat-sivulle.

2. Klikkaa ...-painiketta > Muokkaa oletusteemasisältöä.

3. Valitse Vaihda teeman kieli, ja valitse sitten kieli jota haluat muokata. Tämä on mahdollista vain julkaistussa teemassa.

4. Syötä hakukenttään Unit Price.

5. Päivitä yksikköhinnan erottelu -kenttä kohdassa Yleiset / Esteettömyys.

6. Päivitä Yksikköhintakenttä kohdassa Tuotteet / Yleiset.

7. Klikkaa Tallenna.

Minimal

Minimal-teeman toimintavaiheet

Yksikköhinnat ovat saatavilla Minimal-teemassa versioille 11.2.0 ja uudemmille. Jos et pysty päivittämään teemaa uusimpaan versioon, voit lisätä yksikköhinnan mukautukset Minimal-teeman aiempiin versioihin.

Päivitä koodinpätkät

1. Etsi ja laajenna Koodinpätkät-kansiota.

2. Valitse Lisää uusi koodinpätkä.

3. Syötä nimi product-unit-price.

4. Kopioi ja liitä seuraava koodi kenttään product-unit-price.liquid.

{%- unless available -%}
  {%- if variant.title -%}
    {%- assign available = variant.available -%}
  {%- else -%}
    {%- assign available = true -%}
  {%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
      {%- endif -%}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Klikkaa Tallenna.

2. Etsi ja muokkaa tiedostoa product-grid-item.liquid.

3. Korvaa tämä rivi:

{% capture price %}{{ featured.price | money }}{% endcapture %}

Tällä rivillä:

{%- assign price = featured.price | money -%}

1. Käytä Etsi pikanäppäin -toimintoa kohteen {{ price }} etsimiseen ja lisää tämä koodi:

{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}

Muokkausten jälkeen product-grid-item.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

2. Etsi ja muokkaa tiedostoa search-result.liquid

3. Käytä Etsi pikanäppäin -toimintoa kohteen {% if item.object_type == 'product' %} etsimiseen ja lisää seuraava koodi alla olevalle riville:

{%- assign variant = item.selected_or_first_available_variant -%}

1. Käytä nyt Etsi pikanäppäin -toimintoa seuraavien kahden koodinpätkän etsimiseen:

<s><small>{{ item.compare_at_price_max | money }}</small></s>

Ja

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
  {{ item.price | money }}
</span>

1. Lisää seuraava lohko jokaisen edellisessä vaiheessa luetellun koodinpätkän alle:

{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant %}
{%- endif -%}

Muokkausten jälkeen search-result.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Päivitä tyylit

1. Etsi ja laajenna Sisällöt-kansiota.

2. Muokkaa tiedostoa theme.scss.liquid.

3. Käytä Etsi pikanäppäin -toimintoa seuraavan koodilohkon etsimiseen:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;

1. Lisää seuraava koodilohko edellisessä vaiheessa löytämäsi koodinpätkän alle:

font-family: $headerFontStack;

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodinpätkän etsimiseen:

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

1. Lisää seuraava koodilohko edellisessä vaiheessa löytämäsi koodinpätkän alle:

.grid-link__unit-price {
  font-size: 1em;
}

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodinpätkän etsimiseen:

.order-discount--list {
  margin: 0.8em 0 0.6em 1.3em;
  list-style: none;
  padding: 0;
}

1. Lisää seuraava koodilohko edellisessä vaiheessa löytämäsi koodinpätkän alle:

.order-discount--price {
  margin-bottom: 0;
}

1. Käytä Etsi pikanäppäin -toimintoa seuraavan koodinpätkän etsimiseen:

.cart__product-title {
  display: inline-block;

1. Lisää seuraava koodilohko edellisessä vaiheessa löytämäsi koodinpätkän alle:

font-weight: $bodyFontWeightBold;

Muokkausten jälkeen theme.scss.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

2. Etsi ja muokkaa tiedostoa timber.scss.liquid.

3. Käytä Etsi pikanäppäin -toimintoa tämän koodin etsimiseen:

.quantity-selector {
    display: inline-block;
  }
}

1. Lisää seuraava koodilohko edellisessä vaiheessa löytämäsi koodinpätkän alle:

.product-single__title {
  font-weight: $bodyFontWeightBold;
}

1. Lisää tämä koodi tiedoston loppuun:

.product-unit-price {
  color: rgba($colorTextBody, 0.6);
  display: block;
  font-family: $headerFontStack;
  font-size: em(12px);
}

Muokkausten jälkeen timber.scss.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Päivitä mallisi

1. Etsi ja laajenna Mallit-kansio.

2. Etsi ja muokkaa tiedostoa customers/order.liquid.

3. Käytä Etsi pikanäppäin -toimintoa tämän koodin etsimiseen:

{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Lisää tämä koodi vaiheen 3 koodin alapuolelle:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Muokkausten jälkeen customers/order.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Päivitä JavaScript

1. Etsi ja muokkaa theme.js Sisällöt-osiossa.

2. Etsi rivi, joka sisältää .shopify-payment-button käyttämällä Etsi pikanäppäin -toimintoa ja korjaa se:

$shopifyPaymentButton: $('.shopify-payment-button', this.$container),
$unitPrice: $('[data-unit-price]', this.$container),
$unitPriceBaseUnit: $('[data-unit-price-base-unit]', this.$container),
$unitPriceContainer: $('[data-unit-price-container]', this.$container)

Tämän koodilohkon pitäisi näyttää tältä:

1. Etsi tämä koodi:

else {
  this.selectors.$comparePrice.addClass('hide').html('');
  this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}

1. Lisää tämä koodi sen alle:

// Unit price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
  this.selectors.$unitPrice.html(
      Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
  this.selectors.$unitPriceContainer.removeClass('hide');
}

Tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa tämän koodin etsimiseen:

.attr('data-zoom')
  });
});

1. Lisää seuraava koodilohko edellisessä vaiheessa löytämäsi koodinpätkän alle:

},
getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

Tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Päivitä ostoskorin malli

1. Etsi ja laajenna Osiot-kansio.

2. Muokkaa tiedostoa cart-template.liquid.

3. Etsi koodi <span class="order-discount h5">{{ item.final_price | money }}</span> käyttämällä Etsi pikanäppäin -toimintoa.

4. Korvaa rivi tällä koodilla:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>

1. Etsi koodin {%- if item.line_level_discount_allocations != blank -%} ensimmäinen esiintymä:

{%- if item.line_level_discount_allocations != blank -%}
  <ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
    {%- for discount_allocation in item.line_level_discount_allocations -%}
      <li class="order-discount__item">
        <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
      </li>
    {%- endfor -%}
  </ul>
{%- endif -%}

1. Lisää tämä koodilohko vaiheen 5 koodin yläpuolelle:

{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}

Muokkausten jälkeen cart-template.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Päivitä esittelyssä olevat tuotteet

1. Etsi ja laajenna Osiot-kansio.

2. Muokkaa tiedostoa featured-product.liquid.

3. Etsi rivi, joka sisältää itemprop="name" käyttämällä Etsi pikanäppäin-toimintoa ja korjaa se seuraavasti:

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>

1. Etsi koodi, joka sisältää id="PriceA11y":

{% if compare_at_price > price %}
  <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <s id="ComparePrice" class="product-single__sale-price">
    { compare_at_price | money }}
  </s>
{% endif %}

1. Lisää seuraava koodilohko edellisessä vaiheessa löytämäsi koodinpätkän alle:

{% include 'product-unit-price', variant: variant, available: true %}

Muokkausten jälkeen featured-product.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Päivitä tuotemalli

1. Etsi ja laajenna Osiot-kansio.

2. Muokkaa tiedostoa product-template.liquid.

3. Etsi rivi, joka sisältää itemprop="name" käyttämällä Etsi pikanäppäin -toimintoa ja korjaa se seuraavasti:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

1. Käytä Etsi pikanäppäin -toimintoa tämän koodin etsimiseen:

{% else %}
  <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
    <s id="ComparePrice" class="product-single__sale-price hide">
      {{ product.compare_at_price_max | money }}
    </s>
{% endif %}

1. Lisää tämä rivi alapuolelle:

{% include 'product-unit-price', variant: variant, available: true %}

Muokkausten jälkeen product-template.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Päivitä kieliversiot

1. Etsi ja laajenna Kieliversiot-kansio.

2. Avaa ja muokkaa en.default.json-tiedostoa.

3. Etsi rivi, joka sisältää refresh_page käyttämällä Etsi pikanäppäin -toimintoa ja korjaa se:

"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"

Tuloksen pitäisi näyttää tältä:

1. Etsi rivi, joka sisältää full_details, ja korvaa se tällä:

"full_details": "Full details",
"unit_price_label": "Unit price"

Tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

(Valinnainen) Lisää käännöksiä muille kielille

1. Siirry Shopify Adminin Teemat-sivulle.

2. Klikkaa ...-painiketta > Muokkaa oletusteemasisältöä.

3. Valitse Vaihda teeman kieli, ja valitse sitten kieli jota haluat muokata. Tämä on mahdollista vain julkaistussa teemassa.

4. Syötä hakukenttään Unit Price.

5. Päivitä yksikköhinnan erottelu -kenttä kohdassa Yleiset / Esteettömyys.

6. Päivitä Yksikköhinta -kenttä kohdassa Tuotteet / Tuote.

7. Klikkaa Tallenna.

Venture

Venture-teeman toimintavaiheet

Yksikköhinnat lisättiin Venture-teeman 9.4.0 versioon ja sitä uudempiin. Jos et voi päivittää teemaasi uusimpaan versioon, noudata näitä ohjeita, jos haluat soveltaa yksikköhinnan mukauttamista Venture-teeman aiempiin versioihin.

Muokkaa teemasi kielitiedostoa

1. klikkaa Kieliversiot -hakemistossa en.default.json.

2. Etsi rivi, joka sisältää refresh_page käyttämällä Etsi pikanäppäin -toimintoa:

"refresh_page": "choosing a selection results in a full page refresh"

1. Lisää seuraava koodi vaiheessa 2 löytyneen rivin yläpuolelle:

"unit_price_separator": "per",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi rivi, joka sisältää stock_unavailable käyttämällä Etsi pikanäppäin -toimintoa:

"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."

1. Lisää seuraava koodi vaiheessa 4 löytyneen rivin yläpuolelle:

"unit_price_label": "Unit price",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Teeman tyylisivun muokkaaminen

1. Klikkaa Assets-hakemistossa theme.scss.liquid.

2. Käytä Etsi pikanäppäin -toimintoa rivin .product-single__policies { etsimiseen:

.product-single__policies {
    font-size: em($font-size-base - 1);
  }

1. Lisää seuraava koodi vaiheessa 2 löytyneen koodilohkon viimeisen }-tunnisteen alapuolelle:

.product-unit-price {
    font-size: em(12);
    color: $color-body-text;
  }

  .product-card__unit-price {
    display: block;
  }

Muokkausten jälkeen theme.scss.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Lisää tuoteyksikön hintakatkelma

1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

2. Syötä nimi product-unit-price.

3. Lisää seuraava koodi kohtaan product-unit-price.liquid:

<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
        {{- product_variant.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ product_variant.unit_price_measurement.reference_unit }}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ product_variant.unit_price | money }}</span>
  {{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Vahvista muutokset klikkaamalla Tallenna.

Tuotekortin koodinpätkän muokkaus

1. klikkaa Koodinpätkät-hakemistossa product-card.liquid.

2. Käytä Etsi pikanäppäin -toimintoa tämän rivin etsimiseen <a href="{{ product.url | within: collection }}".

3. Lisää seuraava koodi vaiheessa 2 löytyneen rivin yläpuolelle:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa rivin <div class="product-card__price"> etsimiseen:

<div class="product-card__price">
  {% if product.compare_at_price > product.price %}
    {% comment %}
      Product is on sale
    {% endcomment %}
    {% if product.price_varies %}
      {% assign sale_price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% else %}
    {% comment %}
      Not on sale, but could still have varying prices
    {% endcomment %}
    {% if product.price_varies %}
      {% assign price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.from_text_html' | t: price: price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% endif %}
</div>

1. Lisää seuraava koodi vaiheen 5 viimeisen </div> yläpuolelle:

{%- unless product.price_varies -%}
  {%- if current_variant.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
  {%- endif -%}
{%- endunless -%}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Ostoskorisivusi mallin muokkaaminen

1. klikkaa Sections-hakemistossa cart-template.liquid.

2. Käytä Etsi pikanäppäin -toimintoa <td class="cart__cell--total">-koodin ensimmäisen esiintymän etsimiseen:

<td class="cart__cell--total">
  {%- if item.original_line_price != item.final_line_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
  {%- endif -%}

1. Lisää seuraava koodi vaiheessa 2 olevan endif-tunnisteen alapuolelle:

{%- if item.unit_price_measurement -%}
  {% include 'product-unit-price', product_variant: item %}
{%- endif -%}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa <td class="cart__cell--total">-koodin toisen esiintymän etsimiseen:

<td class="cart__cell--total">
  {{#if discountsApplied}}
      <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
    <del class="cart__item-total">{{{originalLinePrice}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
    <span class="cart__item-total">{{{linePrice}}}</span>
  {{else}}
    <span class="cart__item-total">{{{originalLinePrice}}}</span>
  {{/if}}
  {{#if discountsApplied}}
    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
      {{#each discounts}}
        <li class="order-discount__item">
          {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
        </li>
      {{/each}}
    </ul>
  {{/if}}

1. Lisää seuraava koodi vaiheen 10 viimeisen vaiheessa 4 löytyneen {{/if}} -tunnisteen alapuolelle:

{{#if unitPrice}}
  <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
  <span class="product-unit-price">
    {% endraw %}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
    {% raw %}
    <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
  </span>
{{/if}}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Esittelyssä olevan tuotesivumallin muokkaaminen

1. klikkaa Sections-hakemistossa featured-product.liquid.

2. Käytä Etsi pikanäppäin -toimintoa tämän rivin etsimiseen {% assign current_variant = product.selected_or_first_available_variant %}.

3. Lisää seuraava koodi vaiheessa 2 löytyneen rivin alapuolelle:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi rivi, joka sisältää <ul class="product-single__meta-list käyttämällä Etsi pikanäppäin -toimintoa:

<ul class="product-single__meta-list list--no-bullets list--inline">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
  <div class="product-tag">
    {{ 'products.product.on_sale' | t }}
  </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Etsi tämän ul -tunnisteen alapuolelta koodi {% if section.settings.stock_enable %}.

2. Lisää seuraava koodi vaiheessa 6 löytyneen if-lohkon yläpuolelle:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuotesivun mallia

1. klikkaa Sections-hakemistossa product-template.liquid.

2. Käytä Etsi pikanäppäin -toimintoa tämän rivin etsimiseen {% assign current_variant = product.selected_or_first_available_variant %}.

3. Lisää seuraava koodi vaiheessa 2 löytyneen rivin alapuolelle:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi rivi, joka sisältää <ul class="product-single__meta-list käyttämällä Etsi pikanäppäin -toimintoa:

<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
    <div class="product-tag">
      {{ 'products.product.on_sale' | t }}
    </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Etsi tämän ul -tunnisteen alapuolelta koodi {% if section.settings.stock_enable %}.

2. Lisää seuraava koodi vaiheessa 5 löytyneen if-lohkon yläpuolelle:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Asiakkaiden tilausmallin muokkaaminen

1. klikkaa Templates-hakemistossa customers/order.liquid.

2. Käytä Etsi pikanäppäin -toimintoa tämän rivin etsimiseen <td class="text-right" data-label="{{ 'customer.order.price' | t }}">:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. Korvaa vaiheessa 2 löytynyt koodi seuraavalla koodilla:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  <div>
    {%- if line_item.original_price != line_item.final_price -%}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
      {{ line_item.original_price | money }}
    {%- endif -%}
  </div>
  {%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: line_item %}
  {%- endif -%}
</td>

Muokkausten jälkeen customers/order.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa teeman JavaScript-tiedostoa

1. Klikkaa Assets-hakemistossa theme.js.

2. Käytä Etsi pikanäppäin -toimintoa rivin // Create item's data object and add to 'items' array etsimiseen.

3. Lisää seuraava koodi vaiheessa 2 löytyneen rivin yläpuolelle:

var unitPrice = null;
if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      theme.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa tämän rivin etsimiseen vendor: cartItem.vendor,

2. Lisää seuraava koodi vaiheessa 4 löytyneen rivin alapuolelle:

unitPrice: unitPrice,

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa rivin shopifyPaymentButton: '.shopify-payment-button' etsimiseen.

2. Korvaa vaiheessa 6 löytynyt rivi seuraavalla koodilla:

shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa rivin _updateSKU: function(evt) { etsimiseen.

2. Lisää seuraava koodi vaiheessa 8 löytyneen rivin yläpuolelle:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
      variant.unit_price_measurement.reference_unit;
},

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa rivin this._updateIncomingInfo(variant); etsimiseen:

} else {
  // Variant is sold out, disable the submit button
  cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
  cache.$addToCartText.html(theme.strings.soldOut);
  $(this.selectors.shopifyPaymentButton, this.$container).hide();
  // Update when stock will be available
  this._updateIncomingInfo(variant);
}

1. Lisää seuraava koodi vaiheen 10 viimeisen }-tunnisteen alapuolelle:

$(this.selectors.unitPriceContainer, this.$container).addClass('hide');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));

  $(this.selectors.unitPriceContainer, this.$container).removeClass(
    'hide'
  );
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

(Valinnainen) Lisää käännöksiä muille kielille

1. Siirry Shopify Adminin Teemat-sivulle.

2. Klikkaa ...-painiketta > Muokkaa oletusteemasisältöä.

3. Valitse Vaihda teeman kieli, ja valitse sitten kieli jota haluat muokata. Tämä on mahdollista vain julkaistussa teemassa.

4. Syötä hakukenttään Unit Price.

5. Päivitä yksikköhinnan erottelu -kenttä kohdassa Yleiset / Esteettömyys.

6. Päivitä Yksikköhinta -kenttä kohdassa Tuotteet / Tuote.

7. Klikkaa Tallenna.

Supply

Supply-teeman toimintavaiheet

Yksikköhinnat lisättiin Supply-teeman 8.3.0 versioon ja sitä uudempiin. Jos et voi päivittää teemaasi uusimpaan versioon, noudata näitä ohjeita, jos haluat soveltaa yksikköhinnan mukauttamista Supply-teeman aiempiin versioihin.

Lisää tuoteyksikön hintakatkelma

1. Etsi ja laajenna Koodinpätkät-kansiota.

2. Valitse Lisää uusi koodinpätkä.

3. Syötä nimi product-unit-price.

4. Kopioi ja liitä tiedostoon seuraava koodi ja valitse Tallenna.

{%- unless available -%}
{%- if variant.title -%}
    {%- assign available = variant.available -%}
{%- else -%}
    {%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
{%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
    <span>
    {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>

Muokkausten jälkeen product-unit-price.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa esittelyssä olevien tuotteiden mallia

1. Etsi ja laajenna Kieliversiot -kansio ja valitse sitten featured-product.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin {% include 'price' with price %} etsimiseen tiedostossa:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with price %}
  </span>
</li>

1. Lisää seuraava koodi vaiheen 2 viimeisen koodinpätkän sulkevan </span>-kohdan alle:

{% include 'product-unit-price' variant: variant %}

Muokkausten jälkeen featured-product.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuotemallia

1. Etsi ja laajenna Kieliversiot -kansio ja valitse sitten product-template.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin {% include 'price' with variant.price %} etsimiseen tiedostossa:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with variant.price %}
  </span>
</li>

1. Lisää seuraava koodi vaiheen 2 viimeisen </span> alapuolelle:

{% include 'product-unit-price', variant: variant %}

Muokkausten jälkeen product-template.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuoteruudukon kohteiden koodinpätkää

1. Etsi ja laajenna Koodinpätkät-kansio ja valitse sitten product-grid-item.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin {% if on_sale and section.settings.product_show_saved_amount %} etsimiseen tiedostossa:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Korvaa koodi seuraavalla koodinpätkällä:

{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
  </div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
    {% assign compare_price = product.compare_at_price %}
    {% assign product_price = product.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

Muokkausten jälkeen product-grid-item.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tuoteluettelon kohteiden koodinpätkää

1. Etsi ja laajenna Koodinpätkät-kansio ja valitse sitten product-list-item.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin <div class="product-item--price text-center"> etsimiseen tiedostossa:

<div class="product-item--price text-center">
  <p class="h1 medium-down--left">
    {% if on_sale %}
      <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
    {% else %}
      <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
    {% endif %}
    {% include 'price' with product.price %}
    {% if on_sale and section.settings.product_show_compare_at_price %}
      <small>
        <s>
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
          {% include 'price' with product.compare_at_price %}
        </s>
      </small>
    {% endif %}
  </p>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>

1. Korvaa koodi seuraavalla koodinpätkällä:

<div class="text-center">
  <div class="product-item--price">
    <p class="h1 medium-down--left">
      {% if on_sale %}
        <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
      {% else %}
        <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
      {% endif %}
      {% include 'price' with product.price %}
      {% if on_sale and section.settings.product_show_compare_at_price %}
        <small>
          <s>
            <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
            {% include 'price' with product.compare_at_price %}
          </s>
        </small>
      {% endif %}
    </p>
    {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {%- endif -%}
  </div>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </div>

Muokkausten jälkeen product-list-item.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa hakutulosruudukon koodinpätkää

1. Etsi ja laajenna Koodinpätkät-kansio ja valitse sitten search-result-grid.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin {% if on_sale and section.settings.product_show_saved_amount %} etsimiseen tiedostossa:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium--right">
      {% assign compare_price = item.compare_at_price %}
      {% assign product_price = item.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Korvaa koodi seuraavalla koodinpätkällä:

{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: item.first_available_variant %}
  {%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag medium--right">
    {% assign compare_price = item.compare_at_price %}
    {% assign product_price = item.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

Muokkausten jälkeen search-result-grid.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa ostoskorin mallia

1. Etsi ja laajenna Mallit-kansio ja valitse sitten cart.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin <del class="cart-original-price order-discount--cart-price"> etsimiseen tiedostossa:

<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}

1. Korvaa koodi seuraavalla koodinpätkällä:

<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}

Muokkausten jälkeen cart.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa tilausmallia

1. Etsi ja laajenna Mallit-kansio ja valitse sitten customers/order.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin <td class="text-right" data-label="customer.order.price"> etsimiseen tiedostossa:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <del>{{ line_item.original_price | money }}</del>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. Lisää seuraava koodi vaiheen 2 viimeisen </td> yläpuolelle:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Muokkausten jälkeen customers/order.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa teeman asettelua

1. Etsi ja laajenna Asettelu-kansio ja valitse sitten theme.liquid-tiedosto.

2. Etsi rivi, joka sisältää only_left: käyttämällä tiedostossa Etsi pikanäppäin -toimintoa:

product:{
  unavailable: {{ 'products.product.unavailable' | t | json }},
  will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
  only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
},

1. Lisää seuraava koodi vaiheen 2 only_left:{{ 'products.product.only_left' | t: count: '1' | json }} yläpuolelle:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Muokkausten jälkeen theme.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Teeman tyylien muokkaaminen

1. Etsi ja laajenna Kieliversiot -kansio ja valitse sitten theme.scss.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin .product-item--price { etsimiseen tiedostossa:

.product-item--price {
  @include clearfix;
  .h1 {
    margin-bottom: $gutter/2;
  }
  span {
    line-height: 22px;
  }
  small {
    white-space: nowrap;
  }
}

1. Korvaa koodi seuraavalla koodinpätkällä:

.product-item--price {
  @include clearfix;
  margin-bottom: $gutter/2;

  .h1 {
    margin-bottom: 0;
  }

  span {
    line-height: 22px;
  }

  small {
    white-space: nowrap;
  }
}

.product-price-unit {
  display: none;
  font-size: em(12px);
  margin-right: 10px;

  .cart-pricing &,
  .order-table & {
    margin-right: 0;
  }

  &.product-price-unit--available {
    display: block;
  }
}

Muokkausten jälkeen theme.scss.liquid-tiedoston pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa JavaScript-teemakoodia

1. Etsi ja laajenna Sisällöt-kansio ja valitse sitten theme.js.liquid-tiedosto.

2. Käytä Etsi pikanäppäin -toimintoa rivin originalSelectorId: 'productSelect-' + sectionId, etsimiseen tiedostossa:

selectors: {
  originalSelectorId: 'productSelect-' + sectionId,
  $addToCart: $('#addToCart-' + sectionId),
  $SKU: $('.variant-sku', this.$container),
  $productPrice: $('#productPrice-' + sectionId),
  $comparePrice: $('#comparePrice-' + sectionId),
  $addToCartText: $('#addToCartText-' + sectionId),
  $quantityElements: $('#quantity-selector-' + sectionId),
  $variantQuantity: $('#variantQuantity-' + sectionId),
  $variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
  $variantIncoming: $('#variantIncoming-' + sectionId),
  $variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
  $productImageContainer: $('#productPhotoContainer-' + sectionId),
  $productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
  $productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
  $productFullDetails: $('.full-details', this.$container),
  $thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
  $shopifyPaymentButton: '.shopify-payment-button'
}

1. Lisää seuraava koodi vaiheen 2 originalSelectorId: 'productSelect-' + sectionId,alapuolelle:

unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa rivin productVariantCallback: function(variant) { etsimiseen tiedostossa:

productVariantCallback: function(variant) {
  var self = this;
  if (variant) {
    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image;
      var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
      var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');

      $newImage.removeClass('hide');
      $otherImages.addClass('hide');
    }

1. Lisää seuraava koodi vaiheen 2 if (variant) { alapuolelle:

// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);

$unitPriceContainer.removeClass('product-price-unit--available');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);

  $unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
  $unitPriceBaseUnit.text(this.getBaseUnit(variant));
  $unitPriceContainer.addClass('product-price-unit--available');
}

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa rivin customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; etsimiseen tiedostossa:

customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';

1. Korvaa rivi customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; seuraavalla koodinpätkällä:

customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Käytä Etsi pikanäppäin -toimintoa rivin $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); etsimiseen tiedostossa:

} else {
  // The variant doesn't exist, disable submit button.
  // This may be an error or notice that a specific variant is not available.
  this.settings.selectors.$addToCart.addClass('disabled').prop('disabled', true);
  this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);
  this.settings.selectors.$variantQuantity.removeClass('is-visible');
  this.settings.selectors.$quantityElements.hide();
  $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
}

1. Lisää seuraava koodi vaiheen 11 koodinpätkän alapuolelle:

},

getBaseUnit: function (variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

Muokkaa teemasi kielitiedostoa

1. Etsi ja laajenna Kieliversiot-kansio ja valitse sitten en.default.json-tiedosto.

2. Etsi rivi, joka sisältää "refresh_page" käyttämällä tiedostossa Etsi pikanäppäin -toimintoa:

"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},

1. Lisää seuraava koodi vaiheen 2 "refresh_page"alapuolelle:

"unit_price_separator": "per",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Etsi rivi, joka sisältää "will_be_in_stock_after" käyttämällä tiedostossa Etsi pikanäppäin -toimintoa:

"product": {
  "sold_out": "Sold Out",
  "will_not_ship_until": "Will not ship until ",
  "quantity": "Quantity",
  "add_to_cart": "Add to Cart",
  "unavailable": "Unavailable",
  "will_be_in_stock_after": "Will be in stock after ",
  "only_left": {
    "one": "Only  left!",
    "other": "Only  left!"
  },
  "full_details": "Full details"
}

1. Lisää seuraava koodi vaiheen 5 "will_be_in_stock_after" jälkeen:

"unit_price_label": "Unit price",

Muokkausten jälkeen tuloksen pitäisi näyttää tältä:

1. Vahvista muutokset klikkaamalla Tallenna.

(Valinnainen) Lisää käännöksiä muille kielille

1. Siirry Shopify Adminin Teemat-sivulle.

2. Klikkaa ...-painiketta > Muokkaa oletusteemasisältöä.

3. Valitse Vaihda teeman kieli, ja valitse sitten kieli jota haluat muokata. Tämä on mahdollista vain julkaistussa teemassa.

4. Hae syöttöpalkista Unit Price.

5. Päivitä yksikköhinnan erottelu -kenttä kohdassa Yleiset / Esteettömyys.

6. Päivitä Yksikköhinta -kenttä kohdassa Tuotteet / Tuote.

7. Klikkaa Tallenna.

Yksikköhintojen näyttäminen tilausilmoituksissa

Yksikköhinnat näkyvät tilausvahvistusilmoituksessa oletusarvoisesti, kun ominaisuus on käytössä.

Jos olet lisännyt tuotteeseesi yksikköhintoja, mutta yksikköhintasi eivät näy tilausvahvistusilmoituksissa, sinun on ehkä päivitettävä mallisi manuaalisesti.

Ohjeet:

1. Siirry Shopify Administasi kohtaan Asetukset >Ilmoitukset.

2. Klikkaa Tilaukset-osiossa valintaa Tilausvahvistus.

3. Napsauta Muokkaa koodia.

4. Lisää seuraava koodinpätkä "order-list__item-price"-luokan malliin:

{%- if line_item.unit_price_measurement -%}
  <div class="order-list__unit-price">
     {{ line_item.unit_price | money }}/
     {%- if line_item.unit_price_measurement.reference_value != 1 -%}
       {{- line_item.unit_price_measurement.reference_value -}}
     {%- endif -%}
     {{ line_item.unit_price_measurement.reference_unit }}
  </div>
{%- endif -%}

 5. Napsauta Tallenna.

Vinkki

Tee testitilaus kaupassasi varmistaaksesi, näkyykö yksikköhinta tilausilmoituksessa.