バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > 商品価格の横に規格を表示したい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
usamimi
投稿日時: 2018/10/30 20:17
対応状況: −−−
新米
登録日: 2018/8/17
居住地:
投稿: 9
商品価格の横に規格を表示したい
商品詳細ページで、規格がいくつかある場合、デフォルトでは価格の表示が

¥○○ ~ ¥○○ 税込

のようになりますが、これを

[規格] ¥○○ 税込
[規格] ¥○○ 税込
[規格] ¥○○ 税込

のように、規格ごとに価格を表示させ、それを一覧にすることはできますか?
sw_tm
投稿日時: 2018/10/31 14:28
対応状況: −−−
半人前
登録日: 2018/5/25
居住地:
投稿: 25
Re: 商品価格の横に規格を表示したい
Product.ProductClassesで取得できると思います。

usamimi
投稿日時: 2018/10/31 19:21
対応状況: −−−
新米
登録日: 2018/8/17
居住地:
投稿: 9
Re: 商品価格の横に規格を表示したい
ご返信いただきありがとうございます。

値の取得の仕方がわからないところからだったので

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=ASC&topic_id=17665&forum=10

こちらのスレッドも合わせて参考にして販売価格のところを以下のように書いたところ、規格と価格を並べて表示するところまでは出来ました。
(税込の文字の後ろの英字はどの部分が出力されているのか確認するために入れたものです)

                    {# 販売価格 #}
                    <div class="ec-productRole__price">
                        {% if Product.hasProductClass -%}
                            {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
                                <div class="ec-price">
                                    <span class="ec-price__price price02-default">{{ ProductClass.ClassCategory1 }}{{ Product.getPrice02IncTaxMin|price }}</span>
                                    <span class="ec-price__tax">{{ '税込'|trans }}aaaaa</span>
                                </div>
                            {% else %}                        
                                {% for ProductClass in Product.ProductClasses %}
                                <div class="ec-price">
                                    <span class="ec-price__price price02-default">
                                        {{ ProductClass.ClassCategory1 }}{{ ProductClass.getPrice02IncTax|price }}</span>
                                    <span class="ec-price__tax">{{ '税込'|trans }}bbbbb</span>
                                </div>
                                {% endfor %}
                            {% endif %}
                        {% else %}
                            <div class="ec-price">
                                <span class="ec-price__price">{{ ProductClass.ClassCategory1 }}{{ Product.getPrice02IncTaxMin|price }}</span>
                                <span class="ec-price__tax">{{ '税込'|trans }}ccccc</span>
                            </div>
                        {% endif %}
                    </div>


この書き方だと、規格を選択する前は

[規格1] 規格1の価格
[規格2] 規格2の価格
[規格3] 規格3の価格

のように、規格ごとに順番に並んで表示されます。

ですがこれだと、フォームの方で規格を選択した場合に、選択した規格の規格名のみが消え、例えば規格1を選択した場合は

規格1の価格
[規格2] 規格2の価格
[規格3] 規格3の価格

規格2を選択した場合

規格2の価格
[規格2] 規格2の価格
[規格3] 規格3の価格

のように表示されます。

出力を確認するために追加している文字はどれも同じ部分のものが表示されるので(現在はbbbbbの部分)この部分が関係しているのはわかるのですが、どこが連動していて最初に出力された部分のみが入れ替わっているのかが見えません。
何かヒントになるようなものはありますか?
sw_sn
投稿日時: 2018/10/31 19:53
対応状況: −−−
半人前
登録日: 2018/5/25
居住地:
投稿: 17
Re: 商品価格の横に規格を表示したい
ちょうど、私もいじっていたところなので、

html/template/default/assets/js/eccube.js

このJSで、class名「.price01-default」に対していろいろやっているみたいです。htmlからとってしまえば、とりあえずは変更はされないと思います。
usamimi
投稿日時: 2018/11/1 0:12
対応状況: −−−
新米
登録日: 2018/8/17
居住地:
投稿: 9
Re: 商品価格の横に規格を表示したい
ありがとうございます。

ご指摘いただいたように、htmlからprice02-defaultを削除したところ規格名だけが消えてしまう現象はなくなり、フォーム内容に左右されず一覧で表示されるようになりました。
ありがとうございます

教えていただいたjsのファイルも見てきました。
私が書いたコードでは、表示の際に影響を受けていたのはループで最初に出力された項目のみだったので、これをうまいこと応用できれば、最初は規格と価格を一覧表示させておいて、フォームで規格を選択した時に選択した規格と価格のみを表示させる、ということもできそうですね。

初期表示

規格1 価格1
規格2 価格2
規格3 価格3

規格3を選択

規格3 価格3
(他の選択肢は非表示)

イメージとしてはこんな感じです。

ひとまず当初の希望どおりの表示には出来ましたが、これができれば見た目もスッキリさせることができそうなので、引き続き私もいじってみようかと思います。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

統計情報

総メンバー数は35,014名です
総投稿数は88,157件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1833
4
yuh
1521
5
468
1287
6
red
1186
7
umebius
1007
8
fukap
907
9
shutta
827
10
tsuji
815
11 ramrun 789
12
tao_s
667
13 karin 656
14 sumida 641
15
homan
633
16
h_tanaka
587
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

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

Copyright© LOCKON CO.,LTD. All Rights Reserved.