バージョン選択

フォーラム

メニュー

オンライン状況

32 人のユーザが現在オンラインです。 (10 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 32
もっと...

サイト内検索

質問 > フロント機能 > 規格1の<select>内<option>に金額を追加したい(商品詳細ページ 及び 商品一覧ページ)

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
KeithKeith
投稿日時: 2022/4/13 20:16
対応状況: −−−
新米
登録日: 2022/4/13
居住地:
投稿: 2
規格1の<select>内<option>に金額を追加したい(商品詳細ページ 及び 商品一覧ページ)
▼テンプレート
[EC-CUBE]4.1.1
[レンタルサーバ]Xserver
[OS]Windows 10 Pro 64
[PHP]7.4.25
[データベース]MySQL 10.5.13-MariaDB
[WEBサーバ]Ubuntu18.04.1
[ブラウザ]Google Chrome 99.0.4844.84
[導入プラグインの有無]クロネコヤマト カード・後払い一体型決済サービス
[カスタマイズの有無]無し
[現象]

プログラム初心者です。
PHP、Symfony、twig等、全て詳しく理解できておりませんが、勉強しながらカスタマイズ等できればと思っています。
今回ご相談したい内容は、規格1を設定した(規格2は設定していない)状態で、税込み金額をセレクトボックス内に表示できないかという事です。
通常は
<select id="classcategory_id1" name="classcategory_id1" class="form-control">
<option value="__unselected">選択してください</option>
<option value="12">1kg</option>
<option value="7">2kg</option>
<option value="8">5kg</option>
<option value="11">10kg</option>
</select>
のように出力されると思うのですが、これを
<select id="classcategory_id1" name="classcategory_id1" class="form-control">
<option value="__unselected">選択してください</option>
<option value="12">1kg \1,000</option>
<option value="7">2kg \1,900</option>
<option value="8">5kg \4,500</option>
<option value="11">10kg \8,000</option>
</select>
のように、税込み価格を後ろにくっつけたいと思っています。

もっとも簡単に思いついたのは、手作業で恰好がつきませんが、
・商品管理画面>規格管理で、税込み価格をそのまま書いてしまう
という方法ですが、もう少しスマートな方法があればと思っています。

例えば商品詳細ページの場合
app/template/default/Product/detail.twig
内の
{{ form_widget(form.classcategory_id1) }}
が相当すると思うのですが、javascript、twig等で配列をいい感じに書き換えられないでしょうか。

PHPから書き換える(Customizeに新規作成?)等となると、そんなに大した変化がないわりにかなり広範囲に処理が必要かと思われます。
こちらももしご教授いただけましたらチャレンジしてみたいと思います。

なおtwig内にて、
{% if form.classcategory_id1 is defined and form.classcategory_id2 is not defined and Product.getPrice02IncTaxMin|price != Product.getPrice02IncTaxMax|price %}
等と条件を限定することで、「規格1のみが存在し、販売価格に差がある」時のみ有効になる様な処理を書けたらベストだと思っています。

ご指導いただけましたら幸いです。
よろしくお願いします。
468
投稿日時: 2022/4/15 9:40
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: 規格1の<select>内<option>に金額を追加したい(商品詳細ページ 及び 商品一覧ページ)
規格選択時に販売価格の表示を切り替える為に
eccube.productsClassCategories
にオブジェクトとして商品規格の情報を持っていると思いますので
javascriptで処理する場合は上記変数から値を取り出して処理する事になるかと思います。
(ブラウザで商品一覧や商品詳細ページのHTMLソースを確認してみてください)

該当プルダウンの中身をセットしている箇所はPHP側の
/src/Eccube/Form/Type/AddCartType.php
の115行目付近のlabelオプションの指定のところかと思います。
$builder->add('classcategory_id1', ChoiceType::class, [
    'label' => $Product->getClassName1(),
    'choices' => ['common.select' => '__unselected'] + $Product->getClassCategories1AsFlip(),
    'mapped' => false,
]);

となりますのでFormTypeを拡張する形でも対応できるかと思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

KeithKeith
投稿日時: 2022/4/18 11:06
対応状況: −−−
新米
登録日: 2022/4/13
居住地:
投稿: 2
Re: 規格1の<select>内<option>に金額を追加したい(商品詳細ページ 及び 商品一覧ページ)
ご返信いただきましてありがとうございます。
まずはjavascriptで進めてみたいと思います。

eccube.productsClassCategoriesにつきましては、
console.log(eccube.productsClassCategories)
で連想配列を取得できました。

商品一覧ページですと商品IDが配列の最外層におり処理が一個多くなるかと思いました。
ですので、まずは商品詳細ページにて試してみました。

商品詳細ページではeccube.classCategoriesが対応しているようでしたので、
console.log(eccube.classCategories)で、同様に連想配列が取得できました。

ここでつまづきました。
「#」をどう扱っていいかが分からくなっています。

私の商品詳細ページでは

{
"__unselected": {"__unselected":{"name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044","product_class_id":""}},
"12":{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"1,000","price01_inc_tax":"","price02_inc_tax":"1,080","price01_with_currency":"","price02_with_currency":"\uffe51,000","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe51,080","product_class_id":"18","product_code":"00000001-01","sale_type":"3"}},
"7":{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"1,800","price01_inc_tax":"","price02_inc_tax":"1,944","price01_with_currency":"","price02_with_currency":"\uffe51,800","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe51,944","product_class_id":"14","product_code":"00000001-02","sale_type":"4"}},
"8":{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"3,600","price01_inc_tax":"","price02_inc_tax":"3,888","price01_with_currency":"","price02_with_currency":"\uffe53,600","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe53,888","product_class_id":"13","product_code":"00000001-03","sale_type":"1"}},
"9":{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"5,400","price01_inc_tax":"","price02_inc_tax":"5,832","price01_with_currency":"","price02_with_currency":"\uffe55,400","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe55,832","product_class_id":"15","product_code":"00000001-04","sale_type":"1"}},
"10":{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"9,200","price01_inc_tax":"","price02_inc_tax":"9,936","price01_with_currency":"","price02_with_currency":"\uffe59,200","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe59,936","product_class_id":"16","product_code":"00000001-05","sale_type":"1"}},
"11":{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"12,000","price01_inc_tax":"","price02_inc_tax":"12,960","price01_with_currency":"","price02_with_currency":"\uffe512,000","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe512,960","product_class_id":"17","product_code":"00000001-06","sale_type":"1"}}
}

