お届け先情報入力フォームブロックプラグインで商品規格や配送方法などを選択したときの位置を維持する方法

お届け先情報入力フォームブロックプラグインは商品規格や配送方法などのセレクトボックスの値を選択すると各種情報を取得するためSubmitされます。

Submitするとページの先頭が表示されてしまうのですが、セレクトボックスの値を選択してもその位置を維持するようカスタマイズする方法を紹介します。

お届け先入力フォームブロックを編集

管理画面のコンテンツ管理＞ブロック管理で「お届け先入力フォーム」を編集します。

「お届け先入力フォーム」に以下のコードを追加してください。

<script>
    $(function(){
        $('form#form1').submit(function(){
            const scroll_top = $(window).scrollTop();  //送信時の位置情報を取得
            $('input[name="scroll_top"]', this).val(scroll_top); // 位置情報をセット
        });
    });
            
    window.onload = function(){
        //ロード時に隠しフィールドから取得した値で位置をスクロール
        {% if app.request.get('scroll_top') %}
            $(window).scrollTop({{ app.request.get('scroll_top')}});
        {% endif %}
                
        $('form#form1').append($('<input />').attr({'type': 'hidden', 'name': 'scroll_top'}));
    }
</script>

以上で完成です。