カラーミーのカートアイコンの商品数部分に条件分岐を組み込む

0なら表示いらんよね、という考え。

元々はこう
条件分岐を組み込む

元々はこう

カート部分はこんな感じになってる。

<div class="l-header-cart">
    <a href="<{$view_cart_url}>">
        <img src="https://img.shop-pro.jp/tmpl_img/86/icon-cart.png" alt="カートを見る" />
        <span class="p-global-header__cart-count">
            <{$incart_total_count}>
        </span>
    </a>
</div>

カートのアイコンの隣にカートに入れた商品数が記載される。

<{$incart_total_count}>が出力するためのタグで、カートが空っぽだと「0」になる。

条件分岐を組み込む

カラーミーのデフォは横並びだし、2桁とかになったら幅が変わるし、なんだかなーって感じ。
そのままだとどうなのって、Amazonみたいにカートアイコンと数字が組み合わさってるならいいんだけど、みたいなね。

カラーミーの独自タグは条件分岐を作れる。

0って出るのは邪魔くさいよね、ダサいよね、表示するのはいいけどカートに入ってるときだけあればいいよねって場合は、「0のときは非表示」にすればいい。

<div class="l-header-cart">
    <a href="<{$view_cart_url}>">
        <img src="https://img.shop-pro.jp/tmpl_img/86/icon-cart.png" alt="カートを見る" />
<{if $incart_total_count != "0"}>
        <span class="p-global-header__cart-count">
            <{$incart_total_count}>
        </span>
<{/if}>
    </a>
</div>

条件分岐が使えるということは、要素の出力だけでなくclassの切り替えもできるということ。
結構自由度がある。

ifがあるからelseも使える。

<{if $incart_total_count == "0"}>
<{else}>
<span class="p-global-header__cart-count">
    <{$incart_total_count}>
</span>
<{/if}>

elseifも使える。

<{if $incart_total_count == "0"}>
//0だったら
<{elseif $incart_total_count == "1"}>
//1だったら
<{else}>
//それ以外
<{/if}>

そんな感じで。

ページ別の条件分岐は以前やってるのでそちらを参照。