Debut 的步驟
Debut 佈景主題 12.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本,則可以新增單價自訂內容至舊版的 Debut。
編輯商品價格程式碼片段
在「程式碼片段 」目錄中,按一下「product-price.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「data-price
」並找出以下程式碼:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %} " data-price>
用以下程式碼片段取代該程式碼:
<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>
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,搜尋「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>
在 </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 %}
按一下「儲存」 來確認變更內容。
編輯購物車頁面
在「區段 」目錄中,按一下 cart-template.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「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 -%}
用以下程式碼片段取代該程式碼:
<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>
編輯完成後,cart-template.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯商品系列頁面
在「區段 」目錄中,按一下 collection.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「grid-view-item__title
」並找出以下程式碼:
{% include 'product-price' %}
用以下程式碼片段取代該程式碼:
{% include 'product-price' , variant : nil %}
編輯完成後,collection.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品卡方格項目
在「程式碼片段 」目錄中,按一下「product-card-grid.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「grid-view-item__title
」並找出以下程式碼:
{% include 'product-price' , variant : product %}
用以下程式碼片段取代該程式碼:
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
編輯完成後,product-card-grid.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品卡清單
在「程式碼片段 」目錄中,按一下「product-card-list.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「{% if product.available %}
」並找出以下程式碼:
{% include 'product-price' , variant : product %}
用以下程式碼片段取代該程式碼:
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
編輯完成後,product-card-list.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯訂單頁面
在「範本 」目錄中,按一下「customers/order.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「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 -%}
用以下程式碼片段取代該程式碼:
<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>
編輯完成後,customers/order.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題樣式
在「資產 」目錄中,按一下「theme.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「.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%);
}
在步驟 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 ;
}
編輯完成後,theme.scss.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯 JavaScript 佈景主題程式碼
在「資產 」目錄中,按一下「theme.js
」檔案。
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
salePrice : ' [data-sale-price] '
在步驟 2 的程式碼上新增以下程式碼片段:
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
productOnSale : ' price--on-sale ' ,
在步驟 4 的程式碼後方新增以下程式碼片段:
productUnitAvailable : ' price--unit-available ' ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$] ' ;
用以下程式碼片段取代該程式碼:
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$] ' ;
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
var salePrice = '' ;
在步驟 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 );
}
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
. replace ( ' [$] ' , salePrice )
在步驟 10 的程式碼下方新增以下程式碼片段:
. replace ( ' [UnitPrice] ' , unitLabel )
. replace ( ' [$$$] ' , unitPrice )
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
_updatePrice : function ( evt ) {
在步驟 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 ;
},
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
var $salePrice = $ ( this . selectors . salePrice , $priceContainer );
在步驟 14 的程式碼下方新增以下程式碼片段:
var $unitPrice = $ ( this . selectors . unitPrice , $priceContainer );
var $unitPriceBaseUnit = $ (
this . selectors . unitPriceBaseUnit ,
$priceContainer
);
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
. removeClass ( this . classes . productOnSale )
在步驟 16 的程式碼下方新增以下程式碼片段:
. removeClass ( this . classes . productUnitAvailable )
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
else {
// Regular price
$regularPrice . html (
theme . Currency . formatMoney ( variant . price , theme . moneyFormat )
);
}
在步驟 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 );
}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯英文翻譯
在「語言代碼 」目錄中,按一下「en.default.json
」檔案。
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
"selection_help" : "press the space key then arrow keys to make a selection"
在步驟 2 的程式碼上新增以下程式碼片段:
"unit_price_separator" : "per" ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
"include_taxes" : "Tax included." ,
在步驟 4 的程式碼下方新增以下程式碼片段:
"unit_price_label" : "Unit price" ,
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題版面配置
在版面配置 目錄中,按一下 「theme.liquid
」 檔案。
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
regularPrice: {{ 'products.product.regular_price' | t | json }} ,
在步驟 2 的程式碼下方新增以下程式碼片段:
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
編輯完成後,theme.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題 」頁面。
點擊「... 」按鈕 >「編輯預設佈景主題內容 」。
點擊「變更佈景主題語言 」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能 」下方更新單價分隔符號 。
在「產品 (複數) / 產品 」下方更新單價標籤 。
按一下「儲存」 。
Brooklyn 的步驟
Brooklyn 佈景主題 13.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本,則可以新增單價自訂內容至舊版的 Brooklyn。
新增商品價格程式碼片段
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
在名稱欄位中輸入 product-price
。
複製貼上以下程式碼至檔案中。
<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>
按一下「儲存」 來確認變更內容。
編輯精選產品頁面
在「區段 」目錄中,按一下 featured-product.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「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>
用以下程式碼片段取代該程式碼:
{% include 'product-price' , variant : current_variant %}
編輯完成後,featured-product.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品頁面
在「區段 」目錄中,按一下 product-template.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「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>
用以下程式碼片段取代該程式碼:
{% include 'product-price' , variant : current_variant %}
編輯完成後,product-template.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯 ajax 購物車
在「程式碼片段 」目錄中,按一下「ajax-cart-template.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「<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}}
在步驟 2 的 {{/if}}
下方新增以下程式碼:
{{ #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}}
編輯完成後,ajax-cart-template.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品方格項目
在「程式碼片段 」目錄中,按一下「product-grid-template.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「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.' -%}
在步驟 2 中的程式碼前方新增以下程式碼片段:
{%- assign variant = product . selected_or_first_available_variant -%}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,搜尋「{{ 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>
在 </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 -%}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯購物車頁面
在「範本 」目錄中,按一下「cart.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「<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 -%}
在步驟 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 -%}
編輯完成後,cart.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯訂單頁面
在「範本 」目錄中,按一下「customers/order.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「{{ 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>
在步驟 2 的 </td>
之前新增以下程式碼片段:
{%- 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 -%}
編輯完成後,customers/order.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題樣式 - 第 1 部分
在「資產 」目錄中,按一下「theme.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「.ajaxcart__price {
」並找出以下程式碼:
.ajaxcart__price {
font-size : em ( 13px );
display : block ;
}
在步驟 2 的程式碼下方新增以下程式碼片段:
.cart__unit-price {
display : block ;
}
編輯完成後,theme.scss.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題樣式 - 第 2 部分
在「資產 」目錄中,按一下「timber.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,搜尋「.product-single__policies {
」並找出以下程式碼:
.product-single__policies {
margin : 15px 0 25px 0 ;
}
在步驟 2 的程式碼上新增以下程式碼片段:
.product-single__unit {
display : none ;
.price-container--unit-available & {
display : block ;
}
}
編輯完成後,結果應如下所示:
前往檔案最下方,並新增以下程式碼:
.product-unit-price {
color : $ colorTextBody ;
display : block ;
}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯 JavaScript 佈景主題程式碼
在「資產 」目錄中,按一下「theme.js.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
var prodImg ;
在步驟 2 的程式碼下方新增以下程式碼片段:
var unitPrice = null ;
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
// Create item's data object and add to 'items' array
在步驟 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
};
}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
vendor : cartItem . vendor
在步驟 6 的程式碼上新增以下程式碼片段:
unitPrice : unitPrice ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
productPrice : ' #ProductPrice ' ,
在步驟 8 的程式碼下方新增以下程式碼片段:
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,搜尋「$(this.selectors.priceContainer, this.$container).removeClass(
」並找出以下程式碼:
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden '
);
用以下程式碼片段取代該程式碼:
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden price-container--unit-available '
);
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
$ ( this . selectors . SKU ). html ( variant . sku );
在步驟 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 '
);
}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,搜尋「this.destroyImageCarousel();
」並找出以下程式碼:
onUnload : function () {
this . $container . off ( this . settings . namespace );
this . destroyImageCarousel ();
}
在步驟 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 ;
},
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯英文翻譯
在「語言代碼 」目錄中,按一下「en.default.json
」檔案。
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
"refresh_page" : "choosing a selection results in a full page refresh"
在步驟 2 的程式碼上新增以下程式碼片段:
"unit_price_separator" : "per" ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼:
"include_taxes" : "Tax included." ,
在步驟 4 的程式碼下方新增以下程式碼片段:
"unit_price" : "Unit price" ,
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題 」頁面。
點擊「... 」按鈕 >「編輯預設佈景主題內容 」
點擊「變更佈景主題語言 」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能 」下方更新單價分隔符號 。
在「產品 / 一般 」下方更新單價標籤 。
按一下「儲存」 。
Minimal 的步驟
Minimal 佈景主題 11.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本,則可以新增單價自訂內容至舊版的 Minimal。
更新程式碼片段
找出並展開「程式碼片段 」資料夾。
選取「新增程式碼片段 」。
輸入名稱 product-unit-price
。
在 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>
按一下「儲存」 。
找出並編輯檔案 product-grid-item.liquid
。
請取代這行:
{% capture price %}{{ featured . price | money }}{% endcapture %}
取代為這行:
{%- assign price = featured . price | money -%}
使用「查詢鍵盤快捷鍵 」功能,找出 {{ price }}
,並新增下方程式碼:
{%- 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 -%}
編輯完成後,product-grid-item.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
找出並編輯檔案 search-result.liquid
使用「查詢鍵盤快捷鍵 」功能,找出 {% if item.object_type == 'product' %}
,並在該行下方新增以下程式碼:
{%- assign variant = item . selected_or_first_available_variant -%}
現在使用「查詢鍵盤快捷鍵 」功能,找出下列兩個程式碼片段:
<s><small>{{ item . compare_at_price_max | money }} </small></s>
和
<span class="visually-hidden">{{ 'products.product.regular_price' | t }} </span>
<span itemprop="price">
{{ item . price | money }}
</span>
在前一步驟列出的兩個程式碼下方 皆 新增以下程式碼區段:
{%- if variant . available and variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : variant %}
{%- endif -%}
編輯完成後,search-result.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
更新樣式
找出並展開「資產 」資料夾。
編輯檔案 theme.scss.liquid
。
使用查詢鍵盤快捷鍵 功能找出此程式碼區塊:
.grid-link__title ,
.grid-link__meta {
position : relative ;
margin-bottom : 5px ;
在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
font-family : $ headerFontStack ;
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼片段:
.grid-link__sale_price {
opacity : 0.95 ;
filter : alpha ( opacity = 95 );
}
在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
.grid-link__unit-price {
font-size : 1em ;
}
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼片段:
.order-discount--list {
margin : 0.8em 0 0.6em 1.3em ;
list-style : none ;
padding : 0 ;
}
在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
.order-discount--price {
margin-bottom : 0 ;
}
使用「查詢鍵盤快捷鍵 」功能,找出以下程式碼片段:
.cart__product-title {
display : inline-block ;
在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
font-weight : $ bodyFontWeightBold ;
編輯完成後,theme.scss.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
找出並編輯檔案 timber.scss.liquid
。
使用「查詢鍵盤快捷鍵 」功能,找出此程式碼:
.quantity-selector {
display : inline-block ;
}
}
在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
.product-single__title {
font-weight : $ bodyFontWeightBold ;
}
在檔案最下方插入此程式碼:
.product-unit-price {
color : rgba ( $ colorTextBody , 0.6 );
display : block ;
font-family : $ headerFontStack ;
font-size : em ( 12px );
}
編輯完成後,timber.scss.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
更新範本
找出並展開「範本 」資料夾。
找出並編輯檔案 customers/order.liquid
。
使用「查詢鍵盤快捷鍵 」功能,找出此程式碼:
{%- else -%}
{{ line_item . original_price | money }}
{%- endif -%}
在步驟 3 的程式碼下方新增此程式碼:
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
編輯完成後,customers/order.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
更新 JavaScript
在「資產 」中找出並編輯 theme.js
。
使用「查詢鍵盤快捷鍵 」功能,找出 .shopify-payment-button
這一行,並將它取代為:
$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 )
該程式碼區塊應如下所示:
找出此程式碼:
else {
this . selectors . $comparePrice . addClass ( ' hide ' ). html ( '' );
this . selectors . $comparePriceA11y . attr ( ' aria-hidden ' , ' true ' );
}
在其下方新增此程式碼:
// 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 ' );
}
結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出此程式碼:
. attr ( ' data-zoom ' )
});
});
在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
},
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 ;
結果應如下所示:
按一下「儲存」 來確認變更內容。
更新購物車範本
找出並展開的「區段 」資料夾。
編輯檔案 cart-template.liquid
。
使用查詢鍵盤快捷鍵 功能找出程式碼 <span class="order-discount h5">{{ item.final_price | money }}</span>
。
用此程式碼取代這一行:
<span class="order-discount order-discount--price h5">{{ item . final_price | money }} </span>
找到程式碼的第一項目 {%- 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 -%}
在步驟 5 的程式碼上方新增此程式碼區塊:
{%- if item . variant . available and item . variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : item , available : item . variant . available %}
{%- endif -%}
編輯完成後,cart-template.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
更新精選產品
找出並展開的「區段 」資料夾。
編輯檔案 featured-product.liquid
。
使用「查詢鍵盤快捷鍵 」功能,找出 itemprop="name"
這一行,並將它取代為:
<h1 class="product-single__title" itemprop="name">{{ title }} </h1>
找出包含 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 %}
在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
{% include 'product-unit-price' , variant : variant , available : true %}
編輯完成後,featured-product.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
更新產品範本
找出並展開的「區段 」資料夾。
編輯檔案 product-template.liquid
。
使用「查詢鍵盤快捷鍵 」功能,找出 itemprop="name"
這一行,並將它取代為:
<h1 class="product-single__title" itemprop="name">{{ product . title }} </h1>
使用「查詢鍵盤快捷鍵 」功能,找出此程式碼:
{% 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 %}
新增以下這行:
{% include 'product-unit-price' , variant : variant , available : true %}
編輯完成後,product-template.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
更新語言代碼
找出並展開「語言代碼 」資料夾。
開啟並編輯 en.default.json
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出 refresh_page
這一行,並將它取代為:
"refresh_page" : "choosing a selection results in a full page refresh" ,
"unit_price_separator" : "per"
結果應如下所示:
找出包含 full_details
的這一行,並將它取代為:
"full_details" : "Full details" ,
"unit_price_label" : "Unit price"
結果應如下所示:
按一下「儲存」 來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題 」頁面。
點擊「... 」按鈕 >「編輯預設佈景主題內容 」。
點擊「變更佈景主題語言 」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能 」下方更新單價分隔符號 。
在「產品 (複數) / 產品 」下方更新單價標籤 。
按一下「儲存」 。
Venture 的步驟
單價功能已新增至 Venture 佈景主題 9.4.0 和以上的版本。如果您無法將佈景主題更新為最新版本,請依照這些步驟將單價自訂內容套用至舊版的 Venture。
編輯佈景主題語言檔案
在「語言代碼 」目錄中,按一下「en.default.json
」。
使用「查詢鍵盤快捷鍵 」,找出包含 refresh_page
的這一行:
"refresh_page" : "choosing a selection results in a full page refresh"
在步驟 2 的的這一行上方新增以下程式碼:
"unit_price_separator" : "per" ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」,找出包含 stock_unavailable
的這一行:
"stock_unavailable" : "The item could not be added to your cart because there are not enough in stock."
在步驟 4 的的這一行上方新增以下程式碼:
"unit_price_label" : "Unit price" ,
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題樣式表
在「資產」 目錄中,按一下 theme.scss.liquid
。
使用「查詢鍵盤快捷鍵 」功能,找出這一行 .product-single__policies {
:
.product-single__policies {
font-size : em ( $ font-size-base - 1 );
}
在步驟 2 的程式碼區塊 }
結束標籤下方新增以下程式碼:
.product-unit-price {
font-size : em ( 12 );
color : $ color-body-text ;
}
.product-card__unit-price {
display : block ;
}
編輯完成後,theme.scss.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
新增產品單價程式碼片段
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
輸入名稱 product-unit-price
。
將以下程式碼新增到 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>
按一下「儲存」 來確認變更內容。
編輯產品卡程式碼片段
在「程式碼片段 」目錄中,按一下「product-card.liquid
」。
使用「查詢鍵盤快捷鍵 」功能,找出這一行 <a href="{{ product.url | within: collection }}"
。
在步驟 2 的的這一行上方新增以下程式碼:
{%- assign current_variant = product . selected_or_first_available_variant -%}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出這一行 <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>
在步驟 5 的 </div>
結尾標籤上方新增以下程式碼:
{%- 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 -%}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯購物車頁面範本
在「區段」 目錄中,按一下 cart-template.liquid
。
使用「查詢鍵盤快捷鍵 」,找出 <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 -%}
在步驟 2 的 endif
結尾標籤下方新增以下程式碼:
{%- if item . unit_price_measurement -%}
{% include 'product-unit-price' , product_variant : item %}
{%- endif -%}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」,找出 <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}}
在步驟 4 的 {{/if}}
結尾標籤下方新增以下程式碼:
{{ #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}}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯精選產品頁面範本
在「區段」 目錄中,按一下 featured-product.liquid
。
使用「查詢鍵盤快捷鍵 」功能,找出這一行 {% assign current_variant = product.selected_or_first_available_variant %}
。
在步驟 2 的這一行下方新增以下程式碼:
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」,找出包含 <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 %}
在此 ul
標籤下方,找出程式碼 {% if section.settings.stock_enable %}
。
在步驟 6 的 if
區塊上方新增以下程式碼:
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品頁面範本
在「區段」 目錄中,按一下 product-template.liquid
。
使用「查詢鍵盤快捷鍵 」功能,找出這一行 {% assign current_variant = product.selected_or_first_available_variant %}
。
在步驟 2 的這一行下方新增以下程式碼:
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」,找出包含 <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 %}
在此 ul
標籤下方,找出程式碼 {% if section.settings.stock_enable %}
。
在步驟 5 的 if
區塊上方新增以下程式碼:
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯客戶的訂單範本
在「範本 」目錄中,按一下「customers/order.liquid
」。
使用「查詢鍵盤快捷鍵 」功能,找出這一行 <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>
將步驟 2 中的程式碼取代為以下程式碼:
<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>
編輯完成後,customers/order.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯您佈景主題的 JavaScipt 檔案
在「資產」 目錄中,按一下 theme.js
。
使用「查詢鍵盤快捷鍵 」功能,找出這一行 // Create item's data object and add to 'items' array
。
在步驟 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
};
}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出這一行 vendor: cartItem.vendor,
在步驟 4 的這一行下方新增以下程式碼:
unitPrice : unitPrice ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出這一行 shopifyPaymentButton: '.shopify-payment-button'
。
將步驟 6 中的這一行取代為以下程式碼:
shopifyPaymentButton : ' .shopify-payment-button ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
unitPriceContainer : ' [data-unit-price-container] '
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出這一行 _updateSKU: function(evt) {
。
在步驟 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 ;
},
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出這一行 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 );
}
在步驟 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 '
);
}
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題 」頁面。
點擊「... 」按鈕 >「編輯預設佈景主題內容 」。
點擊「變更佈景主題語言 」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能 」下方更新單價分隔符號 。
在「產品 (複數) / 產品 」下方更新單價標籤 。
按一下「儲存」 。
Supply 的步驟
單價功能已新增至 Supply 佈景主題 8.3.0 和以上的版本。如果您無法將佈景主題更新為最新版本,請依照這些步驟將單價自訂內容套用至舊版的 Supply。
新增產品單價程式碼片段
找出並展開程式碼片段 資料夾。
選取「新增程式碼片段 」。
輸入名稱 product-unit-price
。
複製貼上以下程式碼至檔案中,並選取「儲存 」。
{%- 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>
編輯完成後,product-unit-price.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯精選產品範本
找出並展開的「區段 」資料夾,然後選取「featured-product.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 {% include 'price' with price %}
。
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with price %}
</span>
</li>
在步驟 2 的 </span>
程式碼片段結尾下方新增以下程式碼:
{% include 'product-unit-price' variant : variant %}
編輯完成後,featured-product.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品範本
找出並展開的「區段 」資料夾,然後選取「product-template.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 {% include 'price' with variant.price %}
。
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with variant . price %}
</span>
</li>
在步驟 2 的 </span>
結尾下方新增以下程式碼:
{% include 'product-unit-price' , variant : variant %}
編輯完成後,product-template.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品格狀項目程式碼片段
找出並展開「程式碼片段 」資料夾,然後選取 product-grid-item.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 {% if on_sale and section.settings.product_show_saved_amount %}
。
{% 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>
用以下程式碼片段取代該程式碼:
{%- 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 %}
編輯完成後,product-grid-item.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯產品清單項目程式碼片段
找出並展開「程式碼片段 」資料夾,然後選取 product-list-item.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 <div class="product-item--price text-center">
:
<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>
用以下程式碼片段取代該程式碼:
<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>
編輯完成後,product-list-item.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯搜尋結果方格程式碼片段
找出並展開「程式碼片段 」資料夾,然後選取 search-result-grid.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 {% if on_sale and section.settings.product_show_saved_amount %}
。
{% 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>
用以下程式碼片段取代該程式碼:
{%- 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 %}
編輯完成後,search-result-grid.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯購物車範本
找出並展開「範本 」資料夾,然後選取 cart.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 <del class="cart-original-price order-discount--cart-price">
:
<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 -%}
用以下程式碼片段取代該程式碼:
<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 -%}
編輯完成後,cart.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯訂單範本
找出並展開「範本 」資料夾,然後選取 customers/order.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 <td class="text-right" data-label="customer.order.price">
:
<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>
在步驟 2 的 </td>
結尾上方新增以下程式碼:
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
編輯完成後,customers/order.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題版面配置
找出並展開「版面配置 」資料夾,然後選取 theme.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中包含 only_left:
的這一行:
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 }}
},
在步驟 2 的 only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
上方新增以下程式碼:
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
編輯完成後,theme.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題樣式
找出並展開的「區段 」資料夾,然後選取「theme.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 .product-item--price {
:
.product-item--price {
@include clearfix;
.h1 {
margin-bottom : $ gutter / 2 ;
}
span {
line-height : 22px ;
}
small {
white-space : nowrap ;
}
}
用以下程式碼片段取代該程式碼:
.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 ;
}
}
編輯完成後,theme.scss.liquid
檔案應如下所示:
按一下「儲存」 來確認變更內容。
編輯 JavaScript 佈景主題程式碼
找出並展開「資產 」資料夾中,然後選取 theme.js.liquid
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 originalSelectorId: 'productSelect-' + sectionId,
:
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 '
}
在步驟 2 的 originalSelectorId: 'productSelect-' + sectionId,
上方新增以下程式碼:
unitPriceContainer : ' [data-unit-price-container] ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 productVariantCallback: function(variant) {
:
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 ' );
}
在步驟 2 的 if (variant) {
下方新增以下程式碼:
// 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 ' );
}
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
:
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> ' ;
用以下程式碼片段取代這一行 customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
:
customPriceFormat += ' <span aria-hidden="true"><small><s> ' + comparePrice + ' </s></small></span> ' ;
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出檔案中的這一行 $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
:
} 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 ();
}
在步驟 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 ;
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
編輯佈景主題語言檔案
找出並展開「語言代碼 」資料夾,然後選取 en.default.json
檔案。
使用「查詢鍵盤快捷鍵 」功能,找出檔案中包含 "refresh_page"
的這一行:
"accessibility" : {
"refresh_page" : "choosing a selection results in a full page refresh"
} ,
在步驟 2 的 "refresh_page"
上方新增以下程式碼:
"unit_price_separator" : "per" ,
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵 」功能,找出檔案中包含 "will_be_in_stock_after"
的這一行:
"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"
}
在步驟 5 的 "will_be_in_stock_after"
下方新增以下程式碼:
"unit_price_label" : "Unit price" ,
編輯完成後,結果應如下所示:
按一下「儲存」 來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題 」頁面。
點擊「... 」按鈕 >「編輯預設佈景主題內容 」。
點擊「變更佈景主題語言 」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋列中輸入 Unit Price
。
在「一般 / 無障礙功能 」下方更新單價分隔符號 。
在「產品 (複數) / 產品 」下方更新單價標籤 。
按一下「儲存」 。