Yahooショッピングでテストページを作成したい

Question

公開前に更新のテストをしたく、下記の方法を試しましたが、
テストページではheader部分が表示されませんでした。

　index.html → indextest.html に複製と名称変更

　indextest.html内の header-component（4か所） → header-componenttest に変更

　header-component.vue → header-componenttest.vue に複製と名称変更


headerを表示させる方法はありますでしょうか？
よろしくお願いします。

Answer

ECマスターズの田中です。

私にて確認したところ、indextest.html にて
「header-componenttest.vue」は問題なく読み込めているのですが、

/*時間指定バナーテスト*/ の直後、283行目の
that.images.push（後略）
を実行しようとしたところ、
「that.imagesは定義されていない」
というエラーが発生し、表示させる動作が停止しております。

上記行以外は現行のものと変わっておらず、問題がないように見えるのですが、
一度、283行目を削除もしくはコメントアウトして、
ヘッダーが表示されるようになるかどうか、
ご確認いただきますようお願いします。

先述のエラーは、
ブラウザのデベロッパーツール、Consoleにて、赤文字の
ReferenceError: images is not defined
というエラーにてご確認いただくことができます。

Chromeの場合は、
メニューもしくはF12キーで開き、「Console」をクリックしてご確認ください。
図解は、下記ページにてご確認いただけます。
https://www.buildinsider.net/web/chromedevtools/01

Answer

ECマスターズの田中です。

引き続き、現行とtestの.vueを比較したところ、
317行目にて、window.onloadの内容をまるごと書き換えている箇所も、
トラブルにつながる可能性があると感じました。

window.onloadに代入するのではなく、

window.addEventListener('load', function() {
（中略）
});

のように、追加していただく形に修正していただきますようお願いします。

Answer

田中様

いつもお世話になっております。
ご連絡ありがとうございます。

header-componenttest.vueでは行数が異なるようでして、
「/*時間指定バナーテスト*/ の直後、283行目の
that.images.push（後略）」
が特定できませんでした。
また、
header-componenttest.vueの505行目を
window.addEventListener('load', function() {
に打ち換えましたが、header部分表示されないままでした。

テストページの目的は、表示時間を設定して「5のつく日」やその他の期間限定バナーの設置です。
解決策ご教授ください。
よろしくお願いいたします。

Answer

ECマスターズの田中です。さらに状況を確認したところ、 header-componenttest.vueの中で、〜の外に、 module.exports用以外の、2つ目のタグが記載されていることにより、 vueファイルを正しく読み込めなかったことが原因であることがわかりました。 header-componenttest.vueの末尾にあるscriptタグを、〜の内側に移動していただきますようお願いします。なお、同scriptタグの中で、+の表記が抜けており、エラーの原因となる箇所がございました。 if( (new Date()) > (new Date(jQuery(this).data("start") " 0900")) && (new Date()) < (new Date(jQuery(this).data("end") " 0900"))){ を if( (new Date()) > (new Date(jQuery(this).data("start") + " +0900")) && (new Date()) < (new Date(jQuery(this).data("end") + " +0900"))){ に修正していただきますようお願いします。