Étapes pour Debut
Les prix unitaires sont disponibles dans le thème Debut des versions 12.1.0 et au-delà. Si vous n’êtes pas en mesure de mettre à jour votre thème pour utiliser la dernière version, vous pouvez ajouter la personnalisation des prix unitaires aux versions antérieures de Debut.
Dans le répertoire Snippets (Extraits), ouvrez le fichier product-price.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant data-price
:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %} " data-price>
Remplacez le code par l'extrait suivant :
<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>
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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>
Ajoutez le code suivant dans la balise de fermeture </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 %}
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page du panier
Dans le répertoire Sections , cliquez sur le fichier cart-template.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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 -%}
Remplacez le code par l'extrait suivant :
<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>
Après vos modifications, le fichier cart-template.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier une page de collection
Dans le répertoire Sections , cliquez sur le fichier collection.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant grid-view-item__title
:
{% include 'product-price' %}
Remplacez le code par l'extrait suivant :
{% include 'product-price' , variant : nil %}
Après vos modifications, le fichier collection.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la grille d'une carte de produit
Dans le répertoire Snippets (Extraits), ouvrez le fichier product-card-grid.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant grid-view-item__title
:
{% include 'product-price' , variant : product %}
Remplacez le code par l'extrait suivant :
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
Après vos modifications, le fichier product-card-grid.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la liste de cartes de produits
Dans le répertoire Snippets (Extraits), ouvrez le fichier product-card-list.liquid
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant {% if product.available %}
:
{% include 'product-price' , variant : product %}
Remplacez le code par l'extrait suivant :
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
Après vos modifications, le fichier product-card-list.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier votre page de commande
Dans le répertoire Templates (Modèles), cliquez sur le fichier customers/order.liquid
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant 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 -%}
Remplacez le code par l'extrait suivant :
<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>
Après vos modifications, le fichier customers/order.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thèmes
Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.scss.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant .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%);
}
Ajoutez l'extrait suivant sous le code de l'étape 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 ;
}
Après vos modifications, le fichier theme.scss.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier un code de thème javascript
Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.js
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
salePrice : ' [data-sale-price] '
Ajoutez l'extrait suivant sur le code de l'étape 2 :
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
productOnSale : ' price--on-sale ' ,
Ajoutez l’extrait suivant après le code de l’étape 4 :
productUnitAvailable : ' price--unit-available ' ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$] ' ;
Remplacez le code par l'extrait suivant :
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$] ' ;
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var salePrice = '' ;
Ajoutez l'extrait suivant sous le code de l'étape 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 );
}
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
. replace ( ' [$] ' , salePrice )
Ajoutez l’extrait suivant sous le code de l’étape 10 :
. replace ( ' [UnitPrice] ' , unitLabel )
. replace ( ' [$$$] ' , unitPrice )
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
_updatePrice : function ( evt ) {
Ajoutez l’extrait suivant avant le code de l’étape 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 ;
},
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var $salePrice = $ ( this . selectors . salePrice , $priceContainer );
Ajoutez l’extrait suivant sous le code de l’étape 14 :
var $unitPrice = $ ( this . selectors . unitPrice , $priceContainer );
var $unitPriceBaseUnit = $ (
this . selectors . unitPriceBaseUnit ,
$priceContainer
);
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
. removeClass ( this . classes . productOnSale )
Ajoutez l’extrait suivant sous le code de l’étape 16 :
. removeClass ( this . classes . productUnitAvailable )
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
else {
// Regular price
$regularPrice . html (
theme . Currency . formatMoney ( variant . price , theme . moneyFormat )
);
}
Ajoutez l’extrait suivant sous le code de l’étape 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 );
}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier des traductions en anglais
Dans le répertoire Locales (Paramètres régionaux), cliquez sur le fichier en.default.json
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"selection_help" : "press the space key then arrow keys to make a selection"
Ajoutez l'extrait suivant sur le code de l'étape 2 :
"unit_price_separator" : "per" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"include_taxes" : "Tax included." ,
Ajoutez l'extrait suivant sous le code de l'étape 4 :
"unit_price_label" : "Unit price" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la mise en page de votre thème
Dans le répertoire Layout (Mise en page), cliquez sur le fichier theme.liquid
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
regularPrice: {{ 'products.product.regular_price' | t | json }} ,
Ajoutez l'extrait suivant sous le code de l'étape 2 :
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
Après vos modifications, le fichier theme.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut .
Cliquez sur Modifier la langue du thème , puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.
Saisissez Unit Price
dans le champ rechercher.
Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save .
Étapes pour Brooklyn
Les prix unitaires sont disponibles dans le thème Brooklyn pour les versions 13.1.0 et supérieur. Si vous n’êtes pas en mesure de mettre à jour votre thème en installant la dernière version, vous pouvez ajouter la personnalisation des prix unitaires aux versions antérieures de Brooklyn.
Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Saisissez product-price
dans le champ du nom.
Copiez et collez le code suivant dans le fichier.
<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>
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page du produit en vedette
Dans le répertoire Sections , cliquez sur le fichier featured-product.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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>
Remplacez le code par l'extrait suivant :
{% include 'product-price' , variant : current_variant %}
Après vos modifications, le fichier featured-product.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page de votre produit
Dans le répertoire Sections , cliquez sur le fichier product-template.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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>
Remplacez le code par l'extrait suivant :
{% include 'product-price' , variant : current_variant %}
Après vos modifications, le fichier product-template.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le code du panier dynamique
Dans le répertoire Snippets (Extraits), ouvrez le fichier ajax-cart-template.liquid
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant <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}}
Ajoutez le code suivant dans la {{/if}}
de l’étape 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}}
Après vos modifications, le fichier ajax-cart-template.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier l’élément de grille de produit
Dans le répertoire Snippets (Extraits), ouvrez le fichier product-grid-template.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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.' -%}
Ajoutez l’extrait suivant avant le code de l’étape 2 :
{%- assign variant = product . selected_or_first_available_variant -%}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant {{ 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>
Ajoutez le code suivant sous le </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 -%}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page du panier
Dans le répertoire Templates (Modèles), cliquez sur le fichier cart.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant <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 -%}
Remarque
si vous avez une version de thème plus ancienne, vous ne pourrez peut-être pas trouver cet extrait. Dans ce cas, ajoutez le code de l’étape 3 directement sous l’élément <span class="cart__price">
.
Ajoutez l'extrait suivant sous le code de l'étape 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 -%}
Après vos modifications, le fichier cart.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier votre page de commande
Dans le répertoire Templates (Modèles), cliquez sur le fichier customers/order.liquid
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant {{ 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>
Ajoutez l’extrait suivant avant le </td>
de l’étape 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 -%}
Après vos modifications, le fichier customers/order.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thème - Partie 1
Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.scss.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant .ajaxcart__price {
:
.ajaxcart__price {
font-size : em ( 13px );
display : block ;
}
Ajoutez l'extrait suivant sous le code de l'étape 2 :
.cart__unit-price {
display : block ;
}
Après vos modifications, le fichier theme.scss.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thème - Partie 2
Dans le répertoire Assets (Ressources), cliquez sur le fichier timber.scss.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant .product-single__policies {
:
.product-single__policies {
margin : 15px 0 25px 0 ;
}
Ajoutez l'extrait suivant sur le code de l'étape 2 :
.product-single__unit {
display : none ;
.price-container--unit-available & {
display : block ;
}
}
Après vos modifications, le résultat devrait ressembler à ceci :
Rendez-vous à la toute fin du fichier et ajoutez le code suivant :
.product-unit-price {
color : $ colorTextBody ;
display : block ;
}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier un code de thème JavaScript
Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.js.liquid
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var prodImg ;
Ajoutez l'extrait suivant sous le code de l'étape 2 :
var unitPrice = null ;
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
// Create item's data object and add to 'items' array
Ajoutez l’extrait suivant sur le code de l’étape 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
};
}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
vendor : cartItem . vendor
Ajoutez l’extrait suivant sur le code de l’étape 6 :
unitPrice : unitPrice ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
productPrice : ' #ProductPrice ' ,
Ajoutez l'extrait suivant sous le code de l'étape 8 :
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant $(this.selectors.priceContainer, this.$container).removeClass(
:
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden '
);
Remplacez le code par l'extrait suivant :
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden price-container--unit-available '
);
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
$ ( this . selectors . SKU ). html ( variant . sku );
Ajoutez l’extrait suivant sur le code de l’étape 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 '
);
}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant this.destroyImageCarousel();
:
onUnload : function () {
this . $container . off ( this . settings . namespace );
this . destroyImageCarousel ();
}
Ajoutez l’extrait suivant sur le code de l’étape 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 ;
},
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les traductions en anglais
Dans le répertoire Locales (Paramètres régionaux), cliquez sur le fichier en.default.json
.
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"refresh_page" : "choosing a selection results in a full page refresh"
Ajoutez l'extrait suivant sur le code de l'étape 2 :
"unit_price_separator" : "per" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"include_taxes" : "Tax included." ,
Ajoutez l'extrait suivant sous le code de l'étape 4 :
"unit_price" : "Unit price" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut
Cliquez sur Modifier la langue du thème , puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.
Saisissez Unit Price
dans le champ rechercher.
Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette de prix unitaire) sous Products/General (Produits/Général).
Cliquez sur Save .
Étapes pour Minimal
Les prix unitaires sont disponibles dans le thème Minimal des versions 11.2.0 et au-delà. Si vous n'êtes pas en mesure de mettre à jour votre thème pour utiliser la dernière version, vous pouvez ajouter la personnalisation des prix unitaires aux versions antérieures de Minimal.
Recherchez et ouvrez le dossier Snippets (Extraits).
Sélectionnez Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Saisissez le nom product-unit-price
.
Copiez et collez le code suivant dans 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>
Cliquez sur Save .
Trouvez et modifiez le fichier product-grid-item.liquid
.
Remplacez cette ligne :
{% capture price %}{{ featured . price | money }}{% endcapture %}
Par cette ligne :
{%- assign price = featured . price | money -%}
Utilisez le raccourci clavier rechercher pour localiser {{ price }}
et ajoutez ce code ci-dessous :
{%- 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 -%}
Après vos modifications, le fichier product-grid-item.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Localiser et modifier le fichier search-result.liquid
Utilisez le raccourci clavier rechercher pour localiser {% if item.object_type == 'product' %}
et ajoutez le code suivant sur la ligne ci-dessous :
{%- assign variant = item . selected_or_first_available_variant -%}
Maintenant, utilisez le raccourci clavier rechercher pour localiser les deux extraits de code suivants :
<s><small>{{ item . compare_at_price_max | money }} </small></s>
Et
<span class="visually-hidden">{{ 'products.product.regular_price' | t }} </span>
<span itemprop="price">
{{ item . price | money }}
</span>
Ajoutez le bloc de code suivant à chacun des deux extraits de code répertoriés à l’étape précédente :
{%- if variant . available and variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : variant %}
{%- endif -%}
Après vos modifications, le fichier search-result.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour des styles
Recherchez et ouvrez le dossier Assets (Ressources).
Modifiez le fichier theme.scss.liquid
.
Utilisez le raccourci clavier rechercher pour trouver cet extrait de code :
.grid-link__title ,
.grid-link__meta {
position : relative ;
margin-bottom : 5px ;
Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
font-family : $ headerFontStack ;
Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :
.grid-link__sale_price {
opacity : 0.95 ;
filter : alpha ( opacity = 95 );
}
Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
.grid-link__unit-price {
font-size : 1em ;
}
Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :
.order-discount--list {
margin : 0.8em 0 0.6em 1.3em ;
list-style : none ;
padding : 0 ;
}
Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
.order-discount--price {
margin-bottom : 0 ;
}
Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :
.cart__product-title {
display : inline-block ;
Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
font-weight : $ bodyFontWeightBold ;
Après vos modifications, le fichier theme.scss.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Trouvez et modifiez le fichier timber.scss.liquid
.
Utilisez le raccourci clavier rechercher pour trouver ce code :
.quantity-selector {
display : inline-block ;
}
}
Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
.product-single__title {
font-weight : $ bodyFontWeightBold ;
}
Insérez ce code à la fin du fichier :
.product-unit-price {
color : rgba ( $ colorTextBody , 0.6 );
display : block ;
font-family : $ headerFontStack ;
font-size : em ( 12px );
}
Après vos modifications, le fichier timber.scss.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour des modèles
Recherchez et ouvrez le dossier Templates (Modèles).
Trouvez et modifiez le fichier customers/order.liquid
.
Utilisez le raccourci clavier rechercher pour localiser le code :
{%- else -%}
{{ line_item . original_price | money }}
{%- endif -%}
Ajoutez ce code sous le code de l’étape 3 :
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
Après vos modifications, le fichier customers/order.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour de JavaScript
Trouvez et modifiez theme.js
dans Assets (Ressources).
Utilisez le raccourci clavier rechercher pour trouver la ligne qui contient .shopify-payment-button
et remplacez-la par :
$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 )
Cet extrait de code doit ressembler à ceci :
Recherchez ce code :
else {
this . selectors . $comparePrice . addClass ( ' hide ' ). html ( '' );
this . selectors . $comparePriceA11y . attr ( ' aria-hidden ' , ' true ' );
}
Ajoutez ce code en dessous :
// 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 ' );
}
Le résultat ressemblerait à ceci :
Utilisez le raccourci clavier rechercher pour trouver ce code :
. attr ( ' data-zoom ' )
});
});
Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
},
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 ;
Le résultat ressemblerait à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour du modèle de panier
Recherchez et ouvrez le dossier Sections .
Modifiez le fichier cart-template.liquid
.
Utilisez le raccourci clavier rechercher pour trouver le code <span class="order-discount h5">{{ item.final_price | money }}</span>
.
Remplacez la ligne par ce code :
<span class="order-discount order-discount--price h5">{{ item . final_price | money }} </span>
Trouvez la première occurrence du code {%- 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 -%}
Ajoutez cet extrait de code au-dessus du code de l’étape 5 :
{%- if item . variant . available and item . variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : item , available : item . variant . available %}
{%- endif -%}
Après vos modifications, le fichier cart-template.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour de votre produit en vedette
Recherchez et ouvrez le dossier Sections .
Modifiez le fichier featured-product.liquid
.
Utilisez le raccourci clavier rechercher pour trouver la ligne avec itemprop="name"
et remplacez-la par :
<h1 class="product-single__title" itemprop="name">{{ title }} </h1>
Recherchez le code contenant 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 %}
Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
{% include 'product-unit-price' , variant : variant , available : true %}
Après vos modifications, le fichier featured-product.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour de votre modèle de produit
Recherchez et ouvrez le dossier Sections .
Modifiez le fichier product-template.liquid
.
Utilisez le raccourci clavier rechercher pour trouver la ligne avec itemprop="name"
et remplacez-la par :
<h1 class="product-single__title" itemprop="name">{{ product . title }} </h1>
Utilisez le raccourci clavier rechercher pour localiser le code :
{% 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 %}
Ajoutez cette ligne ci-dessous :
{% include 'product-unit-price' , variant : variant , available : true %}
Après vos modifications, le fichier product-template.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour des paramètres régionaux
Recherchez et ouvrez le dossier Locales (Paramètres régionaux).
Ouvrez et modifiez le fichier en.default.json
.
Utilisez le raccourci clavier rechercher pour trouver la ligne qui contient refresh_page
et remplacez-la par :
"refresh_page" : "choosing a selection results in a full page refresh" ,
"unit_price_separator" : "per"
Le résultat ressemblerait à ceci :
Recherchez la ligne qui contient full_details
et remplacez-la par :
"full_details" : "Full details" ,
"unit_price_label" : "Unit price"
Le résultat ressemblerait à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut .
Cliquez sur Modifier la langue du thème , puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.
Saisissez Unit Price
dans le champ rechercher.
Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save .
Étapes pour Venture
Les prix unitaires ont été ajoutés au thème Venture pour les versions 9.4.0 et supérieur. Si vous ne pouvez pas mettre à jour votre thème sur la dernière version, suivez ces étapes pour appliquer la personnalisation des prix unitaires aux versions antérieures d’Venture.
Modifier le fichier de langue de votre thème
Dans le répertoire Locales (Paramètres régionaux), cliquez sur en.default.json
.
Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient refresh_page
:
"refresh_page" : "choosing a selection results in a full page refresh"
Ajoutez le code suivant au-dessus de la ligne qui se trouve à l’étape 2 :
"unit_price_separator" : "per" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient stock_unavailable
:
"stock_unavailable" : "The item could not be added to your cart because there are not enough in stock."
Ajoutez le code suivant au-dessus de la ligne trouvée à l’étape 4 :
"unit_price_label" : "Unit price" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la feuille de style de votre thème
Dans le répertoire Assets (Ressources), cliquez sur theme.scss.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne .product-single__policies {
:
.product-single__policies {
font-size : em ( $ font-size-base - 1 );
}
Ajoutez le code suivant en dessous de la balise de fermeture }
du bloc de code trouvé à l’étape 2 :
.product-unit-price {
font-size : em ( 12 );
color : $ color-body-text ;
}
.product-card__unit-price {
display : block ;
}
Après vos modifications, le fichier theme.scss.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Saisissez le nom product-unit-price
.
Ajoutez le code suivant dans 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>
Cliquez sur Enregistrer pour confirmer vos modifications.
Dans le répertoire Snippets (Extraits), cliquez sur product-card.liquid
.
Utilisez le raccourci clavier rechercher pour trouver la ligne <a href="{{ product.url | within: collection }}"
.
Ajoutez le code suivant au-dessus de la ligne qui se trouve à l’étape 2 :
{%- assign current_variant = product . selected_or_first_available_variant -%}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne <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>
Ajoutez le code suivant au-dessus de la balise de fermeture </div>
trouvée à l’étape 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 -%}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre page de panier
Dans le répertoire Sections , cliquez sur cart-template.liquid
.
Utilisez le raccourci clavier rechercher pour trouver la première instance de <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 -%}
Ajoutez le code suivant sous la balise endif
trouvée à l’étape 2 :
{%- if item . unit_price_measurement -%}
{% include 'product-unit-price' , product_variant : item %}
{%- endif -%}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour trouver la deuxième instance de <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}}
Ajoutez le code suivant sous la deuxième balise de fermeture {{/if}}
trouvée à l’étape 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}}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre page de produits en vedette
Dans le répertoire Sections , cliquez sur featured-product.liquid
.
Utilisez le raccourci clavier rechercher pour trouver la ligne {% assign current_variant = product.selected_or_first_available_variant %}
.
Ajoutez le code suivant sous la ligne qui se trouve à l'étape 2 :
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient <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 %}
Sous cette balise ul
, recherchez le code {% if section.settings.stock_enable %}
.
Ajoutez le code suivant au-dessus du bloc if
trouvé à l’étape 6 :
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modification du modèle de la page de produits
Dans le répertoire Sections , cliquez sur product-template.liquid
.
Utilisez le raccourci clavier rechercher pour trouver la ligne {% assign current_variant = product.selected_or_first_available_variant %}
.
Ajoutez le code suivant sous la ligne qui se trouve à l'étape 2 :
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient <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 %}
Sous cette balise ul
, recherchez le code {% if section.settings.stock_enable %}
.
Ajoutez le code suivant au-dessus du bloc if
trouvé à l’étape 5 :
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de commande de vos clients
Dans le répertoire Templates (Modèles), cliquez sur customers/order.liquid
.
Utilisez le raccourci clavier rechercher pour trouver la ligne <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>
Remplacez le code trouvé à l’étape 2 par le code suivant :
<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>
Après vos modifications, le fichier customers/order.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modification du fichier JavaScript de votre thème
Dans le répertoire Assets (Ressources), cliquez sur theme.js
.
Utilisez le raccourci clavier rechercher pour trouver la ligne // Create item's data object and add to 'items' array
.
Ajoutez le code suivant au-dessus de la ligne qui se trouve à l’étape 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
};
}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour trouver la ligne vendor: cartItem.vendor,
Ajoutez le code suivant sous la ligne qui se trouve à l'étape 4 :
unitPrice : unitPrice ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour trouver la ligne shopifyPaymentButton: '.shopify-payment-button'
.
Remplacez la ligne trouvée à l’étape 6 par le code suivant :
shopifyPaymentButton : ' .shopify-payment-button ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
unitPriceContainer : ' [data-unit-price-container] '
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour trouver la ligne _updateSKU: function(evt) {
.
Ajoutez le code suivant sous la ligne qui se trouve à l’étape 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 ;
},
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne 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 );
}
Ajoutez le code suivant sous la balise de fermeture }
trouvée à l’étape 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 '
);
}
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut .
Cliquez sur Modifier la langue du thème , puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.
Saisissez Unit Price
dans le champ rechercher.
Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save .
Étapes pour Supply
Les prix unitaires ont été ajoutés au thème Supply pour les versions 8.3.0 et supérieur. Si vous ne parvenez pas à mettre à jour votre thème sur la dernière version, suivez ces étapes pour appliquer la personnalisation des prix unitaires aux versions précédentes de Supply.
Recherchez et ouvrez le dossier Snippets (Extraits).
Sélectionnez Add a new snippet (Ajouter un nouvel extrait).
Saisissez le nom product-unit-price
.
Copiez et collez le code suivant dans le fichier et sélectionnez Enregistrer .
{%- 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>
Après vos modifications, le fichier product-unit-price.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de produit en vedette
Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier featured-product.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne {% include 'price' with price %}
dans le fichier:
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with price %}
</span>
</li>
Ajoutez le code suivant dans la </span>
de fermeture de l’extrait de l’étape 2 :
{% include 'product-unit-price' variant : variant %}
Après vos modifications, le fichier featured-product.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre produit
Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier product-template.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne {% include 'price' with variant.price %}
dans le fichier:
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with variant . price %}
</span>
</li>
Ajoutez le code suivant dans la </span>
de fermeture de l’étape 2 :
{% include 'product-unit-price' , variant : variant %}
Après vos modifications, le fichier product-template.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier product-grid-item.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne {% if on_sale and section.settings.product_show_saved_amount %}
dans le fichier:
{% 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>
Remplacez le code par l'extrait suivant :
{%- 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 %}
Après vos modifications, le fichier product-grid-item.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier l’extrait de l’article de liste de produits
Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier product-list-item.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne <div class="product-item--price text-center">
dans le fichier:
<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>
Remplacez le code par l'extrait suivant :
<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>
Après vos modifications, le fichier product-list-item.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier search-result-grid.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne {% if on_sale and section.settings.product_show_saved_amount %}
dans le fichier:
{% 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>
Remplacez le code par l'extrait suivant :
{%- 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 %}
Après vos modifications, le fichier search-result-grid.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre panier
Recherchez et ouvrez le dossier Templates (Modèles), puis sélectionnez le fichier cart.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne <del class="cart-original-price order-discount--cart-price">
dans le fichier:
<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 -%}
Remplacez le code par l'extrait suivant :
<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 -%}
Après vos modifications, le fichier cart.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de commande
Recherchez et ouvrez le dossier Templates (Modèles), puis sélectionnez le fichier customers/order.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne <td class="text-right" data-label="customer.order.price">
dans le fichier:
<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>
Ajoutez le code suivant au-dessus de la </td>
de fermeture de l’étape 2 :
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
Après vos modifications, le fichier customers/order.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la mise en page de votre thème
Recherchez et ouvrez le dossier Layout (Mise en page), puis sélectionnez le fichier de theme.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne contenant only_left:
dans le fichier:
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 }}
},
Ajoutez le code suivant au-dessus de only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
de l’étape 2 :
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
Après vos modifications, le fichier theme.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thèmes
Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier theme.scss.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne .product-item--price {
dans le fichier:
.product-item--price {
@include clearfix;
.h1 {
margin-bottom : $ gutter / 2 ;
}
span {
line-height : 22px ;
}
small {
white-space : nowrap ;
}
}
Remplacez le code par l'extrait suivant :
.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 ;
}
}
Après vos modifications, le fichier theme.scss.liquid
devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier un code de thème JavaScript
Recherchez et ouvrez le dossier Assets (Ressources), puis sélectionnez le fichier theme.js.liquid
.
Utilisez le raccourci clavier rechercher pour localiser la ligne originalSelectorId: 'productSelect-' + sectionId,
dans le fichier:
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 '
}
Ajoutez le code suivant au-dessus de originalSelectorId: 'productSelect-' + sectionId,
de l’étape 2 :
unitPriceContainer : ' [data-unit-price-container] ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne productVariantCallback: function(variant) {
dans le fichier:
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 ' );
}
Ajoutez le code suivant sous if (variant) {
de l’étape 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 ' );
}
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
dans le fichier:
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> ' ;
Remplacez la ligne customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
par l’extrait suivant :
customPriceFormat += ' <span aria-hidden="true"><small><s> ' + comparePrice + ' </s></small></span> ' ;
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
dans le fichier:
} 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 ();
}
Ajoutez le code suivant sous l’extrait de l’étape 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 ;
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le fichier de langue de votre thème
Recherchez et ouvrez le dossier Locales (Paramètres régionaux), puis sélectionnez le fichier en.default.json
.
Utilisez le raccourci clavier rechercher pour localiser la ligne contenant "refresh_page"
dans le fichier:
"accessibility" : {
"refresh_page" : "choosing a selection results in a full page refresh"
} ,
Ajoutez le code suivant au-dessus de "refresh_page"
de l’étape 2 :
"unit_price_separator" : "per" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Utilisez le raccourci clavier rechercher pour localiser la ligne contenant "will_be_in_stock_after"
dans le fichier:
"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"
}
Ajoutez le code suivant après "will_be_in_stock_after"
de l’étape 5 :
"unit_price_label" : "Unit price" ,
Après vos modifications, le résultat devrait ressembler à ceci :
Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut .
Cliquez sur Modifier la langue du thème , puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.
Recherchez Unit Price
dans la barre de saisie.
Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save .