EC-CUBEで商品規格一覧表を表示する方法

デフォルトでは購入したい規格を選択するためのプルダウンでしかどんな規格があるのか確認できません。

またどの規格がいくらなのかもわからないため、ユーザーに不安感を与えてしまい購入率が低下することも考えられます。そこで、どの規格がいくらなのかが確認できる一覧表が詳細ページに出力されるように修正します。EC-CUBEのバージョンは2.11を利用しました。

手順

1./PATH/TO/data/class_extends/pages_extends/products/LC_Page_Products_Detail_EX.php

商品詳細用のコントローラーの拡張クラスのactionメソッドに規格を取得するコードを追記します。

/**
 * action
 */
function action() {
	parent::action();
	// 商品規格情報の取得
	$product_id = $this->lfCheckProductId( $this->objFormParam->getValue( 'admin' ), $this->objFormParam->getValue( 'product_id' ) );
	$this->arrProductsClassList = $this->lfGetProductsClass( $product_id );
}

2./PATH/TO/data/Smarty/templates/テンプレート名/products/detail.tpl

1でその商品の規格の情報が取得できましたので、詳細ページ用のテンプレートに表として出力します。

<!--{if $arrProductsClassList|@count > 1}-->
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<th>規格名</th>
		<th>価格</th>
	</tr>
	<!--{section name=i loop=$arrProductsClassList}-->
	<tr>
		<td>
			<!--{$arrProductsClassList&#91;i&#93;.classcategory_name1|h}-->
			<!--{if $arrProductsClassList&#91;i&#93;.classcategory_name2 != ''}-->
				: <!--{$arrProductsClassList&#91;i&#93;.classcategory_name2|h}-->
			<!--{/if}-->
		</td>
		<td>
			<!--{$arrProductsClassList&#91;i&#93;.price02|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->円
		</td>
	</tr>
	<!--{/section}-->
</table>
<!--{/if}-->

あとはCSSで装飾します。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく