詳細ページのカートに追加するボタンのエリアで、動的チェックアウトボタンを有効にすると
添付の赤枠のエリアが画面表示後、ある一定時間そのエリアだけ何度も再読み込み（点滅）
しているような動きになります。
動的チェックアウトを無効にして、「カートに追加する」だけにするとこちらの現象は
発生しなくなります。
これだけの情報だけだと情報が足りないかもしれませんが、何か疑った方が良さそうな点があればご教授頂ければ幸いです。
よろしくお願いいたします。
Topic summary
商品詳細ページで動的チェックアウトボタンを有効にすると、カートボタンエリアが一定時間、繰り返し再読み込み(点滅)する問題が発生。動的チェックアウトを無効にすると現象は起きない。
トラブルシューティング手順:
- ネットワークタブで赤枠エリアの固有ID名を検索し、関連するJSファイルや動的出力処理を特定
- イベントリスナーを確認して実行処理を追跡
- MutationObserverのような監視イベントによる無限ループの可能性を調査
結果:
提案された方法で干渉していたアプリを特定し、アプリ開発元に問い合わせを行うことで解決に至った。画像添付により具体的な調査方法が示されている。
イベント着火ポイントを知る必要がありそうです。
赤枠エリアの生成処理はどこかに存在するため、ネットワークから「エリア内の固有ID名」などで調べてみてください。
これで関係するjsファイル、動的出力処理、それを含む関数、その関数を実行する処理までたどれるはずです。
そして、実行処理の登録イベントリスナーも確認します。
大体アタリがついたら、その要素のイベントリスナーを確認するのも手です。
こういうレンダリング処理は、大抵DOMContentLoaded イベントだと思うのですが、通常1度きりのはず。
何度も実行されるなら、例えばMutationObserverのような監視イベントで、「ページ内に変化があればレンダリング」としているケースです。
- チェックアウトページ内で変化が起きる
- レンダリング
- このレンダリングにより、変化が起きたのでレンダリング
- さらに変化が起きたのでレンダリング
- 無限ループ
この場合、監視処理の対象要素に手を加える必要があります。
赤枠エリアを除外するなどですね。
ーーー
何にせよ、jsの記述を解明しないと解決に至れないように思います。
2 Likes
ご連絡ありがとうございます。
頂いた方法で干渉していたアプリを特定できましたのでアプリ開発元に問い合わせをさせて頂きました。
1 Like