このレッスンでは、カートボタンをカスタマイズします。カート自体をカスタマイズするには、次ページの「ショッピングカートをカスタマイズする」を参照してください。

このレッスンでは

  1. デフォルトのカート要素のスタイル
  2. カートボタンへの要素の追加と削除
  3. カートの数量設定をカスタマイズする
  4. カートで小計を表示する

について説明しています。

1. デフォルトのカート要素のスタイル

デフォルトでは、カートボタンは、アイコン、テキストブロック「cart」の文字、カート数量の要素を含みます。

The Cart button includes a shopping cart icon, the word Cart and a blue number three in a white circle. There are three items in the cart.

"カートアイコン"[アイコン]

カートアイコンの色をフォントカラーを適用して変更することができます。

"カート" [テキストブロック］

ボタンのテキストを編集したり、ダブルクリックでカートの数量や小計に接続することができます。タイポグラフィーの要素と同じようにスタイルを設定することができます。

The Inner text settings panel includes a collection list check box to "get text from" Cart, a drop down menu to select the field none, quantity or subtotal and an x icon to close on the top right of the panel.

"カート数量" [テキストブロック］

このテキストブロックは、編集できないCart quantityフィールドに接続されています。この要素は、他のタイポグラフィー要素と同様にスタイルを設定することができます。

2. カートボタンへの要素の追加と削除

カートには、別の画像やテキストブロックなどの要素を追加して、カートボタンのスタイルを自由に変更することができます。カートアイコンとテキストブロックは削除できますが、カート数量エレメントは削除できません。ただし、非表示にすることができます。

3.カートの数量をカスタマイズする

デフォルトでは、カートボタンはカートの数量（カート内のアイテムの合計）を表示します。

カート数量の要素を非表示にするには

  1. Cartボタンをダブルクリックします。
  2. Cart quantity(合計)ボタンを切り替える（右側に開く要素設定パネルから）。


The cart button settings includes the text Cart Quantity and a switch button on the right side.

カートが空のときにカート数量を隠すには

  1. カートの中身をダブルクリックします。
  2. カートの数量の設定から、カートが空になったら隠すをチェックします。
The cart quantity settings includes a check box for "Hide when cart is empty"

4. カートの小計を表示する

  1. カートの小計をカートボタンに表示させCartにテキストブロックを追加します。
  2. カートからテキストを取得 > 小計（内側のテキスト設定から）を選択します。
A text block inner text settings panel includes a check box to "Get text from" Cart. The subtotal field is selected in the drop down menu. There is also a show all settings button.