suzuboss.info

実際に使ってみた・試してみた経験が誰かの「かゆいところに手が届く」なら幸いです。

Web系

EC-CUBEで規格以外に項目を追加した①

投稿日:2014/10/29 更新日:

試行錯誤の末に問題なく動作するようになったと思うので、メモ的に残しておきます。

利用したEC-CUBEのバージョンは『2.13.2』です。テンプレートは『EC-CUBE on Bootstrap3』にて制作されたものを利用させていただきます。開発中との事ですが、今後も期待しております。

 

最終的に仕上げたい感じ

商品詳細ページに『規格』が2つ用意されていますが、それ以上に必要な項目があったのでプルダウン形式のものを追加することにしました。規格①はカラー、規格②はサイズ、規格以外の追加項目として商品全てに関わる、『配置』と『仕上がり』という項目を追加しました。

名称未設定-1

DBにテーブル追加

追加した項目をマスターデータとして登録すると楽かな?と思ったので、phpMyAdminにてテーブルを追加しました。マスターデータとして扱うにはテーブル名の先頭を『mtb_』とします。フィールド数や名前などは他のテーブル参照で。

  • 配置テーブル→mtb_position
  • 仕上がりテーブル→mtb_finish

 

テーブルにフィールド追加

受注したデータを保存しておくテーブルが『dtb_order_detail』になります。こちらに以下のフィールドを追加。データ型は『text』としました。

  • 配置→position_set
  • 仕上がり→finish_set

 

テンプレートファイルの修正

テンプレートを追加する際に『ecbootstrap3』としました。パス的には『Smarty/templates/ecbootstrap3/』です。修正するときはバックアップを取ったほうが良いと思います!

カスタマイズファイル:products/detail.tpl

①238行目付近に追加。エラー処理も入ってますが、空欄の選択項目が無いので、無くてもよかった。

<!--{* 【追加】 *}-->
<div class="clearfix form-group<!--{if $arrErr.position_set != ""}--> has-error<!--{/if}-->">
    <label for="position_set" class="col-sm-5 control-label">配置:</label>
    <div class="col-sm-7">
        <select id="position_set" class="form-control" name="position_set" style="<!--{$arrErr.position_set|sfGetErrorColor}-->">
        <!--{html_options options=$arrPOSITION selected=$arrForm.position_set.value}-->
        </select>
        <!--{if $arrErr.position_set != ""}-->
        <br /><label class="attention" for="position_set">※ 配置を入力して下さい。</label>
        <!--{/if}-->
    </div>
</div>

<!--{* 【追加】 *}-->
<div class="clearfix form-group<!--{if $arrErr.finish_set != ""}--> has-error<!--{/if}-->">
    <label for="finish_set" class="col-sm-5 control-label">仕上がり:</label>
    <div class="col-sm-7">
        <select id="finish_set" class="form-control" name="finish_set" style="<!--{$arrErr.finish_set|sfGetErrorColor}-->">
        <!--{html_options options=$arrFINISH selected=$arrForm.finish_set.value}-->
        </select>
        <!--{if $arrErr.finish_set != ""}-->
        <br /><label class="attention" for="finish_set">※ 仕上がりを入力して下さい。</label>
        <!--{/if}-->
    </div>
</div>

カスタマイズファイル:cart/index.tpl

①115行目付近に追加。

<div class="col-xs-9 col-sm-5 col-md-7"><!--{* 商品名 *}-->
    <strong>
        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$item.productsClass.product_id|u}-->"><!--{$item.productsClass.name|h}--></a>
    </strong>
    <!--{if $item.productsClass.classcategory_name1 != ""}-->
        <div><small><!--{$item.productsClass.class_name1|h}-->:<!--{$item.productsClass.classcategory_name1|h}--></small></div>
    <!--{/if}-->
    <!--{if $item.productsClass.classcategory_name2 != ""}-->
        <div><small><!--{$item.productsClass.class_name2|h}-->:<!--{$item.productsClass.classcategory_name2|h}--></small></div>
    <!--{/if}-->
    <!--{if $item.position_set != ""}-->
        <div><small>配置:<!--{$item.position_set|h}--></small></div>
    <!--{/if}-->
    <!--{if $item.finish_set != ""}-->
        <div><small>仕上がり:<!--{$item.finish_set|h}--></small></div>
    <!--{/if}-->
    <div>
        価格:<!--{$item.price_inctax|number_format|h}-->円
    </div>
</div>

カスタマイズファイル:shopping/confirm.tpl

