バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

フロント機能

新規スレッドを追加する

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

¥○○ ~ ¥○○ 税込

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

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

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

usamimi
投稿日時: 2018/10/31 19:21
対応状況: −−−
常連
登録日: 2018/8/17
居住地:
投稿: 64
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
居住地:
投稿: 49
Re: 商品価格の横に規格を表示したい
ちょうど、私もいじっていたところなので、

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

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

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

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

初期表示

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

規格3を選択

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

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

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


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,288名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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