ECCUBEの最近のブログ記事

規格によって価格が変わるとき、価格が一覧できないのは不親切。

さらに、規格が一覧表示できないのも不親切だと思うの。

規格1のみしか使わないので、規格2はノータッチ。

1）規格をプルダウンからラジオボタンに変更

Smarty/templates/テーマ名/products/datail.tpl

【変更前】

<!--▼規格1-->

<ul class="clearfix">

    <li><!--{$tpl_class_name1|h}-->：</li>

    <li>

        <select name="classcategory_id1" style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->">

        <!--{html_options options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->

        </select>

        <!--{if $arrErr.classcategory_id1 != ""}-->

        <br /><span class="attention">※ <!--{$tpl_class_name1}-->を入力して下さい。</span>

        <!--{/if}-->

    </li>

</ul>

<!--▲規格1-->

【変更後】

<!--▼規格1-->

<h2>サイズの選択</h2>

<!--{html_radios name="classcategory_id1" options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->

<!--{if $arrErr.classcategory_id1 != ""}-->

<br /><span class="attention">※ <!--{$tpl_class_name1}-->を選択して下さい。</span>

<!--{/if}-->

<!--▲規格1-->

これだと、ラジオボタン表記になるものの、

○選択して下さい　○13.5mm　○15mm　○16.5mm　○18mm

となり、汎用性がないので、radioを展開する。

プルダウン用のデータなので「選択してください」って項目ができちゃうので、それは省く。

【変更後】

<!--▼規格1-->

<h2>サイズの選択</h2>

<!--{foreach from=$arrClassCat1 item="prices" key="key"}-->

<!--{if $key !="__unselected"}-->

<label/><input type="radio" name="classcategory_id1" value="<!--{$key}-->" /><!--{$prices}--></label>

<!--{$arrProductsClass}-->

<!--{$objProduct}-->

<!--{/if}-->

<!--{/foreach}-->

<!--▲規格1-->

さらに、それぞれのサイズごとの価格を表示したい。

そのためには、価格をテンプレ側に送り出さないといけない。

data/class/pages/products/LC_Page_Products_Detail.php

【変更後】追加のみ

// 商品規格情報の取得

$this->arrProductsClassList = $this->lfGetProductsClass($product_id);

Smarty/templates/テーマ名/products/datail.tpl

【変更後】

<!--▼規格1-->

<h2>サイズの選択</h2>

<!--{foreach from=$arrProductsClassList item="kikaku1" key="key"}-->

<label/><input type="radio" name="classcategory_id1" value="<!--{$kikaku1.classcategory_id1}-->" /><!--{$kikaku1.classcategory_name1}--></label>

<!--{$kikaku1.price02}-->円

<!--{/foreach}-->

<!--▲規格1-->

結局始めと全然違う変数つかってるけど、こっちだけ使った方がシンプル。

変化はないけど、一応headのjs部分でイベントを、プルダウン選択から、ラジオボタン選択に変更する。

Smarty/templates/テーマ名/products/datail.tpl

【変更前】

var $sele1 = $form.find('select[name=classcategory_id1]');

【変更後】

var $sele1 = $form.find('input[name=classcategory_id1]:radio');

■参考サイト

http://ec-cube.nakweb.com/blog/785.html

2）通常価格、販売価格のエリアに、価格が反映されるようにする。

（price01_dynamicに動的な価格が入る）

価格反映のイベントを、プルダウン選択から、ラジオボタン選択に変更する。

/js/products.js

【変更前】

      // 規格1選択時

      $('select[name=classcategory_id1]')

【変更後】

      // 規格1選択時

      $('input[name=classcategory_id1]:radio')

これで完成。