EC-CUBE2.13系のカスタマイズ事例です。

いよいよ 2018年9月末に EC-CUBE4系 がリリースされることになりましたね! 現在はEC-CUBE は3系が主流ですがベースとなっている Symfony のバージョンアップを考えると、まだまだ 2系が安心です。ただ、2系はプラグインが減ってしまっていて、カスタマイズ案件のリクエストが増えています。

今回はご要望の多い「2系の商品規格をラジオボタンに変更する事例」を取り上げます。過去にはオーナーズストアに無料のプラグインがあったのですが現在は見当たらなくなっています。EC-CUBE3系はプラグインが公開されています。

4系のリリース目前にして、はほとんど世の中に必要とされていないんじゃないかと思いますが、私的には必須ですし、結構複雑なので記録に残しておこうと思います。なお、いつものお約束ですが、こちらの内容は自己責任でご利用ください。EC-CUBE が壊れる可能性大ですが責任は負えません。(^^)

今回は特に、超上級編になります。この記事の方法でうまくいかない可能性もありますが、ご自身で解決できる方のみ挑戦してみてください。自信のないかたは有料にてカスタマイズをお引き受けしておりますので、ご連絡ください。

商品を分類する EC-CUBE の 商品規格

商品規格とは何か

EC-CUBE では商品の分類を「規格」と呼んでいます。洋服でいえば、S・M・L などのサイズが「規格」にあたります。EC-CUBE では 一つの商品に対し二つまでの規格を組み合わせることができます。サイズが S・M・L の3種類で、色が赤と青の2種類なら、「サイズ」と「色」をそれぞれ規格として設定し、お客様が選べるようにできるわけです。

標準では、規格はドロップダウンリストボックス

規格は標準ではドロップダウンリストボックスになっています。

規格が2種類ある商品では、一つ目の規格を選ぶと、二つ目の規格のリストが作成されるのですが、パッと見た感じではどのような種類があるのか分かりません。
これをラジオボタンにして一覧の中から選んでもらえるようにするのが今回の目標です。

まず、テンプレート detail.tpl を変更

以下のファイルを開いて編集します。コードのバージョンは 2.13.1 ですが、2.13系なら大きく変わらないと思います。

\html\data\Smarty\templates\default\products\detail.tpl

セレクトボックスを削除する

セレクトボックスはいらないので削除します。

まず、「規格1」を表示している197行目「<select name=”classcategory_id1″ style=”<!–{$arrErr.classcategory_id1|sfGetErrorColor}–>”>」と199行目「</select>」の2行を削除します。

次に、「規格2」をまるごと削除します。削除する「規格2」は、206行目「{if $tpl_classcat_find2}」から219行目「{/if}」までになります。

「規格1」と「規格2」を保管する input box を追加する

「規格1」と「規格2」を保持するため、次の3行を189行目以降に追加します。

ラジオボタンを追加する

「html_options」を「html_radios」に変更するとラジオボタンになります。また、一つの選択肢に「規格1」と「規格2」の両方のコードを持たせる必要があるため、200行目は以下のように変更します。

202行目の「classcategory_id1」を「classcategory_id」に変更します(1 を取る)。

変更後の detail.tpl は以下のとおりです。

最後に、このテンプレートの初め(23行目)に書かれている javascript を以下のように変更します。

テンプレートの修正は以上になります。ここまででテンプレートを更新すると、商品詳細ページは以下のようになります。

このままでは、「選択してください」という項目ができてしまっていますし、味を選択して「カゴに入れる」ボタンをクリックしてもカート画面に遷移しません。

SC_Product クラスを変更する

規格のセレクトボックスは「data\class\SC_Product.php」内の「setProductsClassByProductIds」で作っています。

一つの選択肢に「規格1」+「規格2」+「商品価格」を表記するように修正します。

「data\class\SC_Product.php」を直接修正すると他に影響の出る可能性がありますので、以下の内容を「data\class_extends\SC_Product_Ex.php」を開き、貼り付けます。念のため、「setProductsClassByProductIds2」という名前に変更しておきます。

このクラスの呼び出し元を変更します。data\class\pages\products\LC_Page_Products_Detail.phpの122行目と669行目付近で、「setProductsClassByProductIds」を呼び出しているところを「setProductsClassByProductIds2」に変更します(2を追加)。

今回は変更場所が2個所だけなので、元ファイルを修正していますが、お好みにより「class_extends」をお使いください。

ここまでで、表示は次のようになります。

Javascript を変更して、カゴに入るようにする

商品を選択してカゴに入れるところは、Javascript を変更します。 html\js\eccube.js の eccube.checkStock 内 464行目付近に「classcat2.classcategory_id1 = classcat_id1;」を追加します。

次に、526行目付近の「// 商品規格」の下に、「商品規格ID1」と「商品規格ID2」を追加します。

さらに、適当な場所(559行目の「規格2選択時」の下あたりがお勧め)に以下を挿入します。

スタイルを整えて、カゴに入るか確認

最後にスタイルを整えます。各ラジオボタンには「<label>」タグが付きますので、<label>」タグのスタイルを「display:block」に変更します。

\html\user_data\packages\default\css\contents.css

512行目に「#detailrightbloc .cart_area」があるので、その下あたりに以下を追加します。

以上で終了です。お疲れ様でした。