Trin for Debut
Stykpriser er tilgængelige i temaet Debut for version 12.1.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, kan du føje tilpasning af stykpris til tidligere versioner af Debut.
Rediger dit produktpriskodestykke
Klik på filen product-price.liquid
i mappen Kodestykker .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter data-price
:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %} " data-price>
Erstat koden med følgende kodestykke:
<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>
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter 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>
Indsæt følgende kode under afslutningstagget </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 %}
Klik på Gem for at bekræfte dine ændringer.
Rediger din side med indkøbskurven
Klik på filen cart-template.liquid
i mappen Afsnit .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter 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 -%}
Erstat koden med følgende kodestykke:
<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>
Når du har foretaget ændringerne, bør filen cart-template.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din kollektionsside
Klik på filen collection.liquid
i mappen Afsnit .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter grid-view-item__title
:
{% include 'product-price' %}
Erstat koden med følgende kodestykke:
{% include 'product-price' , variant : nil %}
Når du har foretaget ændringerne, bør filen collection.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dit produktkortgitter
Klik på filen product-card-grid.liquid
i mappen Kodestykker .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter grid-view-item__title
:
{% include 'product-price' , variant : product %}
Erstat koden med følgende kodestykke:
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
Når du har foretaget ændringerne, bør filen product-card-grid.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din produktkortliste
Klik på filen product-card-list.liquid
i mappen Kodestykker .
Brug tastaturgenvejen Find til at finde følgende kode ved at søge efter {% if product.available %}
:
{% include 'product-price' , variant : product %}
Erstat koden med følgende kodestykke:
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
Når du har foretaget ændringerne, bør filen product-card-list.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din ordreside
Klik på filen customers/order.liquid
i mappen Skabeloner .
Brug tastaturgenvejen Find til at finde følgende kode ved at søge efter 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 -%}
Erstat koden med følgende kodestykke:
<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>
Når du har foretaget ændringerne, bør filen customers/order.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dine temastile
Klik på filen theme.scss.liquid
i mappen Aktiver .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter .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%);
}
Tilføj følgende kodestykke under koden fra trin 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 ;
}
Når du har foretaget ændringerne, bør filen theme.scss.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din JavaScript-temakode
Klik på filen theme.js
i mappen Aktiver .
Brug tastaturgenvejen Find til at finde følgende kode:
salePrice : ' [data-sale-price] '
Tilføj følgende kodestykke over koden fra trin 2:
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde følgende kode:
productOnSale : ' price--on-sale ' ,
Tilføj følgende kodestykke efter koden fra trin 4:
productUnitAvailable : ' price--unit-available ' ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde følgende kode:
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$] ' ;
Erstat koden med følgende kodestykke:
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$] ' ;
Brug tastaturgenvejen Find til at finde følgende kode:
var salePrice = '' ;
Tilføj følgende kodestykke under koden fra trin 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 );
}
Brug tastaturgenvejen Find til at finde følgende kode:
. replace ( ' [$] ' , salePrice )
Tilføj følgende kodestykke under koden fra trin 10:
. replace ( ' [UnitPrice] ' , unitLabel )
. replace ( ' [$$$] ' , unitPrice )
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde følgende kode:
_updatePrice : function ( evt ) {
Tilføj følgende kodestykke før koden fra trin 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 ;
},
Brug tastaturgenvejen Find til at finde følgende kode:
var $salePrice = $ ( this . selectors . salePrice , $priceContainer );
Tilføj følgende kodestykke under koden fra trin 14:
var $unitPrice = $ ( this . selectors . unitPrice , $priceContainer );
var $unitPriceBaseUnit = $ (
this . selectors . unitPriceBaseUnit ,
$priceContainer
);
Brug tastaturgenvejen Find til at finde følgende kode:
. removeClass ( this . classes . productOnSale )
Tilføj følgende kodestykke under koden fra trin 16:
. removeClass ( this . classes . productUnitAvailable )
Brug tastaturgenvejen Find til at finde følgende kode:
else {
// Regular price
$regularPrice . html (
theme . Currency . formatMoney ( variant . price , theme . moneyFormat )
);
}
Tilføj følgende kodestykke under koden fra trin 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 );
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dine engelske oversættelser
Klik på filen en.default.json
i mappen Landekoder .
Brug tastaturgenvejen Find til at finde følgende kode:
"selection_help" : "press the space key then arrow keys to make a selection"
Tilføj følgende kodestykke over koden fra trin 2:
"unit_price_separator" : "per" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde følgende kode:
"include_taxes" : "Tax included." ,
Tilføj følgende kodestykke under koden fra trin 4:
"unit_price_label" : "Unit price" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dit temas layout
I mappen Layout skal du klikke på filen theme.liquid
.
Brug tastaturgenvejen Find til at finde følgende kode:
regularPrice: {{ 'products.product.regular_price' | t | json }} ,
Tilføj følgende kodestykke under koden fra trin 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
Når du har foretaget ændringerne, bør filen theme.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
(Valgfri) Tilføj oversættelser for andre sprog
Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold .
Klik på Skift temasprog , og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price
i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed .
Opdater feltet Label for stykpris under Produkter/Produkt .
Klik på Gem .
Trin til Brooklyn
Stykpriser er tilgængelige i temaet Brooklyn til version 13.1.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, kan du føje tilpasning af stykpriser til tidligere versioner af Brooklyn.
Tilføj et kodestykke for produktpris
Klik på Opret et nyt kodestykke i mappen Kodestykker .
Angiv product-price
i feltet navn.
Kopiér og indsæt nedenstående kode i filen.
<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>
Klik på Gem for at bekræfte dine ændringer.
Rediger din side med udvalgt produkt
Klik på filen featured-product.liquid
i mappen Afsnit .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter 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>
Erstat koden med følgende kodestykke:
{% include 'product-price' , variant : current_variant %}
Når du har foretaget ændringerne, bør filen featured-product.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din produktside
Klik på filen product-template.liquid
i mappen Afsnit .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter 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>
Erstat koden med følgende kodestykke:
{% include 'product-price' , variant : current_variant %}
Når du har foretaget ændringerne, bør filen product-template.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din Ajax-indkøbskurv
Klik på filen ajax-cart-template.liquid
i mappen Kodestykker .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter <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}}
Tilføj følgende kode under {{/if}}
fra trin 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}}
Når du har foretaget ændringerne, bør filen ajax-cart-template.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger produktgitterelementet
Klik på filen product-grid-template.liquid
i mappen Kodestykker .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter 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.' -%}
Tilføj følgende kodestykke før koden fra trin 2:
{%- assign variant = product . selected_or_first_available_variant -%}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter {{ 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>
Tilføj følgende kode under </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 -%}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din side med indkøbskurven
Klik på filen cart.liquid
i mappen Skabeloner .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter <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 -%}
Bemærk: Hvis du har en ældre version af temaet, kan du muligvis ikke finde dette kodestykke. Hvis det er tilfældet, skal du indsætte koden fra trin 3 direkte under elementet <span class="cart__price">
.
Tilføj følgende kodestykke under koden fra trin 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 -%}
Når du har foretaget ændringerne, bør filen cart.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din ordreside
Klik på filen customers/order.liquid
i mappen Skabeloner .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter {{ 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>
Tilføj følgende kodestykke før </td>
fra trin 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 -%}
Når du har foretaget ændringerne, bør filen customers/order.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dine temastile – del 1
Klik på filen theme.scss.liquid
i mappen Aktiver .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter .ajaxcart__price {
:
.ajaxcart__price {
font-size : em ( 13px );
display : block ;
}
Tilføj følgende kodestykke under koden fra trin 2:
.cart__unit-price {
display : block ;
}
Når du har foretaget ændringerne, bør filen theme.scss.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dine temastile – del 2
Klik på filen timber.scss.liquid
i mappen Aktiver .
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter .product-single__policies {
:
.product-single__policies {
margin : 15px 0 25px 0 ;
}
Tilføj følgende kodestykke over koden fra trin 2:
.product-single__unit {
display : none ;
.price-container--unit-available & {
display : block ;
}
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Til slutningen af filen skal du tilføje følgende kode:
.product-unit-price {
color : $ colorTextBody ;
display : block ;
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din temakode for JavaScript
Klik på filen theme.js.liquid
i mappen Aktiver .
Brug find tastaturgenvejen til at finde følgende kode:
var prodImg ;
Tilføj følgende kodestykke under koden fra trin 2:
var unitPrice = null ;
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode:
// Create item's data object and add to 'items' array
Tilføj følgende kodestykke over koden fra trin 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
};
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode:
vendor : cartItem . vendor
Tilføj følgende kodestykke over koden fra trin 6:
unitPrice : unitPrice ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode:
productPrice : ' #ProductPrice ' ,
Tilføj følgende kodestykke under koden fra trin 8:
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter $(this.selectors.priceContainer, this.$container).removeClass(
:
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden '
);
Erstat koden med følgende kodestykke:
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden price-container--unit-available '
);
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode:
$ ( this . selectors . SKU ). html ( variant . sku );
Tilføj følgende kodestykke over koden fra trin 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 '
);
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter this.destroyImageCarousel();
:
onUnload : function () {
this . $container . off ( this . settings . namespace );
this . destroyImageCarousel ();
}
Tilføj følgende kodestykke over koden fra trin 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 ;
},
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dine engelske oversættelser
Klik på filen en.default.json
i mappen Landekoder .
Brug find tastaturgenvejen til at finde følgende kode:
"refresh_page" : "choosing a selection results in a full page refresh"
Tilføj følgende kodestykke over koden fra trin 2:
"unit_price_separator" : "per" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug find tastaturgenvejen til at finde følgende kode:
"include_taxes" : "Tax included." ,
Tilføj følgende kodestykke under koden fra trin 4:
"unit_price" : "Unit price" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
(Valgfri) Tilføj oversættelser for andre sprog
Gå til siden Temaer i Shopify Admin.
Klik på knappen ... > Rediger standardtemaindhold
Klik på Skift temasprog , og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price
i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed .
Opdater feltet Label for stykpris under Produkter/Generelt .
Klik på Gem .
Trin for Minimal
Stykpriser er tilgængelige i temaet Minimal for version 11.2.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, kan du tilføje tilpasning af stykprispriser til tidligere versioner af Minimal.
Opdater dine kodestykker
Find og udvid mappen Kodestykker .
Vælg Tilføj et nyt kodestykke .
Angiv navnet product-unit-price
.
Kopiér og Indsæt følgende kode i 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>
Klik på Gem .
Find og rediger filen product-grid-item.liquid
.
Erstat denne linje:
{% capture price %}{{ featured . price | money }}{% endcapture %}
Med denne linje:
{%- assign price = featured . price | money -%}
Brug tastaturgenvejen Find til at finde {{ price }}
, og tilføj denne kode nedenfor:
{%- 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 -%}
Når du har foretaget ændringerne, bør filen product-grid-item.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Find og rediger filen search-result.liquid
Brug tastaturgenvejen Find til at finde {% if item.object_type == 'product' %}
, og tilføj følgende kode på linjen nedenfor:
{%- assign variant = item . selected_or_first_available_variant -%}
Brug derefter tastaturgenvejen Find til at finde følgende to kodestykker:
<s><small>{{ item . compare_at_price_max | money }} </small></s>
Og
<span class="visually-hidden">{{ 'products.product.regular_price' | t }} </span>
<span itemprop="price">
{{ item . price | money }}
</span>
Tilføj følgende kodeblok under hvert af de to kodestykker, der er vises i det foregående trin:
{%- if variant . available and variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : variant %}
{%- endif -%}
Når du har foretaget ændringerne, bør filen search-result.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Opdater dine typografier
Find og udvid mappen Aktiver .
Rediger filen theme.scss.liquid
.
Brug tastaturgenvejen Find til at finde denne kodeblok:
.grid-link__title ,
.grid-link__meta {
position : relative ;
margin-bottom : 5px ;
Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:
font-family : $ headerFontStack ;
Brug tastaturgenvejen Find til at finde følgende kodestykke:
.grid-link__sale_price {
opacity : 0.95 ;
filter : alpha ( opacity = 95 );
}
Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:
.grid-link__unit-price {
font-size : 1em ;
}
Brug tastaturgenvejen Find til at finde følgende kodestykke:
.order-discount--list {
margin : 0.8em 0 0.6em 1.3em ;
list-style : none ;
padding : 0 ;
}
Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:
.order-discount--price {
margin-bottom : 0 ;
}
Brug tastaturgenvejen Find til at finde følgende kodestykke:
.cart__product-title {
display : inline-block ;
Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:
font-weight : $ bodyFontWeightBold ;
Når du har foretaget ændringerne, bør filen theme.scss.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Find og rediger filen timber.scss.liquid
.
Brug tastaturgenvejen Find til at finde denne kode:
.quantity-selector {
display : inline-block ;
}
}
Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:
.product-single__title {
font-weight : $ bodyFontWeightBold ;
}
Indsæt denne kode i slutningen af filen:
.product-unit-price {
color : rgba ( $ colorTextBody , 0.6 );
display : block ;
font-family : $ headerFontStack ;
font-size : em ( 12px );
}
Når du har foretaget ændringerne, bør filen timber.scss.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Opdater dine skabeloner
Find og udvid mappen Skabeloner .
Find og rediger filen customers/order.liquid
.
Brug tastaturgenvejen Find til at finde koden:
{%- else -%}
{{ line_item . original_price | money }}
{%- endif -%}
Indsæt denne kode under koden fra trin 3:
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
Når du har foretaget ændringerne, bør filen customers/order.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Opdater dit JavaScript
Find og rediger theme.js
i Aktiver .
Brug tastaturgenvejen Find til at finde den linje, der indeholder .shopify-payment-button
, og erstat den med:
$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 )
Denne kodeblok bør se sådan ud:
Led efter denne kode:
else {
this . selectors . $comparePrice . addClass ( ' hide ' ). html ( '' );
this . selectors . $comparePriceA11y . attr ( ' aria-hidden ' , ' true ' );
}
Indsæt denne kode under den:
// 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 ' );
}
Resultatet bør se ud som følger:
Brug tastaturgenvejen Find til at finde denne kode:
. attr ( ' data-zoom ' )
});
});
Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:
},
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 ;
Resultatet bør se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Opdater din indkøbskurvsskabelon
Find og udvid mappen Afsnit .
Rediger filen cart-template.liquid
.
Brug genvejstasten Find til at finde koden <span class="order-discount h5">{{ item.final_price | money }}</span>
.
Erstat linjen med denne kode:
<span class="order-discount order-discount--price h5">{{ item . final_price | money }} </span>
Find den første forekomst af koden {%- 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 -%}
Indsæt denne kodeblok over koden fra trin 5:
{%- if item . variant . available and item . variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : item , available : item . variant . available %}
{%- endif -%}
Når du har foretaget ændringerne, bør filen cart-template.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Opdater dit udvalgte produkt
Find og udvid mappen Afsnit .
Rediger filen featured-product.liquid
.
Brug tastaturgenvejen Find til at finde linjen med itemprop="name"
, og erstat den med:
<h1 class="product-single__title" itemprop="name">{{ title }} </h1>
Find koden, der indeholder 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 %}
Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:
{% include 'product-unit-price' , variant : variant , available : true %}
Når du har foretaget ændringerne, bør filen featured-product.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Opdater din produktskabelon
Find og udvid mappen Afsnit .
Rediger filen product-template.liquid
.
Brug tastaturgenvejen Find til at finde linjen med itemprop="name"
, og erstat den med:
<h1 class="product-single__title" itemprop="name">{{ product . title }} </h1>
Brug tastaturgenvejen Find til at finde koden:
{% 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 %}
Indsæt denne linje nedenunder:
{% include 'product-unit-price' , variant : variant , available : true %}
Når du har foretaget ændringerne, bør filen product-template.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Opdater landestandarderne
Find og Udvid mappen Landestandarder .
Åbn og rediger filen en.default.json
.
Brug tastaturgenvejen Find til at finde den linje, der indeholder refresh_page
, og erstat den med:
"refresh_page" : "choosing a selection results in a full page refresh" ,
"unit_price_separator" : "per"
Resultatet bør se ud som følger:
Find linjen, der indeholder full_details
, og erstat den med:
"full_details" : "Full details" ,
"unit_price_label" : "Unit price"
Resultatet bør se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
(Valgfri) Tilføj oversættelser for andre sprog
Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold .
Klik på Skift temasprog , og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price
i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed .
Opdater feltet Label for stykpris under Produkter/Produkt .
Klik på Gem .
Trin for Venture
Der blev føjet stykpriser til temaet Venture for version 9.4.0 og derover. Hvis du ikke kan opdatere dit tema til den seneste version, skal du følge disse trin for at anvende tilpasningen af stykpriser i tidligere versioner af Venture.
Rediger dit temas sprogfil
I mappen Landestandarder skal du klikke på en.default.json
.
Brug tastaturgenvejen Find til at finde den linje, der indeholder refresh_page
:
"refresh_page" : "choosing a selection results in a full page refresh"
Indsæt følgende kode over linjen, der blev fundet i trin 2:
"unit_price_separator" : "per" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den linje, der indeholder stock_unavailable
:
"stock_unavailable" : "The item could not be added to your cart because there are not enough in stock."
Indsæt følgende kode over linjen fundet i trin 4:
"unit_price_label" : "Unit price" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dit temas typografiark
Klik på theme.scss.liquid
i mappen Aktiver .
Brug tastaturgenvejen Find til at finde linjen .product-single__policies {
:
.product-single__policies {
font-size : em ( $ font-size-base - 1 );
}
Indsæt følgende kode under afslutningstagget }
for kodeblokken, der blev fundet i trin 2:
.product-unit-price {
font-size : em ( 12 );
color : $ color-body-text ;
}
.product-card__unit-price {
display : block ;
}
Når du har foretaget ændringerne, bør filen theme.scss.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Tilføj et kodestykke med stykpris for produktet
Klik på Opret et nyt kodestykke i mappen Kodestykker .
Angiv navnet product-unit-price
.
Føj følgende kode til 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>
Klik på Gem for at bekræfte dine ændringer.
Rediger kodestykket for dit produktkort
Klik på product-card.liquid
i mappen Kodestykker .
Brug tastaturgenvejen Find til at finde linjen <a href="{{ product.url | within: collection }}"
.
Indsæt følgende kode over linjen, der blev fundet i trin 2:
{%- assign current_variant = product . selected_or_first_available_variant -%}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde linjen <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>
Tilføj følgende kode over afslutningstagget </div>
, der blev fundet i trin 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 -%}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger skabelonen for din side med indkøbskurv
Klik på cart-template.liquid
i mappen Afsnit .
Brug tastaturgenvejen Find til at finde den første forekomst af <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 -%}
Tilføj følgende kode under endif
-tagget, der blev fundet i trin 2:
{%- if item . unit_price_measurement -%}
{% include 'product-unit-price' , product_variant : item %}
{%- endif -%}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den anden forekomst af <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}}
Tilføj følgende kode under det andet afslutningstag {{/if}}
, der blev fundet i trin 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}}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din skabelon for siden med udvalgte produkter
Klik på featured-product.liquid
i mappen Afsnit .
Brug tastaturgenvejen Find til at finde linjen {% assign current_variant = product.selected_or_first_available_variant %}
.
Tilføj følgende kode under linjen, der blev fundet i trin 2:
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den linje, der indeholder <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 %}
Find koden {% if section.settings.stock_enable %}
under dette ul
-tag.
Tilføj følgende kode over if
-blokken, der blev fundet i trin 6:
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din produktsideskabelon
Klik på product-template.liquid
i mappen Afsnit .
Brug tastaturgenvejen Find til at finde linjen {% assign current_variant = product.selected_or_first_available_variant %}
.
Tilføj følgende kode under linjen, der blev fundet i trin 2:
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den linje, der indeholder <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 %}
Find koden {% if section.settings.stock_enable %}
under dette ul
-tag.
Tilføj følgende kode over if
-blokken, der blev fundet i trin 5:
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger ordreskabelonen for dine kunder
Klik på customers/order.liquid
i mappen Skabeloner .
Brug tastaturgenvejen Find til at finde linjen <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>
Erstat koden, der blev fundet i trin 2, med følgende kode:
<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>
Når du har foretaget ændringerne, bør filen customers/order.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dit temas JavaScript-fil
Klik på theme.js
i mappen Aktiver .
Brug tastaturgenvejen Find til at finde linjen // Create item's data object and add to 'items' array
.
Indsæt følgende kode over linjen, der blev fundet i trin 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
};
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde linjen vendor: cartItem.vendor,
Tilføj følgende kode under linjen, der blev fundet i trin 4:
unitPrice : unitPrice ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde linjen shopifyPaymentButton: '.shopify-payment-button'
.
Erstat linjen, der blev fundet i trin 6, med følgende kode:
shopifyPaymentButton : ' .shopify-payment-button ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
unitPriceContainer : ' [data-unit-price-container] '
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde linjen _updateSKU: function(evt) {
.
Tilføj følgende kode over linjen, der blev fundet i trin 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 ;
},
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde linjen 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 );
}
Tilføj følgende kode under afslutningstagget }
, der blev fundet i trin 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 '
);
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
(Valgfri) Tilføj oversættelser for andre sprog
Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold .
Klik på Skift temasprog , og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price
i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed .
Opdater feltet Label for stykpris under Produkter/Produkt .
Klik på Gem .
Trin for Supply
Der blev føjet stykpriser til temaet Supply for version 8.3.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, skal du følge disse trin for at anvende tilpasningen af stykpriser på tidligere versioner af Supply.
Tilføj et kodestykke med stykpris for produktet
Find og udvid mappen Kodestykker .
Vælg Tilføj et nyt kodestykke .
Angiv navnet product-unit-price
.
Kopiér og indsæt følgende kode i filen, og vælg Gem .
{%- 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>
Når du har foretaget ændringerne, bør filen product-unit-price.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din skabelon for udvalgte produkter
Find og udvid mappen Afsnit , og vælg derefter featured-product.liquid
.
Brug tastaturgenvejen Find til at finde linjen {% include 'price' with price %}
i filen:
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with price %}
</span>
</li>
Indsæt følgende kode under kodestykkets afsluttende </span>
fra trin 2:
{% include 'product-unit-price' variant : variant %}
Når du har foretaget ændringerne, bør filen featured-product.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din produktskabelon
Find og udvid mappen Afsnit , og vælg derefter product-template.liquid
.
Brug tastaturgenvejen Find til at finde linjen {% include 'price' with variant.price %}
i filen:
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with variant . price %}
</span>
</li>
Tilføj følgende kode under afslutningstagget </span>
fra trin 2:
{% include 'product-unit-price' , variant : variant %}
Når du har foretaget ændringerne, bør filen product-template.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger kodestykket for dit produktgitter
Find og udvid mappen Kodestykker , og vælg derefter filen product-grid-item.liquid
.
Brug tastaturgenvejen Find til at finde linjen {% if on_sale and section.settings.product_show_saved_amount %}
i filen:
{% 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>
Erstat koden med følgende kodestykke:
{%- 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 %}
Når du har foretaget ændringerne, bør filen product-grid-item.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger kodestykket for produktlisteelement
Find og udvid mappen Kodestykker , og vælg derefter filen product-list-item.liquid
.
Brug tastaturgenvejen Find til at finde den linje, <div class="product-item--price text-center">
i filen:
<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>
Erstat koden med følgende kodestykke:
<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>
Når du har foretaget ændringerne, bør filen product-list-item.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dit kodestykke for søgeresultatgitteret
Find og udvid mappen Kodestykker , og vælg derefter filen search-result-grid.liquid
.
Brug tastaturgenvejen Find til at finde linjen {% if on_sale and section.settings.product_show_saved_amount %}
i filen:
{% 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>
Erstat koden med følgende kodestykke:
{%- 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 %}
Når du har foretaget ændringerne, bør filen search-result-grid.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din indkøbskurvsskabelon
Find og udvid mappen skabeloner , og vælg derefter filen cart.liquid
.
Brug tastaturgenvejen Find til at finde den linje, <del class="cart-original-price order-discount--cart-price">
i filen:
<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 -%}
Erstat koden med følgende kodestykke:
<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 -%}
Når du har foretaget ændringerne, bør filen cart.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din ordreskabelon
Find og udvid mappen skabeloner , og vælg derefter filen customers/order.liquid
.
Brug tastaturgenvejen Find til at finde den linje, <td class="text-right" data-label="customer.order.price">
i filen:
<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>
Føj følgende kode over afslutningstagget </td>
fra trin 2:
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
Når du har foretaget ændringerne, bør filen customers/order.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dit temas layout
Find og udvid mappen Layout , og vælg derefter filen theme.liquid
.
Brug tastaturgenvejen Find til at finde den linje, der indeholder only_left:
, i filen:
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 }}
},
Tilføj følgende kode over only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
fra trin 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
Når du har foretaget ændringerne, bør filen theme.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dine temastile
Find og udvid mappen Afsnit , og vælg derefter theme.scss.liquid
.
Brug tastaturgenvejen Find til at finde den linje, .product-item--price {
i filen:
.product-item--price {
@include clearfix;
.h1 {
margin-bottom : $ gutter / 2 ;
}
span {
line-height : 22px ;
}
small {
white-space : nowrap ;
}
}
Erstat koden med følgende kodestykke:
.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 ;
}
}
Når du har foretaget ændringerne, bør filen theme.scss.liquid
se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger din temakode for JavaScript
Find og udvid mappen Aktiver , og vælg derefter filen theme.js.liquid
.
Brug tastaturgenvejen Find til at finde den linje, originalSelectorId: 'productSelect-' + sectionId,
i filen:
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 '
}
Indsæt følgende kode over originalSelectorId: 'productSelect-' + sectionId,
fra trin 2:
unitPriceContainer : ' [data-unit-price-container] ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den linje, productVariantCallback: function(variant) {
i filen:
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 ' );
}
Indsæt følgende kode under if (variant) {
fra trin 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 ' );
}
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den linje, customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
i filen:
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> ' ;
Erstat linjen customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
med følgende kodestykke:
customPriceFormat += ' <span aria-hidden="true"><small><s> ' + comparePrice + ' </s></small></span> ' ;
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den linje, $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
i filen:
} 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 ();
}
Indsæt følgende kode under kodestykket fra trin 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 ;
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
Rediger dit temas sprogfil
Find og udvid mappen Landestandarder , og vælg derefter filen en.default.json
.
Brug tastaturgenvejen Find til at finde den linje, der indeholder "refresh_page"
, i filen:
"accessibility" : {
"refresh_page" : "choosing a selection results in a full page refresh"
} ,
Indsæt følgende kode over "refresh_page"
fra trin 2:
"unit_price_separator" : "per" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Brug tastaturgenvejen Find til at finde den linje, der indeholder "will_be_in_stock_after"
, i filen:
"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"
}
Indsæt følgende kode efter "will_be_in_stock_after"
fra trin 5:
"unit_price_label" : "Unit price" ,
Når du har foretaget ændringerne, bør resultatet se ud som følger:
Klik på Gem for at bekræfte dine ændringer.
(Valgfri) Tilføj oversættelser for andre sprog
Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold .
Klik på Skift temasprog , og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Søg efter Unit Price
i inputbjælken.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed .
Opdater feltet Label for stykpris under Produkter/Produkt .
Klik på Gem .