置換文字一覧

コマースクリエイターの、以下の箇所で利用できる置換文字をご紹介しています。

• フリーパーツ追加・変更
• フリーページ追加・変更-本文
• ページ設定

測定タグで利用可能な置換文字については、測定タグ設定で利用可能な置換文字一覧をご覧ください。

＜目次＞

• 管理画面＞コマースクリエイターで使用できる置換文字一覧
• フリーパーツ「表示内容」で利用できる置換文字
  • 共通情報（全ページ）
  • 商品に関する情報（商品詳細／商品詳細（定期）／商品グループ／商品検索結果一覧／クーポン対象商品一覧／バンドル対象商品一覧／お気に入り）
  • 商品グループに関する情報（商品グループ）
  • 検索フォーム入力・指定値（商品検索結果一覧）
  • バンドル販売に関する情報（バンドル対象商品一覧）
  • クーポンに関する情報（クーポン対象商品一覧）
  • STAFF START(スタッフスタート)連携に関する情報
• ページ設定で利用できる置換文字
• 「再入荷お知らせメール停止」URLの置換文字
• 会員情報置換文字
  • 会員情報置換文字を利用したログイン・ログアウト表示例
• カート内の商品数について
• アイテム置換文字
  • アイテム置換文字をコピーする方法
  • アイテム置換文字を利用できる場所

フリーパーツ「表示内容」で利用できる置換文字

フリーパーツで使用できる置換文字です。使用できる置換文字はフリーパーツを配置するレイアウトの種類や配置するパーツにより異なります。

共通情報（全ページ）

全ページで表示可能です。

商品に関する情報（商品詳細／商品詳細（定期）／商品グループ／商品検索結果一覧／クーポン対象商品一覧／バンドル対象商品一覧／お気に入り）

商品詳細／商品詳細（定期）／商品グループ／商品検索結果一覧／クーポン対象商品一覧／バンドル対象商品一覧／お気に入りにて商品情報を表示する際にご利用いただけます。

注意事項

以下のページについては、表示できる箇所が限定されております。

• 「商品グループ（商品一覧）」ページ：「商品一覧」エリア内のみで表示可
• 「商品検索結果一覧」ページ：「商品一覧(商品検索結果)」エリア内のみで表示可
• 「クーポン対象商品一覧」ページ：「商品一覧(クーポン)」エリア内のみで表示可
• 「バンドル対象商品一覧」ページ：「商品一覧(バンドル)」エリア内のみで表示可
• 「お気に入り」ページ：「お気に入り一覧」エリア内のみで表示可

商品グループに関する情報（商品グループ）

商品グループページに表示できます。

検索フォーム入力・指定値（商品検索結果一覧）

商品検索フォームに入力された値を置換文字で出力できます。
キーワードや商品価格を再検索フォームの初期値に入れるなど、様々な用途にご利用いただけます。

商品検索フォームについては、商品検索フォームをご覧ください。

バンドル販売に関する情報（バンドル対象商品一覧）

バンドル対象商品一覧ページに表示できます。

クーポンに関する情報（クーポン対象商品一覧）

クーポン対象商品一覧ページに表示できます。

STAFF START(スタッフスタート)連携に関する情報

STAFF START(スタッフスタート)連携オプションで利用できる置換文字です。

ページ設定で利用できる置換文字

ページ設定で利用できる置換文字です。
タイトル・キーワード・概要・ページ見出し・パンくず表示名で、以下の置換文字が使用できます。

一人ひとり異なる会員の情報を画面に出力できる、特殊な置換文字です。

フリーパーツの表示内容、フリーページの本文にて利用できる置換文字です。

会員情報置換文字は{@ member.nickname @}のように、「{@ 」と「 @}」を前後につけて入力してください。
会員情報を表示するため、他の置換文字とは違う記法となっています。

会員情報置換文字を記載した部分を「fs-clientInfo」というclassを付与した要素で囲んでください。

<div class="fs-clientInfo">{@ member.nickname @}</div>

なお、こちらの置換文字はHTML出力時点では置換されておらず、ブラウザ上で置換されます。
よってJavaScriptプログラムへの利用された場合、正しく動作しない場合がございます。

注意事項

会員情報置換文字はコマースクリエイター自動生成ページ（コマースクリエイター＞ページ一覧およびフリーページ一覧にあるページ）のみで動作します。

コマースクリエイター＞アイテム一覧に保存した静的ページや、別の仕組みで表示されたページでは動作いたしません。

フリーパーツの表示内容、フリーページの本文で使用できる会員情報置換文字

会員情報置換文字を利用したログイン・ログアウト表示例

ログイン状態を表示する会員情報置換文字「{@ member.logged_in @}」とCSSを利用して、会員ログイン中または仮ログイン（自動ログイン）（ECサイト会員ログイン履歴あり）ならば「ログアウト」を、非会員（ゲスト・ログイン履歴なし）ならば「ログイン」「会員登録」を表示します。

HTML記述例

<div class="fs-clientInfo">
<span class="logout my-{@ member.logged_in @}"><a href="/p/logout">ログアウト</a></span>
<span class="login my-{@ member.logged_in @}"><a href="/p/login">ログイン</a></span>
<span class="regist my-{@ member.logged_in @}"><a href="/p/register">会員登録</a></span>
</div>

CSS記述例
（コマースクリエイター＞テーマ＞オリジナルCSSに記載してください。フリーパーツに記述する場合は、タグで囲んでください。）

.logout.my-false { display: none; }
.login.my-true { display: none; }
.regist.my-true { display: none; }

※class名「my-{@ member.logged_in @}{.bg-green-50 .text-teal-600}」は、会員ログイン中または仮ログイン（自動ログイン）ならば「my-true」と出力されるため「ログイン」「会員登録」を、非会員ならば「my-false」と出力されるため「ログアウト」を非表示にしています。

フリーパーツの表示内容、フリーページの本文にて利用できる置換文字（class指定）を利用すると、カート内の商品数を表示できます。
「通常カート」、「定期・頒布会カート」それぞれに表示できます。

サンプルイメージ
本サンプルは表示デザインのCSSを別途記述しています。（スタートアップテーマでの例）

手順については、カート内の商品数を表示するをご覧ください。

コマースクリエイター＞アイテム一覧にて、アイテム（画像など）を追加すると、自動的に置換文字が生成されます。
アイテム一覧ページで置換文字をコピーし、表示したい場所に貼り付けます。

アイテム置換文字をコピーする方法

アイテム一覧-一覧表示項目［置換文字コピー］ボタンを押下します。

アイテム置換文字を利用できる場所

アイテム一覧-アイテム置換文字が利用できる場所をご覧ください。
※ページ設定では利用できません。