EC-CUBE4では、デフォルトでは価格表記の円マークが下記のように全角になっています。
デザインを反映しようとした際に、デザイン上では円マークが半角になっていることって多いんですよね。そこで今回は、価格表記の円マークを半角で表示する方法をご紹介したいと思います。
EC-CUBE4で価格表記の円マークを半角にする方法
商品詳細を例にご紹介いたしますが、商品一覧などでもやり方は同じです。
「app/template/default/Product/detail.twig」を開きます。
(テンプレートを変更している場合はdefaultの部分を適用テンプレートに合わせてください)
価格表記をしている箇所は下記の通りです。
{# 通常価格 #}
{% if Product.hasProductClass -%}
<div class="ec-productRole__priceRegular">
{% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
<span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
{% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
<span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
{% endif %}
</div>
{% else %}
{% if Product.getPrice01Max is not null %}
<span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
{% endif %}
{% endif %}
{# 販売価格 #}
<div class="ec-productRole__price">
{% if Product.hasProductClass -%}
{% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
<div class="ec-price">
<span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
<span class="ec-price__tax">{{ '税込'|trans }}</span>
</div>
{% else %}
<div class="ec-price">
<span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
<span class="ec-price__tax">{{ '税込'|trans }}</span>
</div>
{% endif %}
{% else %}
<div class="ec-price">
<span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
<span class="ec-price__tax">{{ '税込'|trans }}</span>
</div>
{% endif %}
</div>「{{ Product.getPrice02IncTaxMin|price }}」を「¥{{ Product.getPrice02IncTaxMin|number_format }}」に、「{{ Product.getPrice02IncTaxMax|price }}」を「¥{{ Product.getPrice02IncTaxMax|number_format }}」に書き換えます。
{# 通常価格 #}
{% if Product.hasProductClass -%}
<div class="ec-productRole__priceRegular">
{% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
<span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">¥{{ Product.getPrice02IncTaxMin|number_format }}</span></span>
<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
{% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
<span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">¥{{ Product.getPrice02IncTaxMin|number_format }} ～ ¥{{ Product.getPrice02IncTaxMax|number_format }}</span></span>
<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
{% endif %}
</div>
{% else %}
{% if Product.getPrice01Max is not null %}
<span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：¥{{ Product.getPrice02IncTaxMin|number_format }}</span>
<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
{% endif %}
{% endif %}
{# 販売価格 #}
<div class="ec-productRole__price">
{% if Product.hasProductClass -%}
{% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
<div class="ec-price">
<span class="ec-price__price price02-default">¥{{ Product.getPrice02IncTaxMin|number_format }}</span>
<span class="ec-price__tax">{{ '税込'|trans }}</span>
</div>
{% else %}
<div class="ec-price">
<span class="ec-price__price price02-default">¥{{ Product.getPrice02IncTaxMin|number_format }} ～ ¥{{ Product.getPrice02IncTaxMax|number_format }}</span>
<span class="ec-price__tax">{{ '税込'|trans }}</span>
</div>
{% endif %}
{% else %}
<div class="ec-price">
<span class="ec-price__price">¥{{ Product.getPrice02IncTaxMin|number_format }}</span>
<span class="ec-price__tax">{{ '税込'|trans }}</span>
</div>
{% endif %}
</div>「¥」が半角円マークで、”price”を”number_format”に変えて価格を円マークなしで数値のみ出力しています。
detail.twigを書き換えたら、[コンテンツ管理] – [キャッシュ管理]でキャッシュをクリアしてください。
あとがき
簡単に円マークを半角にできましたね。
EC-CUBE4で円マークを半角にしたい場合は、ぜひ参考にしていただければと思います。