shopifyをLPとして使いたいと考えております。
その際、カートボックスを削除したいのですが、どのようにコードを編集すればよいのでしょうか。
Topic summary
目的: ShopifyをLPとして使うため、Dawnテーマのヘッダー右上のカートボタンを非表示にしたい。
対応方法: Sections/header.liquidの492〜509行をLiquidのコメントタグ（{% comment %}〜{% endcomment %}）で包み、読み込みを停止する。削除ではなくコメントアウトにすることで、将来復活が可能。
対象コード: cartページへのリンク（<a href=“{{ routes.cart_url }}” …>）、空/有のカートでアイコンを切り替えるrender（icon-cart-empty/icon-cart）、商品数バッジ（cart-count-bubble）と視認性向上用のvisually-hiddenテキスト。
技術補足: LiquidはShopifyのテンプレート言語。コメントアウトによりヘッダーのカートアイコンと数量バッジが非表示になる。編集イメージの画像が添付済み。
状況: 具体的な手順が提示され、実装方法は明確。解決確認の返信は未記載で、議論は事実上の提案段階。
@_1121 様
サイト右上ヘッダー内のカートボタンを消す方法、と理解いたしました。
下記編集方法について記載いたします。
Sections/header.liquid の492行から509行目をコメントアウトするのが良いかと思います。
※念の為コメントアウトとは、コードではなくコメントとして認識させる方法です。実際削除してしまってもよいのですが、もし今後やっぱり使いたいとなった場合に復活できるように、「コードは残したまま読み込ませない状態」にしています。
コメントアウトは、下記のようにコードを包むことで可能です。
{% comment %}
[コード]
{% endcomment %}
492行から509行目に下記コードがあると思うので、こちらを上記のコメントアウトで包めば完了です。
<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<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>
{%- endif -%}
</a>
実際の記載イメージ画像も添付いたします。
ご参考になれば幸いです。
よろしくお願いいたします。
3 Likes