Wyświetlanie cen jednostkowych
Jeśli sprzedajesz produkty według ilości lub wymiarów, dla niektórych produktów konieczne może być wyświetlenie ceny jednostkowej. Po wprowadzeniu ceny jednostkowej produktu cena jednostkowa jest wyświetlana na stronach produktów, stronach kolekcji, stronie koszyka, stronach realizacji zakupu i powiadomieniach o potwierdzeniu zamówienia.
Na tej stronie
Dodaj ceny jednostkowe do swojego produktu
Z panelu administracyjnego Shopify przejdź do opcji Produkty.
Kliknij nazwę produktu, który chcesz zmienić.
Kliknij wariant, który chcesz zaktualizować.
W obszarze Ceny wybierz opcję Pokaż cenę jednostkową dla tego produktu.
W polu Całkowite wymiary produktu wprowadź liczbę jednostek produktu.
Użyj rozwijanego menu Wybierz jednostkę, aby wybrać jednostkę miary wariantu. Typ wyświetlanej jednostki różni się w zależności od typu sprzedawanego produktu. Na przykład, jeśli produkt to 2 litry mydła, wybierz litry.
W polu Cena jednostkowa wprowadź cenę produktu na jednostkę.
Opcjonalnie: Wprowadź liczbę dla jednostki podstawowej. Na przykład, dla produktu ważącego 1 kg, możesz wybrać jednostkę podstawową 100 g.
Kliknij opcję Zapisz.
Z aplikacji Shopify przejdź do Produkty > Wszystkie produkty.
Na ekranie Wszystkie produkty naciśnij produkt.
Naciśnij wariant, który chcesz zaktualizować.
W obszarze Ceny wybierz opcję Pokaż cenę jednostkową dla tego produktu.
W polu Całkowite wymiary produktu wprowadź liczbę jednostek produktu.
Użyj rozwijanego menu Wybierz jednostkę, aby wybrać jednostkę miary wariantu. Typ wyświetlanej jednostki różni się w zależności od typu sprzedawanego produktu. Na przykład, jeśli produkt to 2 litry mydła, wybierz litry.
W polu Cena jednostkowa wprowadź cenę produktu na jednostkę.
Opcjonalnie: Wybierz jednostkę podstawową. Na przykład, dla produktu ważącego 1 kg, możesz wybrać jednostkę podstawową 100 g.
Naciśnij Zapisz.
Z aplikacji Shopify przejdź do Produkty > Wszystkie produkty.
Na ekranie Wszystkie produkty naciśnij produkt.
Naciśnij wariant, który chcesz zaktualizować.
W obszarze Ceny wybierz opcję Pokaż cenę jednostkową dla tego produktu.
W polu Całkowite wymiary produktu wprowadź liczbę jednostek produktu.
Użyj rozwijanego menu Wybierz jednostkę, aby wybrać jednostkę miary wariantu. Typ wyświetlanej jednostki różni się w zależności od typu sprzedawanego produktu. Na przykład, jeśli produkt to 2 litry mydła, wybierz litry.
W polu Cena jednostkowa wprowadź cenę produktu na jednostkę.
Opcjonalnie: Wybierz jednostkę podstawową. Na przykład, dla produktu ważącego 1 kg, możesz wybrać jednostkę podstawową 100 g.
Naciśnij Zapisz.
Pokaż ceny jednostkowe w Twoim sklepie online
Kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu, zanim wykonasz poniższe instrukcje:
Kroki dla szablonu Debut
Ceny jednostkowe są dostępne w szablonie Debut dla wersji 12.1.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, możesz dodać dostosowanie ceny jednostkowej do poprzednich wersji szablonu Debut.
Edytuj fragment kodu ceny produktu
W katalogu Fragmenty kodu kliknij plik
product-price.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
data-price
:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>
- Zamień kod na następujący fragment kodu:
<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>
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
price__sale
:
<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>
- Dodaj następujący kod pod tagiem zamykającym
</div>
:
{% 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 }} </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 %}
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj stronę koszyka
W katalogu Sekcje kliknij plik
cart-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
cart__price-wrapper
:
{%- 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 -%}
- Zamień kod na następujący fragment kodu:
<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 }} </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>
Po wprowadzeniu zmian plik cart-template.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj stronę kolekcji
W katalogu Sekcje kliknij plik
collection.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
grid-view-item__title
:
{% include 'product-price' %}
- Zamień kod na następujący fragment kodu:
{% include 'product-price', variant: nil %}
Po wprowadzeniu zmian plik collection.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj siatkę karty produktu
W katalogu Fragmenty kodu kliknij plik
product-card-grid.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
grid-view-item__title
:
{% include 'product-price', variant: product %}
- Zamień kod na następujący fragment kodu:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Po wprowadzeniu zmian plik product-card-grid.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj listę kart produktów
W katalogu Fragmenty kodu kliknij plik
product-card-list.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
{% if product.available %}
:
{% include 'product-price', variant: product %}
- Zamień kod na następujący fragment kodu:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Po wprowadzeniu zmian plik product-card-list.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj stronę zamówienia
W katalogu Szablony kliknij plik
customers/order.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
data-label="{{ 'customer.order.price' | t }}"
:
{%- 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 -%}
- Zamień kod na następujący fragment kodu:
<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 }} </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>
Po wprowadzeniu zmian plik customers/order.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj style szablonów
W katalogu Zasoby kliknij plik
theme.scss.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
.price__vendor {
:
.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%);
}
- Dodaj następujący fragment kodu pod kodem z kroku 2:
.price__unit {
@include flex-basis(100%);
display: none;
.price--unit-available & {
display: block;
}
}
.price-unit-price {
color: $color-body-text;
font-size: 0.8em;
}
Po wprowadzeniu zmian plik theme.scss.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj kod szablonu JavaScript
W katalogu Zasoby kliknij plik
theme.js
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
salePrice: '[data-sale-price]'
- Dodaj następujący fragment kodu do kodu z kroku 2:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
productOnSale: 'price--on-sale',
- Dodaj następujący fragment kodu po kodzie z kroku 4:
productUnitAvailable: 'price--unit-available',
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';
- Zamień kod na następujący fragment kodu:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
var salePrice = '';
- Dodaj następujący fragment kodu pod kodem z kroku 8:
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);
}
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
.replace('[$]', salePrice)
- Dodaj następujący fragment kodu pod kodem z kroku 10:
.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
_updatePrice: function(evt) {
- Dodaj następujący fragment kodu przed kodem z kroku 12:
_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;
},
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
var $salePrice = $(this.selectors.salePrice, $priceContainer);
- Dodaj następujący fragment kodu pod kodem z kroku 14:
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
.removeClass(this.classes.productOnSale)
- Dodaj następujący fragment kodu pod kodem z kroku 16:
.removeClass(this.classes.productUnitAvailable)
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
else {
// Regular price
$regularPrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
}
- Dodaj następujący fragment kodu pod kodem z kroku 18:
// 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);
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj swoje angielskie tłumaczenia
W katalogu Ustawienia regionalne kliknij plik
en.default.json
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
"selection_help": "press the space key then arrow keys to make a selection"
- Dodaj następujący fragment kodu do kodu z kroku 2:
"unit_price_separator": "per",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
"include_taxes": "Tax included.",
- Dodaj następujący fragment kodu pod kodem z kroku 4:
"unit_price_label": "Unit price",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj układ szablonu
W katalogu Układ kliknij plik
theme.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
regularPrice: {{ 'products.product.regular_price' | t | json }},
- Dodaj następujący fragment kodu pod kodem z kroku 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Po wprowadzeniu zmian plik theme.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
(Opcjonalnie) Dodaj tłumaczenia dla innych języków
Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.
Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.
Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.
Wpisz
Unit Price
w polu wyszukiwania.Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.
Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.
Kliknij opcję Zapisz.
Kroki dla szablonu Brooklyn
Ceny jednostkowe są dostępne w szablonie Brooklyn dla wersji 13.1.0 i wyższych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, możesz dodać dostosowanie cen jednostkowych do poprzednich wersji szablonu Brooklyn.
Dodaj fragment kodu ceny produktu
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.
Wprowadź
product-price
w polu Nazwa.Skopiuj i wklej następujący kod do pliku.
<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"> {{ 'general.accessibility.unit_price_separator' | t }} </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>
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj stronę polecanego produktu
W katalogu Sekcje kliknij plik
featured-product.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
itemprop="offers"
:
<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>
- Zamień kod na następujący fragment kodu:
{% include 'product-price', variant: current_variant %}
Po wprowadzeniu zmian plik featured-product.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj stronę produktu
W katalogu Sekcje kliknij plik
product-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
itemprop="offers"
:
<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>
- Zamień kod na następujący fragment kodu:
{% include 'product-price', variant: current_variant %}
Po wprowadzeniu zmian plik product-template.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj swój koszyk ajax
W katalogu Fragmenty kodu kliknij plik
ajax-cart-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
<span class="ajaxcart__price">{{{price}}}</span>
:
{{#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}}
- Dodaj następujący kod w obszarze
{{/if}}
z kroku 2:
{{#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"> {{'general.accessibility.unit_price_separator' | t}} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Po wprowadzeniu zmian plik ajax-cart-template.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj pozycję siatki produktu
W katalogu Fragmenty kodu kliknij plik
product-grid-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
capture img_id_class
:
{% 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.' -%}
- Dodaj następujący fragment kodu przed kodem z kroku 2:
{%- assign variant = product.selected_or_first_available_variant -%}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
{{ product.price | money_without_trailing_zeros }}
:
<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>
- Dodaj następujący kod w
</span>
:
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- 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>
{%- 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 -%}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj stronę koszyka
W katalogu Szablony kliknij plik
cart.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
<span class="cart__price">
:
{%- 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 -%}
- Dodaj następujący fragment kodu pod kodem z kroku 2:
{%- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 -%}
Po wprowadzeniu zmian plik cart.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj stronę zamówienia
W katalogu Szablony kliknij plik
customers/order.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
{{ line_item.original_price | money }}
:
<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>
- Dodaj następujący fragment kodu przed
</td>
z kroku 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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 -%}
Po wprowadzeniu zmian plik customers/order.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj style szablonu - część 1
W katalogu Zasoby kliknij plik
theme.scss.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
.ajaxcart__price {
:
.ajaxcart__price {
font-size: em(13px);
display: block;
}
- Dodaj następujący fragment kodu pod kodem z kroku 2:
.cart__unit-price {
display: block;
}
Po wprowadzeniu zmian plik theme.scss.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj style szablonu - część 2
W katalogu Zasoby kliknij plik
timber.scss.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
.product-single__policies {
:
.product-single__policies {
margin: 15px 0 25px 0;
}
- Dodaj następujący fragment kodu do kodu z kroku 2:
.product-single__unit {
display: none;
.price-container--unit-available & {
display: block;
}
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Przejdź na sam koniec pliku i dodaj następujący kod:
.product-unit-price {
color: $colorTextBody;
display: block;
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj kod szablonu JavaScript
W katalogu Zasoby kliknij plik
theme.js.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
var prodImg;
- Dodaj następujący fragment kodu pod kodem z kroku 2:
var unitPrice = null;
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
// Create item's data object and add to 'items' array
- Dodaj następujący fragment nad kodem z kroku 4:
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
};
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
vendor: cartItem.vendor
- Dodaj następujący fragment nad kodem z kroku 6:
unitPrice: unitPrice,
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
productPrice: '#ProductPrice',
- Dodaj następujący fragment kodu pod kodem z kroku 8:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
$(this.selectors.priceContainer, this.$container).removeClass(
:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden'
);
- Zamień kod na następujący fragment kodu:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden price-container--unit-available'
);
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
$(this.selectors.SKU).html(variant.sku);
- Dodaj następujący fragment nad kodem z kroku 12:
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'
);
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując
this.destroyImageCarousel();
:
onUnload: function() {
this.$container.off(this.settings.namespace);
this.destroyImageCarousel();
}
- Dodaj następujący fragment nad kodem z kroku 14:
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;
},
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj swoje angielskie tłumaczenia
W katalogu Ustawienia regionalne kliknij plik
en.default.json
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
"refresh_page": "choosing a selection results in a full page refresh"
- Dodaj następujący fragment kodu do kodu z kroku 2:
"unit_price_separator": "per",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:
"include_taxes": "Tax included.",
- Dodaj następujący fragment kodu pod kodem z kroku 4:
"unit_price": "Unit price",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
(Opcjonalnie) Dodaj tłumaczenia dla innych języków
Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.
Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu
Kliknij Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.
Wpisz
Unit Price
w polu wyszukiwania.Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.
Zaktualizuj pole Etykieta ceny jednostkowej w obszarze Produkty / Ogólne.
Kliknij opcję Zapisz.
Kroki dla szablonu Minimal
Ceny jednostkowe są dostępne w szablonie Minimal dla wersji 11.2.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, możesz dodać dostosowanie ceny jednostkowej do poprzednich wersji Minimal.
Zaktualizuj swoje fragmenty kodu
Znajdź i rozwiń folder Fragmenty kodu.
Wybierz Dodaj nowy fragment kodu.
Wpisz nazwę
product-unit-price
.Skopiuj i wklej następujący kod do
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>
Kliknij opcję Zapisz.
Znajdź i edytuj plik
product-grid-item.liquid
.Zastąp tę linię:
{% capture price %}{{ featured.price | money }}{% endcapture %}
Z tą linią:
{%- assign price = featured.price | money -%}
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć
{{ price }}
i dodać następujący kod:
{%- 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 -%}
Po wprowadzeniu zmian plik product-grid-item.liquid
powinien wyglądać następująco:
Kliknij Zapisz, aby potwierdzić zmiany.
Zlokalizuj i edytuj plik
search-result.liquid
Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć
{% if item.object_type == 'product' %}
i dodać następujący kod w poniższej linii:
{%- assign variant = item.selected_or_first_available_variant -%}
- Teraz użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujące dwa fragmenty kodu:
<s><small>{{ item.compare_at_price_max | money }}</small></s>
I
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
{{ item.price | money }}
</span>
- Dodaj następujący blok kodu w każdym z dwóch fragmentów kodu wymienionych w poprzednim kroku:
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{%- endif -%}
Po wprowadzeniu zmian plik search-result.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Zaktualizuj swoje style
Zlokalizuj i rozwiń folder Zasoby.
Edytuj plik
theme.scss.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten fragment kodu:
.grid-link__title,
.grid-link__meta {
position: relative;
margin-bottom: 5px;
- Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:
font-family: $headerFontStack;
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący fragment kodu:
.grid-link__sale_price {
opacity: 0.95;
filter: alpha(opacity=95);
}
- Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:
.grid-link__unit-price {
font-size: 1em;
}
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący fragment kodu:
.order-discount--list {
margin: 0.8em 0 0.6em 1.3em;
list-style: none;
padding: 0;
}
- Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:
.order-discount--price {
margin-bottom: 0;
}
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący fragment kodu:
.cart__product-title {
display: inline-block;
- Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:
font-weight: $bodyFontWeightBold;
Po wprowadzeniu zmian plik theme.scss.liquid
powinien wyglądać następująco:
Kliknij Zapisz, aby potwierdzić zmiany.
Zlokalizuj i edytuj
timber.scss.liquid
plik.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:
.quantity-selector {
display: inline-block;
}
}
- Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:
.product-single__title {
font-weight: $bodyFontWeightBold;
}
- Wstaw ten kod na końcu pliku:
.product-unit-price {
color: rgba($colorTextBody, 0.6);
display: block;
font-family: $headerFontStack;
font-size: em(12px);
}
Po wprowadzeniu zmian plik timber.scss.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Zaktualizuj swoje szablony
Zlokalizuj i rozwiń folder Szablony.
Zlokalizuj i edytuj
customers/order.liquid
plik.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- Dodaj ten kod poniżej kodu z kroku 3:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Po wprowadzeniu zmian plik customers/order.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Zaktualizuj swój JavaScript
Znajdź i edytuj
theme.js
w zasobach.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następującą linię
.shopify-payment-button
i zamienić ją na:
$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)
Ten fragment kodu powinien wyglądać następująco:
- Poszukaj tego kodu:
else {
this.selectors.$comparePrice.addClass('hide').html('');
this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}
- Dodaj ten kod poniżej:
// 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');
}
Wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:
.attr('data-zoom')
});
});
- Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:
},
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;
Wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Zaktualizuj szablon koszyka
Zlokalizuj i rozwiń folder Sekcje.
Edytuj plik
cart-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod
<span class="order-discount h5">{{ item.final_price | money }}</span>
.Zamień linię z tym kodem:
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
- Znajdź pierwsze wystąpienie kodu
{%- if item.line_level_discount_allocations != blank -%}
:
{%- 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 -%}
- Dodaj ten fragment kodu powyżej kodu z kroku 5:
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}
Po wprowadzeniu zmian plik cart-template.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Zaktualizuj polecany produkt
Zlokalizuj i rozwiń folder Sekcje.
Edytuj plik
featured-product.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię z
itemprop="name"
i zamienić ją na:
<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
- Zlokalizuj kod zawierający
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 %}
- Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:
{% include 'product-unit-price', variant: variant, available: true %}
Po wprowadzeniu zmian plik featured-product.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Zaktualizuj szablon produktu
Zlokalizuj i rozwiń folder Sekcje.
Edytuj plik
product-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię z
itemprop="name"
i zamienić ją na:
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:
{% 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 %}
- Dodaj tę linię poniżej:
{% include 'product-unit-price', variant: variant, available: true %}
Po wprowadzeniu zmian plik product-template.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Zaktualizuj ustawienia regionalne
Zlokalizuj i rozwiń folder Ustawienia regionalne.
Otwórz i edytuj plik
en.default.json
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następującą linię
refresh_page
i zamienić ją na:
"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"
Wynik powinien wyglądać następująco:
- Zlokalizuj linię zawierającą
full_details
i zamień ją na:
"full_details": "Full details",
"unit_price_label": "Unit price"
Wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
(Opcjonalnie) Dodaj tłumaczenia dla innych języków
Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.
Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.
Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.
Wpisz
Unit Price
w polu wyszukiwania.Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.
Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.
Kliknij opcję Zapisz.
Kroki dla szablonu Venture
Ceny jednostkowe zostały dodane do szablonu Venture dla wersji 9.4.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, wykonaj następujące kroki, aby zastosować dostosowanie cen jednostkowych do poprzednich wersji Venture.
Edytuj plik języka szablonu
W katalogu ustawień regionalnych kliknij
en.default.json
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą
refresh_page
:
"refresh_page": "choosing a selection results in a full page refresh"
- Dodaj następujący kod powyżej linii znalezionej w kroku 2:
"unit_price_separator": "per",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą
stock_unavailable
:
"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."
- Dodaj następujący kod powyżej linii znalezionej w kroku 4:
"unit_price_label": "Unit price",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj arkusz stylów szablonu
W katalogu Zasoby kliknij
theme.scss.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
.product-single__policies {
:
.product-single__policies {
font-size: em($font-size-base - 1);
}
- Dodaj następujący kod poniżej tagu zamykającego
}
bloku kodu znalezionego w kroku 2:
.product-unit-price {
font-size: em(12);
color: $color-body-text;
}
.product-card__unit-price {
display: block;
}
Po wprowadzeniu zmian plik theme.scss.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Dodaj fragment ceny jednostkowej produktu
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.
Wpisz nazwę
product-unit-price
.Dodaj następujący kod do
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>
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj fragment kodu karty produktu
W katalogu Fragmenty kliknij
product-card.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
<a href="{{ product.url | within: collection }}"
.Dodaj następujący kod powyżej linii znalezionej w kroku 2:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
<div class="product-card__price">
:
<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>
- Dodaj następujący kod powyżej tagu zamykającego
</div>
znalezionego w kroku 5:
{%- 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 -%}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon strony koszyka
W katalogu Sekcje kliknij
cart-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć pierwsze wystąpienie
<td class="cart__cell--total">
:
<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 -%}
- Dodaj następujący kod poniżej tagu
endif
znalezionego w kroku 2:
{%- if item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: item %}
{%- endif -%}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć drugie wystąpienie
<td class="cart__cell--total">
:
<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}}
- Dodaj następujący kod poniżej drugiego tagu zamknięcia
{{/if}}
znalezionego w kroku 4:
{{#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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon polecanej strony produktu
W katalogu Sekcje kliknij
featured-product.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
{% assign current_variant = product.selected_or_first_available_variant %}
.Dodaj następujący kod poniżej linii znalezionej w kroku 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą
<ul class="product-single__meta-list
:
<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 %}
Poniżej tego tagu
ul
znajdź kod{% if section.settings.stock_enable %}
.Dodaj następujący kod powyżej bloku
if
znalezionego w kroku 6:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon strony produktu
W katalogu Sekcje kliknij
product-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
{% assign current_variant = product.selected_or_first_available_variant %}
.Dodaj następujący kod poniżej linii znalezionej w kroku 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą
<ul class="product-single__meta-list
:
<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 %}
Poniżej tego tagu
ul
znajdź kod{% if section.settings.stock_enable %}
.Dodaj następujący kod powyżej bloku
if
znalezionego w kroku 5:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon zamówienia klientów
W katalogu Szablony kliknij
customers/order.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
<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>
- Zastąp kod znaleziony w kroku 2 następującym kodem:
<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>
Po wprowadzeniu zmian plik customers/order.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj plik JavaScript swojego szablonu
W katalogu Zasoby kliknij
theme.js
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
// Create item's data object and add to 'items' array
.Dodaj następujący kod powyżej linii znalezionej w kroku 2:
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
};
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
vendor: cartItem.vendor,
Dodaj następujący kod poniżej linii znalezionej w kroku 4:
unitPrice: unitPrice,
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
shopifyPaymentButton: '.shopify-payment-button'
.Zastąp linię znalezioną w kroku 6 następującym kodem:
shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
_updateSKU: function(evt) {
.Dodaj następujący kod powyżej linii znalezionej w kroku 8:
_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;
},
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
this._updateIncomingInfo(variant);
:
} 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);
}
- Dodaj następujący kod poniżej tagu zamykającego
}
znalezionego w kroku 10:
$(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'
);
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
(Opcjonalnie) Dodaj tłumaczenia dla innych języków
Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.
Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.
Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.
Wpisz
Unit Price
w polu wyszukiwania.Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.
Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.
Kliknij opcję Zapisz.
Kroki dla szablonu Supply
Ceny jednostkowe zostały dodane do szablonu Supply dla wersji 8.3.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, wykonaj następujące kroki, aby zastosować dostosowanie ceny jednostkowej do poprzednich wersji Supply.
Dodaj fragment ceny jednostkowej produktu
Znajdź i rozwiń folder Fragmenty kodu.
Wybierz Dodaj nowy fragment kodu.
Wpisz nazwę
product-unit-price
.Skopiuj i wklej następujący kod do pliku i wybierz Zapisz.
{%- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </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>
Po wprowadzeniu zmian plik product-unit-price.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon polecanego produktu
Zlokalizuj i rozwiń folder Sekcje, a następnie wybierz plik
featured-product.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
{% include 'price' with price %}
w pliku.
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with price %}
</span>
</li>
- Dodaj następujący kod pod
</span>
zamykającym fragmentu kodu z kroku 2:
{% include 'product-unit-price' variant: variant %}
Po wprowadzeniu zmian plik featured-product.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon produktu
Zlokalizuj i rozwiń folder Sekcje, a następnie wybierz plik
product-template.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
{% include 'price' with variant.price %}
w pliku.
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
</li>
- Dodaj następujący kod pod
</span>
zamykającym z kroku 2:
{% include 'product-unit-price', variant: variant %}
Po wprowadzeniu zmian plik product-template.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj fragment kodu pozycji siatki produktu
Zlokalizuj i rozwiń folder Fragmenty, a następnie wybierz plik
product-grid-item.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
{% if on_sale and section.settings.product_show_saved_amount %}
w pliku.
{% 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>
- Zamień kod na następujący fragment kodu:
{%- 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 %}
Po wprowadzeniu zmian plik product-grid-item.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj fragment kodu pozycji listy produktów
Zlokalizuj i rozwiń folder Fragmenty, a następnie wybierz plik
product-list-item.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
<div class="product-item--price text-center">
w pliku:
<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>
- Zamień kod na następujący fragment kodu:
<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>
Po wprowadzeniu zmian plik product-list-item.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj fragment kodu siatki wyników wyszukiwania
Zlokalizuj i rozwiń folder Fragmenty, a następnie wybierz plik
search-result-grid.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
{% if on_sale and section.settings.product_show_saved_amount %}
w pliku.
{% 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>
- Zamień kod na następujący fragment kodu:
{%- 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 %}
Po wprowadzeniu zmian plik search-result-grid.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon koszyka
Zlokalizuj i rozwiń folder Szablony, a następnie wybierz plik
cart.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
<del class="cart-original-price order-discount--cart-price">
w pliku:
<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 -%}
- Zamień kod na następujący fragment kodu:
<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 -%}
Po wprowadzeniu zmian plik cart.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj szablon zamówienia
Zlokalizuj i rozwiń folder Szablony, a następnie wybierz plik
customers/order.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
<td class="text-right" data-label="customer.order.price">
w pliku:
<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>
- Dodaj następujący kod powyżej
</td>
zamykającym z kroku 2:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Po wprowadzeniu zmian plik customers/order.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj układ szablonu
Zlokalizuj i rozwiń folder Układ, a następnie wybierz plik
theme.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą
only_left:
w pliku:
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 }}
},
- Dodaj następujący kod powyżej
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
z kroku 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Po wprowadzeniu zmian plik theme.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj style szablonów
Zlokalizuj i rozwiń folder Sekcje, a następnie wybierz plik
theme.scss.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
.product-item--price {
w pliku:
.product-item--price {
@include clearfix;
.h1 {
margin-bottom: $gutter/2;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
- Zamień kod na następujący fragment kodu:
.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;
}
}
Po wprowadzeniu zmian plik theme.scss.liquid
powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj kod szablonu JavaScript
Zlokalizuj i rozwiń folder Zasoby, a następnie wybierz plik
theme.js.liquid
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
originalSelectorId: 'productSelect-' + sectionId,
w pliku:
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'
}
- Dodaj następujący kod powyżej
originalSelectorId: 'productSelect-' + sectionId,
z kroku 2:
unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
productVariantCallback: function(variant) {
w pliku:
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');
}
- Dodaj następujący kod pod
if (variant) {
z kroku 2:
// 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');
}
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
w pliku:
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>';
- Zamień linię
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
na następujący fragment kodu:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię
$(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
w pliku:
} 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();
}
- Dodaj następujący kod pod fragmentem kodu z kroku 11:
},
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;
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
Edytuj plik językowy szablonu
Zlokalizuj i rozwiń folder Ustawienia regionalne, a następnie wybierz plik
en.default.json
.Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą
"refresh_page"
w pliku:
"accessibility": {
"refresh_page": "choosing a selection results in a full page refresh"
},
- Dodaj następujący kod powyżej
"refresh_page"
z kroku 2:
"unit_price_separator": "per",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą
"will_be_in_stock_after"
w pliku:
"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"
}
- Dodaj następujący kod po
"will_be_in_stock_after"
z kroku 5:
"unit_price_label": "Unit price",
Po wprowadzeniu zmian wynik powinien wyglądać następująco:
- Kliknij Zapisz, aby potwierdzić zmiany.
(Opcjonalnie) Dodaj tłumaczenia dla innych języków
Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.
Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.
Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.
Wyszukaj
Unit Price
na pasku wprowadzania.Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.
Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.
Kliknij opcję Zapisz.
Pokaż ceny jednostkowe w powiadomieniach o zamówieniu
Jeśli dodałeś(-aś) ceny jednostkowe do swojego produktu, ale nie widać ich w powiadomieniach o potwierdzeniu zamówienia, konieczne może być zaktualizowanie szablonu powiadomienia o zamówieniu.
Kroki:
Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Powiadomienia.
Kliknij Potwierdzenie zamówienia.
Dodaj następujący fragment do szablonu:
{%- if line_item.unit_price_measurement -%}
{{ 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 }}
{%- endif -%}
- Kliknij opcję Zapisz.