WIXでのページ遷移エラー対応方法
WIXで制作したホームページにtriplaの検索窓、又はチャットボットを設置した際に、別のページへ移動（遷移）した際、表示設定をしていないのに検索窓かチャットボットが表示されてしまうエラーが発生します。この対処法についてご案内いたします。
最終更新
WIXで制作したホームページにtriplaの検索窓、又はチャットボットを設置した際に、別のページへ移動（遷移）した際、表示設定をしていないのに検索窓かチャットボットが表示されてしまうエラーが発生します。この対処法についてご案内いたします。
最終更新
WIXでは通常のページ遷移の際に、新たにページを読み込まず、表示している見た目とURLの変更処理だけを行うため、開いたページのJavascriptなどをそのまま引き継ぐ性質があります。 例えば、トップページに検索窓を設置していて、お料理ページには設置していなかったとしても、トップページからお料理ページのリンクで移動すると、お料理ページにも検索窓が表示されてしまいます。但し、お料理ページでブラウザの更新ボタンを押すと検索窓は表示されません。 このため、ページ遷移の際にページをリロード（再読み込み）させる処理を施す必要があり、テンプレートに設置されたページリンク（以下の画像では「ホーム～会議・イベント」となっている箇所）を削除して、新たにページを再読み込みするリンクボタンを設置する必要があります。
WIXの管理画面ではHTMLやJavascriptの操作はできません。 そのため専用の開発ツールをプラグインでインストールする必要があります。ここではVERO（https://www.wix.com/velo)というツールを使った対象方法をお伝えいたします。 (※プラグインのインストールはご自身の判断にてご利用ください）
https://www.wix.com/velo にアクセスし、「Start a Project」ボタンをクリックします。
次に修正するサイトの選択が表示されますので、triplaサービスを導入する宿を選択してください。
開発ツールのVEROがインストールされると、以下の様な画面に切り替わります。
VEROの導入が完了したら、テンプレートに設置されたページリンクの削除と、新たにリンクボタンを作成する必要があるので、開発モードを無効にして、WIXのエディター画面を開きます。
上部メニューの「Dev Mode」から「開発モードを無効にする」をクリックしてください。
次にテンプレートのページリンクに変わるリンクボタンを作成しますので、左メニューの「追加」＞「ボタン」から、ページリンクに変わる適切なデザインを選択してください。
ボタンを追加するとページ内のどこかに表示されますので、適切な場所に移動してください。ここではページリンクの上に、同じものを作りたいと思います。 なお、テンプレートのページリンクは1つの固まりとしてパーツが作られていますが、リンクボタンの場合は、リンク先の数だけボタンを作成する必要があります。
デフォルトが「ボタン」と表示されているので、ページリンクの名前を合わせるためボタンのテキストを編集します。 ボタンの上に表示される「テキストを編集」をクリックし、表示される窓の「ボタンのテキスト」の欄を適切な単語に修正してください。
次にボタンのデザイン変更を行います。 ボタン上部の「筆マーク」をクリックするとボタンデザイン画面が開きます。ここの「デザインをカスタマイズ」をクリックしてください。
ボタンデザインのカスタマイズ画面で、元のページリンクに似せるように、フォントや文字サイズ、色などを変更してください。
上記の要領で、ページリンクのすべてのボタンを作成します。 もし、ページ内の他の部分にもページ内リンクがある場合には、同じようにボタン、または画像・テキストリンクなどで作成してください。 また、ボタンの縦横幅も、他のコンテンツと重ならないように調整してください。
ボタンの作成が完了したら、開発モードでリンクをリロードできるように処理を施します。 開発モードを有効にするには、ページ上部の「Dev Mode」から「開発モードを有効にする」をクリックしてください。
開発モードに切り替えたあとに、右下に「Open masterPage.js」が表示される場合は、そちらのボタンをクリックしてください。
左メニューまたはページタグから「masterPage.js」を選択し、開いた画面のページ上部に「import wixLocation from 'wix-location';」というコードを追加します。
↓上記コードの上に追加します
次に作成したボタン事のリンク先を修正します。 作成したボタンを選択すると、上部に「#button1」というボタンの番号が表示されます。 そして右下の「onClick()」をクリックし、そのボタン番号が表示されますので「+」ボタンをクリックすると、メインウィンドウのmasterPage.jsに、ボタンの挙動を編集できるコードが表示されます。
表示されたボタンの編集コードに、リンク先URLを記載します。 以下の様に、ボタン番号が一致するコードに対して「wixLocation.to("https://")という、飛び先の指定コードを入力します。
例えば、ホームがbutton1だった場合に、ホームへのリンク先のhttps://www.reserve.tripla-hotel.comを設定する場合は、以下の記載方法となります。
↓上記コードの下部にURLコードを追加します
ボタン番号の確認方法について 作成したボタンにマウスを置くと、上部に「#button1」という番号が表示されます。 また、開発モード内のJavascriptコードでも、以下赤枠で囲われた場所にボタン番号が表示されます。
上記の作業が完了したら、新しく作成したリンクボタンをクリックして、ページのリロードを行い遷移する設定が完了しています。
ページ右上の「公開」ボタンを押して、本番URLの状態から、検索窓又はチャットを表示して、正しい挙動になるかご確認ください。 ※もし既にお客様へ本番公開状態の場合は、まずページ下部など分かりにくい場所にダミーのボタンを設置して、正しい挙動が出来るかお試しの上で、全てのページリンク作成をお勧めいたします。
新たに作成したボタンの挙動に問題がなかったら、元からあるテンプレートのページリンクを削除してください。ページリンクを右クリックし、「削除」ボタンで削除できます。
今まではPCビューの修正を行いましたが、モバイルビューの修正が必要ですので、ページ上部のモバイルボタンをクリックし表示を確認してください。 PCビューでは、テンプレートのページリンクを削除しましたが、モバイルビューでは右上にメニューバーが残った状態となります。（テンプレートにより異なります） 新たに作ったリンクボタンがページメインに存在するので、右上のメニューバーは削除し、新たに作ったリンクボタンの場所やサイズを調整してください。
