WixCodeの使い方(その4:ダイナミックページの作成)

WixCodeの使い方(その4:ダイナミックページの作成)

Posted at November 29,2017 12:03 AM
Tag:[Wix]

本エントリーでは、「WixCodeの使い方(その2:データベース作成とデータの設定)」および「WixCodeの使い方(その3:サンドボックスデータとライブデータについて)」で公開したデータをもとに、ダイナミックページを作成する方法を説明します。

1.ダイナミックページの作成とURL設定

左サイドバーの「Collections」→「Products」の右側にあるギアアイコンをクリックして「Add a Dynamic Page」をクリック。

Add a Dynamic Page

「動的ページのタイプを選択」ダイアログが表示されるので「Item」を選択して「Next」をクリック。

(クリックで拡大、以下同様)
動的ページのタイプを選択

「Set Up Your Dynamic Item Page」ダイアログが表示されるので、ダイナミックページのURLを指定します。

Set Up Your Dynamic Item Page

今回のサンプルでは、URLの末尾はデフォルトで「Products(データベース名)/ProductName(キーとなるフィールド名)」になっていて、"ProductName"が可変データとなります。ちなみにデータベース作成時のカラム名「Title」がそのままであれば、「Title」がURLの末尾になります。

URL右側の「Add Field」をクリックすれば、データベースの任意のフィールドをURLのキーとして選択できます。

URLは直接編集することも可能です。

URL直接編集

編集が終わったら右下の「Create Page」をクリック。ここではデフォルトの「Products/ProductName」のままで説明を進めます。

Create Page

「Create Page」をクリックすると、ダイナミックページの編集画面に遷移し、左サイドバーには、

Products Page(Data)
 Products(Product Name)

が表示されます。

ダイナミックページの編集画面に遷移

また、ダイナミックページの編集画面には「Products Item」というアイコンが表示されます。

ダイナミックページの編集画面に遷移

2.ダイナミックページの編集とデータベースの連携

次にダイナミックページを編集します。

ダイナミックページ編集画面で、データベースの「Product Name」に該当するテキストを配置します。

「追加」→「テキスト」→「ページタイトル」を選択してページ上にドラッグ。

ページタイトル

表示はこのようになります。

表示

次に、ページタイトルとデータベースの「Product Name」を連携させます。

「ページタイトル」をクリックして、右上のデータベースアイコンをクリック。

データベースアイコン

「Connect Text」というダイアログが開きます。

Connect Text

「Connect a dataset」から「Products Item」、「Connection Options」の「Text connections to」の項目から「Product Name(Text)」を選択します。

選択

選択後の表示です。

選択後の表示

関連付けたあと、データベースアイコンが緑色で表示されます。

データベースアイコン

同じ手順で「Price」「Image」に該当するオブジェクトを配置、関連づけます。「Price」は「追加」→「テキスト」→「段落」を選択します。

Price

データベースの「Price(Number)」と関連づけます。

Price

画像は、「追加」→「画像」→「アップロード」をクリック。

アップロード

任意の画像を選択して「ページに追加」をクリック。

画像選択

このように表示されます。

表示

データベースの「Image(Image)」と関連づけます。

表示

関連づけたオブジェクトの全体のレイアウトはつぎのようになります。

全体のレイアウト

3.ダイナミックページのプレビューと公開

データの関連づけが完了したら、右上の「プレビュー」をクリック。

プレビュー

各ダイナミックページのプレビューが行なえます。

ダイナミックページのプレビュー

別のダイナミックページをプレビューしたい場合は、右上の<または>をクリック。

ダイナミックページのプレビュー

「エディタに戻る」をクリックすれば、ダイナミックページの編集画面に戻ります。

エディタに戻る

公開するには、右上の「公開」をクリック。

公開

これでダイナミックページが公開されました。「おめでとうございます!」というダイアログが表示されるのでそのまま閉じます。

おめでとうございます!

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)