キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

レイアウトパーツ

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

レイアウトパーツの使用方法

レイアウトパーツとは

  • レイアウトパーツはレイアウト内で使用するパーツです。
  • レイアウトパーツはHTML要素を出力できるため、括り(wrap)タグとして使用できます。
  • レイアウトパーツの中にパーツを配置できます。レイアウトのパーツ配置エリア内で「階層」のように表示されます。
  • レイアウトパーツは表示条件を設定できます。

レイアウトパーツを追加する

レイアウトパーツを追加するボタンを押下すると、レイアウトパーツ設定ダイアログが表示され、レイアウトパーツを追加できます。

パーツ名

レイアウトパーツの名称を設定できます。

HTML

HTML要素
div・article・section・nav・aside・header・main・footerタグのいずれか、または「指定なし」から選択してください。パーツを囲むwrapタグを設定できます。
id/classを指定する場合は、「指定なし」以外のいずれか選択してください。
id
HTML要素のid属性の値を設定できます。
class
HTML要素のclass属性の値を設定できます。

OK

レイアウトパーツを追加します。レイアウトパーツはパーツ配置エリアの一番下に追加されます。

キャンセルする

レイアウトパーツを追加しません。

レイアウトパーツの操作

パーツ配置エリアでレイアウトパーツの操作するボタンを押下すると、レイアウトパーツを操作できます。

表示しない

表示しないボタンを押下すると、レイアウトパーツはレイアウトに配置されていますが、ECサイトには表示されなくなります。レイアウトパーツに含まれるパーツも同様です。
HTMLタグも出力されません。(コメントアウトではありません。)

表示するボタンを押下すると、レイアウトパーツがECサイトに表示されます。

パーツを変更する

レイアウトパーツの変更するボタンを押下すると、レイアウトパーツ設定ダイアログが表示され、HTML要素・id・classを変更できます。

パーツをレイアウトから外す

レイアウトから外すボタンを押下すると、レイアウトパーツが削除されます。いったんレイアウトから外したレイアウトパーツは復元できません。

レイアウトパーツを開く(レイアウトパーツ内にパーツを配置する)

レイアウトパーツの開くボタンを押下すると、レイアウトパーツ内にパーツを配置する画面へ遷移します。レイアウトパーツ内にパーツを配置する画面へ遷移すると、パーツ配置エリアの上部に「body > 」につづく階層としてパンくずリンクが表示されます。

レイアウトパーツ内にパーツを配置する画面に遷移後、パーツ一覧からパーツをドラッグして、パーツ配置エリアに配置してください。

レイアウトパーツ内にはパーツの他に、別のレイアウトパーツも配置できます。
なお、いったん配置されたレイアウトまたはレイアウトパーツから、別のレイアウトパーツへ(階層)を移動できません。

レイアウトパーツを閉じる

パーツ配置エリアの上部に「body > 」からつづくパンくずリンクを選択すれば、レイアウトパーツを閉じられます。

レイアウトパーツを閉じている場合(レイアウトパーツが配置されている階層で)は、レイアウトパーツ内に配置したパーツは表示されません。

表示条件を設定する

レイアウトパーツには表示条件を設定できます。
指定した条件に合致する場合のみ、レイアウトパーツと「レイアウトパーツ内に配置したパーツ」が表示されます。

パーツ配置エリアでレイアウトパーツの操作するボタンを押下して、表示条件を設定するを押下します。
表示条件設定ダイアログが表示されます。各条件を設定し、各条件の左にあるチェックボックスをつけてOKボタンを押下すると表示条件が設定されます。
レイアウト変更画面に戻りますので、プレビューすれば表示条件が反映されます。
保存するボタンを押下すれば表示条件が保存され、ECサイトに反映されます。(有効なレイアウトの場合)

AND条件

レイアウトパーツには複数の条件を設定できます。複数の条件を設定するとAND条件(絞り込み条件)となります。

別の方法として、表示条件(A)を設定したレイアウトパーツ(親)内に、別の表示条件(B)を設定したレイアウトパーツ(子)を配置すると、レイアウトパーツ(子)の階層に配置されたパーツは、表示条件(A)と表示条件(B)に合致する場合のみ表示されます。

OR条件

表示条件(A)を設定したレイアウトパーツと、別の表示条件(B)を設定したレイアウトパーツを並べて配置し、かつ、表示条件(A)と表示条件(B)が相反する条件だった場合、それぞれのレイアウトパーツ内に配置されたパーツは、表示条件(A)または表示条件(B)に合致する場合のみ表示されます。

表示条件一覧

いずれかの条件に合致した場合にレイアウトパーツとレイアウトパーツ内に配置されたパーツが表示されます。

表示条件は、条件設定可能なページが設定されています。また商品グループに関する条件(下表「親グループ(1階層目)URLコード」から「闇市商品グループ」まで)は「商品グループエリア」内の、商品に関連する条件(下表「商品番号」から「入出荷予定日」まで)は、商品詳細レイアウトの「商品詳細エリア」・商品一覧レイアウトの「商品一覧エリア」内のレイアウトパーツでのみ設定できます。

