KH-WEBLOG TOP > WEBメモ > makeshop > makeshopのクリエイターモードでパンくずを実装する方法

makeshopのクリエイターモードでパンくずを実装する方法

最終更新日:

makeshopのクリエイターモードでのパンくずリストの表示に少し手間取ってのでメモ。

コーディング・WordPress化作業を代行します

カテゴリページのパンくずリストの表示

カテゴリページでは以下のようなコードでパンくずを表示します。

<div id="pankuzu">
<a href="/">TOP</a>
<{section name=i loop=$category.breadcrumb_list.list}>
    <a href="<{$category.breadcrumb_list.list[i].url}>">
        <{$category.breadcrumb_list.list[i].name}>
    </a>
<{/section}>
</div>

makeshopではTOPを取得するコードがありませんので、トップページは直書き。
あとは
クリエイターモードタグリファレンス
↑こちらのmakeshopのタグリファレンスを参考に、カテゴリをループで回します。

商品詳細ページでのパンくずリストの表示

今回手間取ったのはこちらの詳細ページでした。
タグリファレンスのタグをどう回したら良いか調べてもあまり出てきませんでしたので
結果以下のコードで表示可能でした。

<div id="pankuzu">
 <{if $item.breadcrumb_list_group.has_item}>
        <{section name=i loop=$item.breadcrumb_list_group.list}>
        <div class="itempankuzu">
            <{if $item.breadcrumb_list_group.list[i].has_item}>
                <a href="/">TOP</a>
                <{section name=j loop=$item.breadcrumb_list_group.list[i].list}>
                    <a href="<{$item.breadcrumb_list_group.list[i].list[j].url}>"><{$item.breadcrumb_list_group.list[i].list[j].name}></a>
                <{/section}>
            <{/if}>
        </div>
        <{/section}>
 <{/if}>
</div>

上記のパンくずでは商品に設定されているすべてのパンくず(カテゴリ)が表示されます。
もし1つめのパンくずのみ表示したい場合は

 <{if $item.breadcrumb_list_group.has_item}>
        <{section name=i loop=$item.breadcrumb_list_group.list}>
        <{if $smarty.section.i.index == 0}><!-- 1つ目のパンくずのみ表示 -->
        <div class="itempankuzu">
            <{if $item.breadcrumb_list_group.list[i].has_item}>
                <a href="/"><img src="https://gigaplus.makeshop.jp/watanabe8/img/phome.svg" alt="home"></a>
                <{section name=j loop=$item.breadcrumb_list_group.list[i].list}>
                    <a href="<{$item.breadcrumb_list_group.list[i].list[j].url}>"><{$item.breadcrumb_list_group.list[i].list[j].name}></a>
                <{/section}>
            <{/if}>
        </div>
        <{/if}><!-- 1つ目のパンくずのみ表示 end-->
        <{/section}>
 <{/if}>

上記のようなループの1つ目のみを表示する形にすることで解決しました。

コーディング・WordPress化作業を代行します

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事