この様な内容になっており、
console.log(eccube.classCategories.__unselected.__unselected.name)
では
"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044" //選択してください
がきちんと表示されますが、同様に
console.log(eccube.classCategories.12.#.price02_inc_tax_with_currency)
とした場合はエラー
Uncaught SyntaxError: missing ) after argument list
となります。

この際に
console.log(eccube.classCategories[12])
としますと、
{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"1,000","price01_inc_tax":"","price02_inc_tax":"1,080","price01_with_currency":"","price02_with_currency":"\uffe51,000","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe51,080","product_class_id":"18","product_code":"00000001-01","sale_type":"3"}}
が表示されるのですが、その後の「#」から先を読もうとするとエラーとなってしまいます。

試しに
const hairetsu1 = eccube.classCategories[12]
console.log(hairetsu1)
としますと同様に
{"#":{"classcategory_id2":"","name":"","stock_find":true,"price01":"","price02":"1,000","price01_inc_tax":"","price02_inc_tax":"1,080","price01_with_currency":"","price02_with_currency":"\uffe51,000","price01_inc_tax_with_currency":"","price02_inc_tax_with_currency":"\uffe51,080","product_class_id":"18","product_code":"00000001-01","sale_type":"3"}}
が表示されますが
console.log(hairetsu1.#)

console.log(hairetsu1[#])

console.log(hairetsu1[#.price02_inc_tax_with_currency])
では
Uncaught SyntaxError: Invalid or unexpected token

console.log(hairetsu1[#price02_inc_tax_with_currency])
では
Uncaught SyntaxError: Private field '#price02_inc_tax_with_currency' must be declared in an enclosing class

console.log(hairetsu1#price02_inc_tax_with_currency)
では
Uncaught SyntaxError: missing ) after argument list

等とことごとくエラーとなりました。
constの他、let、varでも同様でした。

何か根本的な間違いや全くの見当違いをしているのではないかと思いますし、これが解決しても「nameが全部""になってるけど、どこでどうやって規格名を持ってきてるんだろう」といった部分もあります。
素人相手でもよろしければ、教えていただけたらありがたいです。
何卒よろしくお願いします。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン



統計情報

総メンバー数は74,626名です
総投稿数は104,055件です

投稿数ランキング

1
seasoft
7333
2
468
3217
3
AMUAMU
2712
4
nanasess
2202
5
umebius
2074
6
yuh
1664
7
red
1498
8
h_tanaka
1188
9
tsuji
942
10
fukap
907
11
shutta
835
12
tao_s
794
13 ramrun 789
14 karin 689
15 sumida 641
16
homan
633
17 DELIGHT 572
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.