カラーミーショップにパンくずリストを追加する方法

Pocket

前回はカラーミーショップの検索結果ページをカスタマイズする方法を紹介しました。検索フォームの設置方法や検索キーワードの表示方法をまとめています。

ここではECサイトでは非常に重要なパンくずリストを追加する方法を紹介します。

カラーミーのパンくずリストをカスタマイズ

カラーミーショップの独自タグでパンくずリスト用のものが用意されています。

  • bid_link : 大カテゴリーリンク
  • bid_name : 大カテゴリー名
  • sid_link : 小カテゴリーリンク
  • sid_name : 小カテゴリー名
  • product_link : 商品リンク
  • product_name : 商品名

グループ用のパンくずリストはループで取得。

<{section name=num loop=$group_breadcrumb}>
  <li>
    <a href="<{$group_breadcrumb[num].link_url}>">
      <{$group_breadcrumb[num].name}>
    </a>
  </li>
<{/section}>

あとはこれを組み合わせて横並びのリストを作ればOK。

<ol>
  <!-- トップページへのリンク -->
  <li><a href="<{$home_url}>">トップ</a></li>

  <!-- グループ一覧でなければ表示 -->
  <{if $smarty.get.mode != "grp"}>

    <!-- 大カテゴリー -->
    <{if $bid_name != ""}>
      <li><a href="<{$bid_link}>"><{$bid_name}></a></li>
    <{/if}>

    <!-- 小カテゴリー -->
    <{if $sid_name != ""}>
      <li><a href="<{$sid_link}>"><{$sid_name}></a></li>
    <{/if}>
    
  <{else}>

    <!-- グループページならこちらを表示 -->
    <{section name=num loop=$group_breadcrumb}>
      <li>
        <a href="<{$group_breadcrumb[num].link_url}>">
          <{$group_breadcrumb[num].name}>
        </a>
      </li>
    <{/section}>
  <{/if}>
</ol>
<!-- /breadcrumb -->

カラーミーショップでBootstrapのパンくずリストを使う方法

カラーミーショップでBootstrapを使う方法に書いたように、Bootstrapを使う準備ができていれば、パンくずリストでもBootstrapを使用可能。

class名の追加だけでBootstrap化できてしまいます。

<ol class="breadcrumb">

    <!-- パンくずリストの中身 -->

</ol>
<!-- /breadcrumb -->