カラーミーSEO+をアップデートしました(ver.2.2.3)

seo+をバージョン2.2.3にアップデートしました。

既にご注文いただいた方で、再ダウンロードするのは面倒という場合は変更した箇所のコードを書いておくので、必要箇所のコードだけ書き直すor追記してご利用ください。

再ダウンロードでOKの人は、決済完了時のダウンロードURLからアップデート版を取得できます（無償）。

今回の変更点は大きく以下の３点です。

• カテゴリーページにサブカテゴリーの絞り込みを追加
• ドロワーメニューにサブカテゴリー表示を追加
• 商品ページの名入れ機能を追加

名入れ機能については、完全に存在を忘れておりましたので申し訳ない限りです。

カテゴリーページにサブカテゴリーの絞り込みを追加

カラーミーショップでは、カテゴリーを大カテゴリーと小カテゴリーの階層構造にすることができますが、これまで大カテゴリー　→　小カテゴリーへのリンクがありませんでした。

小カテゴリーへのリンクがあるほうがユーザーが目的の商品に辿り着きやすいだろうということで、下位カテゴリーがある場合はリンク表示するように変更しています。

追記する場所はどこでも良いですが、アップデート版では、商品リストの下（フリースペース２の上）にサブカテゴリーを一覧表示するように変更しています。
（↓の赤矢印の部分）

表示させたい場所に、

<!-- サブカテゴリーでしぼりこむ-->
<{if $subcategory_num != 0}>
<div style="margin:3.0rem 0;padding:1.0rem;background:#fcfcfc;">
<p>さらに絞り込み</p>
<ul>
<{foreach from=$sub_category item=subcat name=subcat}>
<li>
<a href="<{$subcat.link_url}>"><img src="<{$subcat.img_url}>" /><{$subcat.name}></a>
</li>
<{/foreach}>
</ul>
</div>
<{/if}>
<!-- // サブカテゴリーでしぼりこんだ -->

のコードを追加すればOKです。

仕上がりについてはSEO+の見本カテゴリーページをご参照ください

ドロワーメニューにサブカテゴリー表示を追加

同じく、スマホ・タブレット時のドロワーメニューに小カテゴリーリンクがなかったので追加しました。

これはコードの置き換えとCSS追記が必要です。

管理画面 > ショップ作成 > デザイン > デザイン：テンプレート編集

で、１番の「共通」をHTML/CSS編集します。

HTML側の編集

共通のHTMLをずっと下までスクロールしていくと、「ドロワーメニュー　カテゴリー」と書かれた部分が出てくるので下図表示の部分を全て削除し置き換えます。

削除した部分に次のコードを貼り付け。

<div id="ul_drwer-box_category">
 <ul>
 <{foreach from=$category item=big_cate name=key}>
  <li>
   <a href="<{$big_cate.link_url}>"><{$big_cate.name}></a>
   <{foreach from=$subcategory[$big_cate.bid] item=sub_cate name=sub_key}>
    <{if $smarty.foreach.sub_cate.first}>
     <ul>
    <{/if}>
      <li>
       <a href="<{$sub_cate.link_url}>"><{$sub_cate.name}></a>
      </li>
    <{if $smarty.foreach.sub_cate.last}>
     </ul>
    <{/if}>
   <{/foreach}>
  </li>
 <{/foreach}>
 </ul>
</div>

CSSの編集

続いて、同じ「共通」のCSSファイル（デフォルトのままなら空白）に、下記コードを追記します。

#drwer #ul_drwer-box_category li {
	height: auto;
	min-height: 4.0rem;
}
#drwer ul li > ul {
	padding-left: 2.0rem;
}

商品ページの名入れ機能を追加

自分が名入れ機能を使っていないばかりに完全に見落としていました。すみません。

テンプレート編集で３番の「商品詳細」にHTMLコードを追記します。

アップデート版では商品オプションの上に表示させていますが、formタグ内であればどこでも大丈夫です。

任意の場所に下記コードを追加。

<!-- 名入れ機能 -->
<{if $product.product_text_titles}>
<div>
 <{foreach from=$product.product_text_titles key=key item=val}>
 <p><{$val|escape}></p>
 <input type="text" name="product_text[<{$key|escape}>]" style="height:2.5rem" value="" />
 <{/foreach}>
</div>
<{/if}>