バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > 支払い方法のinputをdivで囲みたい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
2645dfd
投稿日時: 2024/3/25 16:00
対応状況: −−−
半人前
登録日: 2022/5/2
居住地:
投稿: 12
支払い方法のinputをdivで囲みたい
[EC-CUBE] EC-CUBE4.2.1
[レンタルサーバ] Xserver
[OS] 使用しているOS名、バージョン
[PHP] 7.4.33
[データベース] MySQL 10.5.13-MariaDB-log
[WEBサーバ] Apache
[導入プラグインの有無] データ移行プラグイン,GMO決済プラグイン
[カスタマイズの有無] あり


EC-CUBE4での支払い方法選択画面のデザインのカスタマイズをしています。

支払い方法の<input type="radio">を背景色でをつけたいのですが、CSSでは実現が難しく、
<div>タグを囲って実現したいのですが、どこをカスタマイズすれば良いのかわかりません。

購入画面のファイルの(app/template/default/Shopping/index.twig)こちらの部分から、


                    <div class="ec-radio">
                        {% for key, child in form.Payment %}
                            <div style="display: block;">
                                {% set Payment = form.Payment.vars.choices[key].data %}
                                <div>{{ form_widget(child, { 'attr': { 'data-trigger': 'change' }}) }}</div>
                                <div>{% if Payment.payment_image is not null %}
                                    <p><img src="{{ asset(Payment.payment_image, 'save_image') }}" style="width:342px; vertical-align:middle;"></p>
                                {% endif %}</div>
                            </div>
                        {% endfor %}
                    </div>


色々調べてフォームのカスタマイズが必要だとわかり、こちらのファイルの該当箇所かと思うのですが、どこを変更すればinputを<div>で囲めるかがわかりません。

src/Eccube/Form/Type/Shopping/OrderType.php

 
if ($options['redirect']) {
            
            // 支払い方法のプルダウンを生成
            $builder->addEventListener(FormEvents::POST_SET_DATA, function (FormEvent $event) {
                /** @var Order $Order */
                $Order = $event->getData();
                if (null === $Order || !$Order->getId()) {
                    return;
                }
                
                $Deliveries = $this->getDeliveries($Order);
                $Payments = $this->getPayments($Deliveries);
                // @see https://github.com/EC-CUBE/ec-cube/issues/4881
                $charge = $Order->getPayment() ? $Order->getPayment()->getCharge() : 0;
                $Payments = $this->filterPayments($Payments, $Order->getPaymentTotal() - $charge);
                
                $form = $event->getForm();
                $this->addPaymentForm($form, $Payments, $Order->getPayment());
                
                $form->add('user_policy_check', CheckboxType::class, [
                    'required' => false,
                    'label' => null,
                    'mapped' => false,
                ]);
                
            });
        }


もし別の場所で実現できるなど分かりましたらご教授いただけると幸いです。
mcontact
投稿日時: 2024/3/25 16:39
対応状況: −−−
登録日: 2022/1/22
居住地:
投稿: 1285
Re: 支払い方法のinputをdivで囲みたい
FormTypeの設定で、表示されるHTML要素は下記のファイルです。
ただし、全てのフォームを表示されますので個別に表示するには独自の設計が必要です。

https://github.com/EC-CUBE/ec-cube/blob/4.2/src/Eccube/Resource/template/default/Form/form_div_layout.twig

参考サイト
https://umebius.com/eccube/form_theme_change_html_structure/


----------------
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
EC-CUBEインテグレートパートナー【ゴールド】ランク
M&I Works
URL: https://miworks.biz/
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

2645dfd
投稿日時: 2024/3/25 17:42
対応状況: −−−
半人前
登録日: 2022/5/2
居住地:
投稿: 12
Re: 支払い方法のinputをdivで囲みたい
返信ありがとうございます!
フォームのレイアウトのファイルですね。こちらカスタマイズしてCSSで強引ですが調整できそうでした。
ご教授いただきありがとうございます
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2313
5
umebius
2085
6
yuh
1819
7
h_tanaka
1638
8
red
1570
9
mcontact
1285
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
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.