テーマ【dawn】カゴアイコンの●デザインについて

[556]

テーマdawnでカゴに入れた時に表示される数字の●デザインを変更したいです。
どうすれば良いでしょうか？

最終的には参考画像のようにしたいと考えております。

お手数おかけしますが、どうかご教授お願いいたします。

  

[nakano_thesense]

こちら質問拝見させていただきました。

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をテーマ編集で編集する形になるかと思います。

ご参考になれば幸いです。

[556]

ご確認ありがとうございます。
認識の通りでございます。箇所を確認できました。
大変素人な質問であれば申し訳ございません。
cart-count-bubbleのデザインを変更するには新たにCSSを作成して該当する［］のデザインになるようコードを組んでいくということでしょうか？
どのCSSをどのように修正すれば良いかが理解できておらず、的外れな質問であれば申し訳ございません。

大変お手数おかけしますが、またお手隙の際にご確認をいただけますと幸いです。

[nakano_thesense · Accepted solution]

ご確認ありがとうございます！

とんでもございません、おっしゃる通りで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;
}

ご参考になれば幸いです。

[556]

ご丁寧な解説ありがとうございます！
無事に実装することができました。
非常にわかりやすくて大変助かりました。ベストソリューションを押させていただきましたので、またご不明点が出た際は是非よろしくお願いいたします。

[nakano_thesense]

こちらこそベストソリューションありがとうございます！

また何か問題ありましたらぜひご連絡ください！