TOP < テクニカル
Open-Ecommerceは、通販物流対応WMS(倉庫管理システム)を搭載し、version2.0にアップグレードされました。

商品カテゴリ

商品カテゴリの部分のパーツを配置します。

商品カテゴリの部分のコード

商品カテゴリの部分のコードは、次のように配置します。

商品カテゴリ表示用のdivタグの配置

カテゴリ表示を「[ALINOUS_HOME]/templetes/index.html」のHTMLに配置する為には、次のようなコードを書きます。

ALINOUS_HOME/templetes/index.htmlの一部
<!--商品カテゴリー-->
<div id="bar_category_head">
  <h2>商品カテゴリー</h2>
</div>
<div class="side_box">
  <p class="text01">カテゴリ検索</p>
  <span alns:iterate="@CATEGORIES" alns:variable="oneRecord"> 
    <ul class="category01">
      <li class="navi01"><a href="{$oneRecord.URL}">{$oneRecord.TITLE}</a></li>
    </ul>
    <span alns:if="{BOOL($oneRecord.hasChild != 'false')}"> 
       <ul class="category02">
         <span alns:iterate="@oneRecord.SUB_CATEGORIES" alns:variable="subRecord">
           <li class="navi02"><a href="{$subRecord.URL}">{$subRecord.TITLE}</a></li>
         </span> 
       </ul>
    </span>
  </span>
  <div class="iespan_side"></div>
</div>
<!--商品カテゴリー END-->

spanタグが若干多いため複雑に見えますが、結局行っている内容は、ul,liタグを利用してリストを使ったメニューを作成しているだけです。
デザインをカスタマイズする際には、

  • リストのスタイルシート
  • 大カテゴリのスタイルシートのクラスと詳細カテゴリのクラス
の2つに注目してカスタマイズを行えば、htmlさえ分かってしまえば大丈夫です。

[↑ページトップ]