EC-CUBE4 – 商品詳細ページの規格価格表示
EC-CUBE4の商品詳細ページで、設定された規格を選んだ際に価格が自動で切り替わります。
その表示内容をカスタマイズした際の覚書です。
ちょっとJSいじれるレベルの方向けです。
該当JSファイルは
/html/template/mytpl/assets/js/eccube.js です。
でも直接いじるのは後々面倒なことになるかと思い、該当部分をcustomize.jsにコピペして修正しました。
通常、規格が設定してあると「¥〇〇〜△△」と表示され、規格を選ぶと「¥〇〇」に自動で切り替わります。
問題点は、ページ管理で商品詳細ページをカスタマイズしているため、自動で切り替わる内容が合わなくなっていました。
具体的には
- 「¥」を「円」表示にしていたのに、自動で切り替わるのは「¥」表示。
- 税別価格と税込価格を表示していたのに、税別価格だけ税込価格に切り替わってしまう。
例:「〇〇〜△△円(税込 ◎◎〜▲▲円)」→「¥▲▲(税込 ◎◎〜▲▲円)」
では実際にどこを直したかです。
見ればわかると思いますので解説は割愛します。
コンテンツ管理 – JavaScript管理
/html/template/mytpl/assets/js/eccube.js から 該当箇所をコピペします。
以下の赤文字部分が修正した箇所です。参考まで。
※今回は通常価格を使用していません。
/**
* 規格の選択状態に応じて, フィールドを設定する.
*/
var price02_origin = [];
var price02taxinc_origin = []; /*上部を参考に消費税込みのオリジナルを定義*/
eccube.checkStock = function($form, product_id, classcat_id1, classcat_id2) {
……… 省略 ………
// 在庫(品切れ)
……… 省略 ………
// 通常価格
……… 省略 ………
// 販売価格
var $price02 = $form.parent().find(‘.price02-default’).first();
var $price02taxinc = $form.parent().find(‘.price_taxinclude’).first(); /*切り替え前に表示されていた内容を取得*/
if (typeof price02_origin[product_id] === ‘undefined’) {
// 初期値を保持しておく
price02_origin[product_id] = $price02.text();
price02taxinc_origin[product_id] = $price02taxinc.text();
}
$price02.text(price02_origin[product_id]);
$price02taxinc.text(price02taxinc_origin[product_id]);
// 商品規格
……… 省略 ………
// 在庫(品切れ)
……… 省略 ………
// 通常価格
……… 省略 ………
// 販売価格
var $price02 = $form.parent().find(‘.price02-default’).first();
var $price02taxinc = $form.parent().find(‘.price_taxinclude’).first(); /*切り替え前に表示されていた内容を取得*/
if (typeof price02_origin[product_id] === ‘undefined’) {
// 初期値を保持しておく
price02_origin[product_id] = $price02.text();
price02taxinc_origin[product_id] = $price02taxinc.text();
}
if (classcat2 && typeof classcat2.price02_inc_tax !== ‘undefined’ && String(classcat2.price02_inc_tax).length >= 1) {
$price02.text(classcat2.price02 + ‘円’);
$price02taxinc.text(‘(税込 ‘ + classcat2.price02_inc_tax + ‘円)’);
} else {
$price02.text(price02_origin[product_id]);
$price02taxinc.text(price02taxinc_origin[product_id]);
}
// ポイント
……… 省略 ………
// 商品規格
……… 省略 ………
}
以上です。
当サイトでは何の保証もいたしませんので、十分にテストされてから本番環境に実装してください。
何か不備を発見の際はご教示いただければ幸いです。