テンプレートのバージョンアップをした際に考えられる影響
今回のアップデートでは以下のバージョンに変更いたしました。
加盟店様のサイトの表示崩れを防ぐため、「ショップサイト画面」と「ショッピングカート画面」で方針を分けております。
ショップサイト画面（加盟店様のタイミングで更新）
対象：トップページ・商品一覧・詳細ページなど
- アップデート後も現在のデザイン・設定を維持します。
- 加盟店様のタイミングで新しい設定へ切り替えが可能です。
ショッピングカート画面（リリースと同時に強制更新）
対象: 個人情報入力・配送先指定・決済処理など
- 独自のタグ等（出力タグ）を入れている場合に影響が出る可能性があります。
- 修正を行わないと、決済ができなくなる恐れがあります。
- 安全性を担保するため、強制的に新jQueryへ切り替わります。
テンプレートのjQueryのバージョンアップの方法
加盟店様のご利用状況によって、確認内容が異なります。
以下をご覧いただき、どのケースに当てはまるかをご確認ください。
- 管理画面に管理者権限でログインします。
- 「デザイン」等のメニューから「マイテンプレート」画面へ遷移します。
- ［新規追加］ボタンを押下し、最新の「初期テンプレート」を新たに追加します。
- 追加した新テンプレートのステータスを「設定中」に変更します。
- 実際のショップサイトにアクセスし、画像やテキストが正常に表示されていることを目視で確認します。
- 管理画面に管理者権限でログインします。
- 「デザイン」等のメニューから「マイテンプレート」画面へ遷移します。
- 「設定中」のテンプレートの「編集」をクリックした上で、「HTML編集設定」へ進みます。
- 「ショップ画面」の「共通部分」の「編集」をクリックし、HTMLソースを確認します。
- 旧バージョンのjQueryの読み込みパスを、以下の通りバージョンを書き換えます。
- 旧jQuery特有の記法や廃止される記載が含まれている場合、新バージョン向けに修正し、登録します。
- 共通部分の他に「ランディングページ」「会員限定ログインページ」「共通IDログインページ」も同様にバージョンを書き換え、旧jQuery特有の記法や廃止される記載の修正を行い、登録します。
- 実際のショップサイトにアクセスし、画像やテキストが正常に表示されていることを目視で確認します。
- 管理画面に管理者権限でログインします。
- 「店舗設定」等のメニューから「出力タグ」画面へ遷移します。
- 「編集」をクリックし、出力タグの入力欄を確認します。
- 旧jQuery特有の記法や廃止される記載が含まれている場合、新バージョン向けに修正し、登録します。
- テスト注文を実施し、正常に注文ができることを確認します。
【ショップサイト画面の対応方法①】標準テンプレートをそのまま使用している場合
セキュリティ向上のため、ご対応をお願いいたします。
テンプレートに紐づく情報が多い場合は【ショップサイト画面の対応方法②】での対応をご検討ください。
【ショップサイト画面の対応方法②】テンプレートをカスタマイズしている場合
独自に追加した動くメニューなどのプログラムがエラーで動かなくなる可能性があります。
【ショッピングカート画面】出力タグに旧jQueryへ依存した記載がある場合
お客様がカートから進めなくなるなどのトラブルが起きる可能性があります。
影響が発生した際の対応方法事例
対応方法事例：メニューの動作不良
- 概要
- 原因
- 対応方法
「jquery-1.12.4.min.js」を「jquery-3.7.1.min.js」に変更しました。
その結果、ショップサイト画面上部に設置されている「メニュー」ボタンをクリックしても開かなくなるという不具合が発生しました。
調査の結果、マイテンプレートの「共通部分」のHTML内に記載されていた「$(window).load()」という古い構文に原因がありました。
jQuery3.0以降、イベントハンドラとしての「.load()」メソッドは完全に廃止されています。
そのため、ブラウザがこの古い記述を読み込んだ瞬間にJavaScriptエラーが発生して処理が止まってしまい、
それより後方に書かれていた「メニューを開くためのプログラム」まで実行されなくなってしまいました。
HTML内に記載されているJavaScriptのコードを以下のように変更します。
【変更前】 【変更後】「$(window).load(」を「$(window).on('load',」に変更することによってJavaScriptエラーが解消され、後続のメニュー開閉のプログラムも正常に読み込まれるようになりました。