バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > カートページに数量変更ボタンを設置したい

フロント機能

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
h_tanaka
投稿日時: 2022/12/22 19:33
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Re: カートページに数量変更ボタンを設置したい
自己解決しました。

a タグを別で用意しておき、そちらの href を動的に変更して click イベントを発生させることで数量変更を動作させることができました。


<script>
    $(function () {
        // 数量更新
        $('.change_button').on("click", function () {
            var data = $(this).data();
            var url = data.href;
            var cart_item = $(this).parents('.cart_item');
            var quantity = cart_item.find('.input-num').val();
            var url = url.replace(/\/[0-9]{1,}$/g, '/'+quantity);
            var change_execute = cart_item.find('.change_execute');
            change_execute.prop("href", url);
            change_execute.click();
        });
    });
</script>

<a href="java script:void(0);" class="button ec-cartRow__amountUpButton change_button" data-href="{{ url('cart_handle_item', {'operation': 'change', 'productClassId': ProductClass.id, 'quantity' : 1}) }}">更新</a>
<div class="hide">
    <a href="{{ url('cart_handle_item', {'operation': 'change', 'productClassId': ProductClass.id, 'quantity' : 1}) }}" class="change_execute" data-method="put" data-confirm="false" {{ csrf_token_for_anchor() }}></a>
</div>


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

mcontact
投稿日時: 2022/12/22 18:51
対応状況: −−−
登録日: 2022/1/22
居住地:
投稿: 1240
Re: カートページに数量変更ボタンを設置したい
> 動的にURLを変える必要がある場合は

動的にURLうんぬんというより、GET/POST/PUT/その他多数のメソッドの扱い方次第です。
HTTPのリクエストメソッドの仕様をしっかりと確認しましょう。。。
h_tanaka
投稿日時: 2022/12/22 17:48
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Re: カートページに数量変更ボタンを設置したい
mcontact さん

GET メソッドと同じように処理できないかと考えていたのですが、動的にURLを変える必要がある場合は POST メソッドのようにしないといけないのですね。。

mcontact
投稿日時: 2022/12/22 15:08
対応状況: −−−
登録日: 2022/1/22
居住地:
投稿: 1240
Re: カートページに数量変更ボタンを設置したい
単純に
AJAXで送信処理して結果に応じて遷移させるか
JavascriptでFORM Submitで出来るのではないでしょうか?
h_tanaka
投稿日時: 2022/12/22 12:48
対応状況: 解決済
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
カートページに数量変更ボタンを設置したい
EC-CUBE 4.0.2

カートページに数量入力のテキストボックスと更新ボタンを設置して、数量を変更できるようにしたいです。
更新ボタンをクリックしたときに数量を取得して遷移先URLを動的に変更するために script で画面遷移させようとしています。
ただ、以下のやり方だとGET送信になってしまうようで、エラーになってしまいます。
No route found for "GET /cart/change/690/1": Method Not Allowed (Allow: PUT)
script でPUT送信ができればと思うのですが、どうすれば良いでしょうか?


<script>
    $(function () {
        $('.change_button').on("click", function () {
            var data = $(this).data();
            var url = data.href;
            var quantity = $(this).parents('.cart_item').find('.input-num').val();
            var url = url.replace(/\/[0-9]{1,}$/g, '/'+quantity);
            window.location.href = url;
        });
    });
</script>

<input type="text" class="input-num" value="{{ CartItem.quantity }}">
 ...
<a href="java script:void(0);" class="button change_button" data-method="put" data-confirm="false" data-href="{{ url('cart_handle_item', {'operation': 'change', 'productClassId': ProductClass.id, 'quantity' : 1}) }}" {{ csrf_token_for_anchor() }}>更新</a>

スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

総メンバー数は88,286名です
総投稿数は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.