WIXでのページ遷移エラー対応方法

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がインストールされると、以下の様な画面に切り替わります。

⑤開発モードを無効にする

VEROの導入が完了したら、テンプレートに設置されたページリンクの削除と、新たにリンクボタンを作成する必要があるので、開発モードを無効にして、WIXのエディター画面を開きます。

上部メニューの「Dev Mode」から「開発モードを無効にする」をクリックしてください。

⑥リンクボタンの追加

次にテンプレートのページリンクに変わるリンクボタンを作成しますので、左メニューの「追加」＞「ボタン」から、ページリンクに変わる適切なデザインを選択してください。

⑦リンクボタンの設置

ボタンを追加するとページ内のどこかに表示されますので、適切な場所に移動してください。ここではページリンクの上に、同じものを作りたいと思います。なお、テンプレートのページリンクは1つの固まりとしてパーツが作られていますが、リンクボタンの場合は、リンク先の数だけボタンを作成する必要があります。

⑧ボタンのテキスト修正

デフォルトが「ボタン」と表示されているので、ページリンクの名前を合わせるためボタンのテキストを編集します。ボタンの上に表示される「テキストを編集」をクリックし、表示される窓の「ボタンのテキスト」の欄を適切な単語に修正してください。

⑨ボタンのデザイン変更

次にボタンのデザイン変更を行います。ボタン上部の「筆マーク」をクリックするとボタンデザイン画面が開きます。ここの「デザインをカスタマイズ」をクリックしてください。

⑩ボタンデザインのカスタマイズ

ボタンデザインのカスタマイズ画面で、元のページリンクに似せるように、フォントや文字サイズ、色などを変更してください。

⑪すべてのボタンを設置

上記の要領で、ページリンクのすべてのボタンを作成します。もし、ページ内の他の部分にもページ内リンクがある場合には、同じようにボタン、または画像・テキストリンクなどで作成してください。また、ボタンの縦横幅も、他のコンテンツと重ならないように調整してください。

⑫開発モードを有効にする

ボタンの作成が完了したら、開発モードでリンクをリロードできるように処理を施します。開発モードを有効にするには、ページ上部の「Dev Mode」から「開発モードを有効にする」をクリックしてください。

⑬開発モードで編集

開発モードに切り替えたあとに、右下に「Open masterPage.js」が表示される場合は、そちらのボタンをクリックしてください。

⑭masterPage.jsの編集1

左メニューまたはページタグから「masterPage.js」を選択し、開いた画面のページ上部に「import wixLocation from 'wix-location';」というコードを追加します。

$w.onReady(function () {

↓上記コードの上に追加します

import wixLocation from 'wix-location'; 
$w.onReady(function () {

⑮masterPage.jsの編集2

次に作成したボタン事のリンク先を修正します。作成したボタンを選択すると、上部に「#button1」というボタンの番号が表示されます。そして右下の「onClick()」をクリックし、そのボタン番号が表示されますので「+」ボタンをクリックすると、メインウィンドウのmasterPage.jsに、ボタンの挙動を編集できるコードが表示されます。

⑯masterPage.jsの編集3

表示されたボタンの編集コードに、リンク先URLを記載します。以下の様に、ボタン番号が一致するコードに対して「wixLocation.to("https://")という、飛び先の指定コードを入力します。

例えば、ホームがbutton1だった場合に、ホームへのリンク先のhttps://www.reserve.tripla-hotel.comを設定する場合は、以下の記載方法となります。

export function button1_click(event) { 
　// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 
　// Add your code for this event here:

↓上記コードの下部にURLコードを追加します

export function button1_click(event) { 
　// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 
　// Add your code for this event here: 
　wixLocation.to("https://www.reserve.tripla-hotel.com")

ボタン番号の確認方法について作成したボタンにマウスを置くと、上部に「#button1」という番号が表示されます。また、開発モード内のJavascriptコードでも、以下赤枠で囲われた場所にボタン番号が表示されます。

⑰ページリンクの挙動確認

上記の作業が完了したら、新しく作成したリンクボタンをクリックして、ページのリロードを行い遷移する設定が完了しています。

ページ右上の「公開」ボタンを押して、本番URLの状態から、検索窓又はチャットを表示して、正しい挙動になるかご確認ください。 ※もし既にお客様へ本番公開状態の場合は、まずページ下部など分かりにくい場所にダミーのボタンを設置して、正しい挙動が出来るかお試しの上で、全てのページリンク作成をお勧めいたします。

⑱元からあるページリンクの削除

新たに作成したボタンの挙動に問題がなかったら、元からあるテンプレートのページリンクを削除してください。ページリンクを右クリックし、「削除」ボタンで削除できます。

⑲モバイルサイトの調整

今まではPCビューの修正を行いましたが、モバイルビューの修正が必要ですので、ページ上部のモバイルボタンをクリックし表示を確認してください。 PCビューでは、テンプレートのページリンクを削除しましたが、モバイルビューでは右上にメニューバーが残った状態となります。（テンプレートにより異なります）新たに作ったリンクボタンがページメインに存在するので、右上のメニューバーは削除し、新たに作ったリンクボタンの場所やサイズを調整してください。