カテゴリー・商品検索ページ
▼カテゴリー・商品検索ページ内基本タグ
タグ | 説明 | 入力例 | |
---|---|---|---|
パンくずリストを表示します。 | |||
カテゴリ名を表示します | |||
【商品管理>カテゴリーの設定>カテゴリーの設定】で設定したカテゴリ識別コードを表示します。
※classやid名、画像名などにお使いいただくと、カテゴリーごとに切り分けすることが可能です。 |
|||
カテゴリー別イメージのパスを表示します。 | <img src="<{$category.image_url}>"> |
||
カテゴリーをさらに絞り込むためのリンクプルダウンを表示します。 | |||
おすすめ順のリンクを表示します。 <{$sort_recommend_start}>~<{$sort_recommend_end}>の間は自由に設定することができます。 |
<{$sort_recommend_start}>おすすめ順<{$sort_recommend_end}> |
||
新着商品順のリンクを表示します。 <{$sort_new_start}>~<{$sort_new_end}>の間は自由に設定することができます。 |
<{$sort_new_start}>新着順<{$sort_new_end}> |
||
価格が高い順のリンクを表示します。 <{$sort_price_high_start}>~<{$sort_price_high_end}>の間は自由に設定することができます。 |
<{$sort_price_high_start}>価格が高い順<{$sort_price_high_end}> |
||
価格が安い順のリンクを表示します。 <{$sort_price_low_start}>~<{$sort_price_low_end}>の間は自由に設定することができます。 |
<{$sort_price_low_start}>価格が安い順<{$sort_price_low_end}> |
||
検索したキーワードを表示します。 | <{$keyword}>で検索した結果 |
||
表示件数(検索結果の表示件数も含む)を表示します。 | |||
商品一覧を表示します。グリッド形式/リスト形式に切り替えることができます。 ▼このタグを使用した際、崩れて表示されてしまった場合はこちらをご確認ください。 管理画面>商品カテゴリーページ編集画面の、CSS編集部分に下記cssを追加すると、グリッド形式の初期値デザインが適用され正しく表示されるようになります。 /* 件数・表示方法 */ .searchHead{ margin:10px 15px 20px; font-size:12px; text-align:right; display:table; } .viewCount,.viewSelect{ display:table-cell; width:50%; vertical-align:middle; text-align:right; } .viewCount select{ width: 50%; border: 1px solid #4C4C4C; line-height: 1; font-size: 14px; } .viewCount *,.viewSelect *{ vertical-align:middle; } .viewSelect img{ margin:0 1px; } /* 商品リストグリッド */ .listGrid{ padding:0 5px; } .listGrid #list_item li{ background:#fff; display:inline-block; width: 32%; margin: 0 0 15px 0; padding: 0 1%; vertical-align: top; } .listGrid #list_item li:nth-child(3n+1){ padding-left:0; } .listGrid #list_item li:nth-child(3n){ padding-right:0; } .listGrid #list_item .itemImgWrap{ width:100%; display:table; margin-bottom:5px; } .listGrid #list_item .itemImg2{ margin:0 auto 8px; text-align:center; height:100px; display:table-cell; vertical-align:middle; width:100%; } .listGrid #list_item .itemImg2 img{ max-height:100px; max-width:100%; } .listGrid #list_item .itemDetail p{ font-size:12px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; width:100%; text-align:left; } .listGrid #list_item .itemDetail p.price{ font-size:13px; } /* ページャー */ .pager{ text-align:center; margin:15px auto 30px; } .pager li{ display:inline; vertical-align: middle; } .pager li a{ display:inline-block; } .pager li span{ display: inline-block; width:28px; line-height: 28px; border: 1px solid #666; background:#666; color:#fff; } .pager li .btn-prev,.pager li .btn-next{ background:none; text-indent:-9999em; } .pager li a span{ background:#fff; border-color:#ccc; color:#ccc; } .pager li .btn-prev{ background:url(/smartphone/images/icon_arrow_prev.png) no-repeat center center; -webkit-background-size: 14px 14px; -moz-background-size: 14px 14px; } .pager li .btn-next{ background:url(/smartphone/images/icon_arrow_next.png) no-repeat center center; -webkit-background-size: 14px 14px; -moz-background-size: 14px 14px; } |
|||
商品一覧を表示します。 ※まとめ買いなどの新機能には対応しておりません。 |
|||
他のカテゴリーへのリンクプルダウンを表示します。 |
▼検索結果表示用タグ
タグ | 説明 | 入力例 | |
---|---|---|---|
検索結果(キーワード)を表示します。 | キーワード:<{$search.result_keyword}> |
||
検索結果(カテゴリ)を表示します。 | カテゴリ:<{$search.result_category}> |
||
検索結果(価格帯:低)を表示します。 | 価格帯:
<{if $search.result_price_low !== ''}>
<{$search.result_price_low}>円
<{/if}>
~
<{if $search.result_price_high !== ''}>
<{$search.result_price_high}>円
<{/if}>
|
||
検索結果(価格帯:高)を表示します。 | |||
検索結果(独自商品コード)を表示します。 |
表示制御に便利なifタグ
<{if $category.image_url}> <img src="<{$category.image_url}>" class="catImage"> <{/if}>
上のように書いた場合、今表示されているカテゴリーに対して「カテゴリー別イメージ」の登録があれば、<{if $category.image_url}><{/if}>で囲んだ中身を表示します。登録がない場合は何も表示されません。
<{if }>の中にはどのタグでも記述が可能です。表示制御にご利用ください。
Copyright (c) , GMO makeshop Co. Ltd.All Rights Reserved.