●:使用可能、▲:商品一覧部分のみ可能、★:お気に入りリスト商品一覧部分のみ可能(表示可能ページからモーダルは除く)
条件 選択肢・指定方法 条件補足 用途・表示例 表示可能ページ 関連する置換文字
商品 商品グループ カート マイページ その他・フリーページ
ログインログイン済/未ログイン今回の来訪でログイン(メールアドレスとパスワードを入力しログインボタンを押下する操作)をしていればログイン済(未ログインの場合に、会員登録を誘導する)--
自動ログインログイン済/未ログイン過去ログインした履歴があり、まだログイン操作をしていない状態ならばログイン済(ご注文の前に)ログインしてください--------
会員ステージ会員ステージ名を選択(単数)ログインしている会員が任意の会員ステージならば会員ステージの特典を表示
次のレベルの会員ステージ特典を表示
Amazonログインログイン済/未ログイン--(Amazonアカウントでご購入の場合の注意など)--------
LINEログインログイン済/未ログイン--LINEメッセージでクーポンを配布しました--------
Amazonアカウント連携連携済/未連携--Amazonアカウントでログインできます--------
LINE連携連携済/未連携--LINE IDと連携すると、LINEでメッセージが受け取れます--------
親グループ(1階層目)URLコード商品グループURL(複数指定不可)(第一階層の商品グループが)任意の商品グループならばブランド名(商品グループ名)などの表示--------
親グループURLコード商品グループURL(複数指定不可)(親の商品グループが)任意の商品グループならば--------
闇市商品グループ対象/対象外(親の商品グループが)闇市商品グループならばブランド名(商品グループ名)などの表示--------
商品番号商品番号(複数指定不可)----
商品URL商品URL(複数指定不可) ----
商品グループ(メイン)商品グループURL(複数指定不可)----
商品グループ(サブ) 商品グループURL(複数指定不可)----
商品タグ商品タグ(複数指定不可)----
バンドル割引対象 対象/対象外バンドル割引対象商品ならば----バンドル販売名
闇市商品対象/対象外メイン商品グループが闇市の場合----
クール便対象対象/対象外対象商品ならば----
メール便対象対象/対象外対象商品ならば----メール便同梱可能個数
購入個数制限対象 対象/対象外対象商品ならば----購入個数制限数
個別送料対象対象/対象外対象商品ならば----商品個別送料
商品価格(定価) あり/なし定価が登録されていれば----通常価格(定価)
販売価格
商品価格(会員価格) あり/なし会員価格が登録されていれば----販売価格
会員価格・会員ステージ価格
商品価格(会員ステージ価格) あり/なしログインしている会員が任意の会員ステージならば----会員価格・会員ステージ価格
商品価格(会員ステージ価格) 会員ステージ名を選択(単数)ログインしている会員が任意の会員ステージならば----会員価格・会員ステージ価格
消費税税込/税抜----
商品種別通常販売/予約販売----
商品在庫有無在庫あり/在庫なし----
商品在庫僅少チェックボックスバリエーション商品は対象外----
販売期間販売期間前/販売期間中/販売期間終了----
販売期間開始までの日数 1ヶ月前/1週間前/3日前/前日システム日時にて判定----販売開始までの日数
販売期間終了までの日数 1ヶ月前/1週間前/3日前/前日システム日時にて判定----販売終了までの日数
予約在庫有無在庫あり/在庫なし----
予約在庫僅少チェックボックスバリエーション商品は対象外----
予約販売期間販売期間前/販売期間中/販売期間終了----
予約期間開始までの日数 1ヶ月前/1週間前/3日前/前日システム日時にて判定----予約販売終了までの日数
予約期間終了までの日数 1ヶ月前/1週間前/3日前/前日システム日時にて判定----予約販売終了までの日数
入出荷予定日あり/なし----入出荷予定日表記名

レイアウトパーツの表示条件設定と、フリーパーツの会員情報置換文字について

ECサイトに会員情報を表示する場合、置換文字が使用できます。フリーパーツの表示内容に「会員情報置換文字」を記載すれば、会員ログインおよび自動ログイン時に会員個別の情報に置き換えて表示できます。
なお、ログインをされていない場合は、各種置換文字は置換されません。置換文字部分が削除されます。

会員情報を表示する際のレイアウトパーツ使用方法

会員情報を表示する場合は、会員情報置換文字を記載したフリーパーツを、[ログイン:ログイン済]の表示条件を設定したレイアウトパーツ内に配置してください。
具体的には以下のように配置していただくと、会員情報を適切に表示できます。(HTMLタグは省いて記載してます。)

レイアウトパーツ 条件:ログイン[ログイン済]
 └フリーパーツ(会員情報を記載 表示内容は以下)

{@ member.last_name @} {@ member.first_name @}様こんにちは。
会員ステージ:{@ member.stage_name @}
ご利用可能ポイント:{@ member.total_points @}point
(有効期限:{@ member.purchase_point_expiration @})

ポイント詳細
ご購入ポイント:{@ member.active_points @}point
有効待ちポイント:{@ member.pending_points @}point
特別ポイント:{@ member.special_points @}point
(特別ポイント有効期限:{@ member.special_point_expiration @})

ECサイトでは以下のように表示されます。なお、未ログインの場合は何も表示されません。

未来 太郎様こんにちは。
会員ステージ:シルバー
ご利用可能ポイント:1,678point
(有効期限:2019/12/31)

ポイント詳細
ご購入ポイント:678point
有効待ちポイント:123point
特別ポイント:1,000point
(特別ポイント有効期限:2019/06/01)

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。