置換文字一覧

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

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

＜目次＞

• フリーパーツ「表示内容」で利用できる置換文字
  • 共通情報（全ページ）
  • 商品に関する情報（商品詳細／商品詳細（定期）／商品グループ／商品検索結果一覧／クーポン対象商品一覧／バンドル対象商品一覧／お気に入り）
  • 商品グループに関する情報（商品グループ）
  • 検索フォーム入力・指定値（商品検索結果一覧）
  • バンドル販売に関する情報（バンドル対象商品一覧）
  • クーポンに関する情報（クーポン対象商品一覧）
  • 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を別途記述しています。（スタートアップテーマでの例）

ナビゲーション上などに、「通常カート」と「定期・頒布会カート」へのリンクを分けて表示する方法は、「ショッピングカート」と「ショッピングカート（定期）」のナビゲーションについてをご覧ください。

表示される数字はショッピングカートの「数量」と同じです。同じ商品を2個購入すると2に、同じ商品の違うバリエーションを購入してもそれぞれカウントされます。（赤を1個、青を1個で2となります。）

数字の桁区切り（カンマ）は入りません。（1000と出力されます。）

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

注意事項

カート内の商品数置換文字はコマースクリエイター自動生成ページのみで動作します。（コマースクリエイター＞ページ一覧にあるページおよびコマースクリエイター＞フリーページ一覧）コマースクリエイター＞アイテム一覧に保存した静的ページや、別の仕組みで表示されたページでは動作いたしません。

「通常カート」の場合

カート内の商品数を表示したいHTMLタグに「fs-client-cart-count」というclassを記述してください。
「fs-client-cart-count」というclassを記述されたHTMLタグにショッピングカートの「数量」の数字を出力します。

（例）

<div class="fs-client-cart-count"></div>
↓
<div class="fs-client-cart-count">1</div>

タグの内容はすべてショッピングカートの「数量」の数字に書き換わります。
見出しなどを記載している場合、削除されますのでご注意ください。

（成功例）

<div>カート内の商品数：<span class="fs-client-cart-count"></span></div>
↓
<div>カート内の商品数：<span class="fs-client-cart-count">1</span></div>

（ショッピングカートへのリンク例）

<div>カート内の商品数：<a href="/p/cart" class="fs-client-cart-count"></a></div>
↓
<div>カート内の商品数：<a href="/p/cart" class="fs-client-cart-count">1</a></div>

（失敗例）

<div class="fs-client-cart-count">カート内の商品数：</div>
↓
<div class="fs-client-cart-count">1</div>

「定期・頒布会カート」の場合

カート内の商品数を表示したいHTMLタグに「fs-client-subscriptionCart-count」というclassを記述してください。
「fs-client-subscriptionCart-count」というclassを記述されたHTMLタグにショッピングカートの「数量」の数字を出力します。

（例）

<div class="fs-client-subscriptionCart-count"></div>
↓
<div class="fs-client-subscriptionCart-count">1</div>

タグの内容はすべてショッピングカートの「数量」の数字に書き換わります。見出しなどを記載している場合、削除されますのでご注意ください。

（成功例）

<div>カート内の商品数：<span class="fs-client-subscriptionCart-count"></span></div>
↓
<div>カート内の商品数：<span class="fs-client-subscriptionCart-count">1</span></div>

（ショッピングカートへのリンク例）

<div>カート内の商品数：<a href="/p/cart" class="fs-client-subscriptionCart-count"></a></div>
↓
<div>カート内の商品数：<a href="/p/cart" class="fs-client-subscriptionCart-count">1</a></div>

（失敗例）

<div class="fs-client-subscriptionCart-count">カート内の商品数：</div>
↓
<div class="fs-client-subscriptionCart-count">1</div>

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

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

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

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

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