①63行目付近に追加。

<div class="col-xs-9 col-sm-10 col-md-11 padding-right-none">
    <strong><!--{$item.productsClass.name|h}--></strong>
    <ul class="list-unstyled">
        <!--{if $item.productsClass.classcategory_name1 != ""}-->
        <li><small><!--{$item.productsClass.class_name1|h}-->:<!--{$item.productsClass.classcategory_name1|h}--></small></li>
        <!--{/if}-->
        <!--{if $item.productsClass.classcategory_name2 != ""}-->
        <li><small><!--{$item.productsClass.class_name2|h}-->:<!--{$item.productsClass.classcategory_name2|h}--></small></li>
        <!--{/if}-->
<!--{* 【追加】 *}-->
        <!--{if $item.position_set != ""}-->
        <li><small>配置:<!--{$item.position_set|h}--></small></li>
        <!--{/if}-->
        <!--{if $item.finish_set != ""}-->
        <li><small>仕上がり:<!--{$item.finish_set|h}--></small></li>
        <!--{/if}-->
        <li><small>価格:<!--{$item.price_inctax|number_format}-->円</small></li>
    </ul>
</div>

カスタマイズファイル:mail_templates/order_mail.tpl

①55行目付近に追加。配送情報の『単価』と『数量』は必要なかったので削除した。

************************************************
 ご注文商品明細
************************************************

<!--{section name=cnt loop=$arrOrderDetail}-->
商品コード: <!--{$arrOrderDetail[cnt].product_code}-->
商品名: <!--{$arrOrderDetail[cnt].product_name}--> <!--{$arrOrderDetail[cnt].classcategory_name1}--> <!--{$arrOrderDetail[cnt].classcategory_name2}-->
配置: <!--{$arrOrderDetail[cnt].position_set}-->
仕上がり: <!--{$arrOrderDetail[cnt].finish_set}-->
単価:¥<!--{$arrOrderDetail[cnt].price|sfCalcIncTax:$arrOrderDetail[cnt].tax_rate:$arrOrderDetail[cnt].tax_rule|number_format}-->
数量:<!--{$arrOrderDetail[cnt].quantity}-->

テンプレートの変更はこの辺り。この記事を書いてて思い出したのが会員ページまわりを忘れてたって事。

長くなったので次回(クラスファイルの修正)へ続きます。

-Web系

執筆者:


  1. […] 前回はテンプレートファイルのカスタマイズをしたのでその続きから始めます。 […]

  2. mom より:

    現在、参考にさせていただき、作成していますが、
    商品詳細ページに項目は配置出来た物の、それを「現在のカゴの中」ページへ表示させる事ができません。
    DBにミスがあるのかと考えているのですが、
    「フィールド数や名前などは他のテーブル参照」とありますが、
    たとえば、管理画面で追加項目の商品詳細画面への表示を「可・否」とする場合にはどのように対策すればよいのでしょうか。

  3. mom より:

    度々済みません。こちら管理画面のカスタマイズでつまづいております、、宜しければ、ご教授頂けませんでしょうか? よろしくお願いします!

  4. […] EC-CUBEで規格以外に項目を追加した① […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Google API OAuth 2.0のリフレッシュトークンでハマった

WebアプリでGoogle Search ConsoleのAPIを使うにあたり、リフレッシュトークン関連でハマったのでメモしておきます。 アクセストークンの取得 特に何も考えずにアクセストークンを取得 …

no image

get_postsでカスタムフィールドにチェックボックスを使っていた場合

WordPressのプラグイン「Advanced Custom Fields」を使ってカスタムフィールを使い、表示するかしないかの判定をするために、フィールドタイプをチェックボックスにしてカスタムフィ …

no image

EC-CUBEで規格以外に項目を追加した②

前回はテンプレートファイルのカスタマイズをしたのでその続きから始めます。 Classファイルの修正 ディレクトリ内の『data/class/』に各種クラスファイルが保存されています。修正や追加をする場 …

no image

リンク画像をロールオーバーでクロスフェードさせる

jQuery v1.10.2で動いています。 aタグに含まれた画像のフェードタイプのロールオーバーです。画像のファイル名の末尾には「_on」「_off」をつけておきます。aタグ内に画像もテキストも含ま …

no image

Google Chartsを使った簡単な折れ線グラフ

時々ですが、Webページにグラフを埋め込む必要があったりする場面があります。検索をすればサンプルはたくさんできてくるので大変ありがたい所です。使うライブラリとしては「Google Charts」と「C …

記事を探す