Liquid、JavaScriptなどに関する質問
テーマdawnでカゴに入れた時に表示される数字の●デザインを変更したいです。
どうすれば良いでしょうか?
最終的には参考画像のようにしたいと考えております。
お手数おかけしますが、どうかご教授お願いいたします。
解決済! ベストソリューションを見る。
成功
ご確認ありがとうございます!
とんでもございません、おっしゃる通りでcart-count-bubbleという箇所のデザインを変更していく形になります。
こちらで以下の画像のように実装をしてみましたので、記載している実装手順踏んでいただけますと同様に実装できるかと思われます。
(Dawnの最新版で実装していますのでお使いのバージョンによって適宜変更が必要になります)
実装手順
1. header.liquid 273行目 - 275行目を変更する
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
// 変更後
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">[{{ cart.item_count }}]</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{{ cart.item_count }}と記載されている箇所を[]で囲んでいます
2. 以下のcssをcomponent-cart-notification.cssの最下部に追加する
/* 追加css */
.cart-count-bubble {
background: white;
color: black;
font-weight: bold;
}
ご参考になれば幸いです。
こちら質問拝見させていただきました。
CART [1]と記載されている画像が添付されているかと思うのですが、こちらカートアイコンに重ねて[1]と表示したいという意図であっていますでしょうか?
デザイン変更する場合、コーディングが必要になりますが以下関連するコード箇所になりますので参考になれば幸いです。
header.liquid 273行目 - 275行目
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
こちらのコードに記載されているcart-count-bubbleというクラスがご指摘いただいている箇所のデザインになりますので、こちらのクラスに対してcssをテーマ編集で編集する形になるかと思います。
ご参考になれば幸いです。
ご確認ありがとうございます。
認識の通りでございます。箇所を確認できました。
大変素人な質問であれば申し訳ございません。
cart-count-bubbleのデザインを変更するには新たにCSSを作成して該当する[]のデザインになるようコードを組んでいくということでしょうか?
どのCSSをどのように修正すれば良いかが理解できておらず、的外れな質問であれば申し訳ございません。
大変お手数おかけしますが、またお手隙の際にご確認をいただけますと幸いです。
成功
ご確認ありがとうございます!
とんでもございません、おっしゃる通りでcart-count-bubbleという箇所のデザインを変更していく形になります。
こちらで以下の画像のように実装をしてみましたので、記載している実装手順踏んでいただけますと同様に実装できるかと思われます。
(Dawnの最新版で実装していますのでお使いのバージョンによって適宜変更が必要になります)
実装手順
1. header.liquid 273行目 - 275行目を変更する
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
// 変更後
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">[{{ cart.item_count }}]</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{{ cart.item_count }}と記載されている箇所を[]で囲んでいます
2. 以下のcssをcomponent-cart-notification.cssの最下部に追加する
/* 追加css */
.cart-count-bubble {
background: white;
color: black;
font-weight: bold;
}
ご参考になれば幸いです。
ご丁寧な解説ありがとうございます!
無事に実装することができました。
非常にわかりやすくて大変助かりました。ベストソリューションを押させていただきましたので、またご不明点が出た際は是非よろしくお願いいたします。
こちらこそベストソリューションありがとうございます!
また何か問題ありましたらぜひご連絡ください!
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024