このレッスンでは、カートボタンをカスタマイズします。カート自体をカスタマイズするには、ショッピングカートのカスタマイズをご覧ください。
デフォルトのカート要素にスタイルを設定する
デフォルトでは、カートボタンにはアイコン、テキストブロック「カート」、カート数量要素が含まれています。
カートアイコン
カートアイコンの色を変更するには、フォントの色を適用できます。
カート [テキストブロック]
ボタンのテキストを編集したり、ダブルクリックしてカートの数量または小計に接続したりできます。これを、通常のタイポグラフィ要素のようにスタイル設定できます。
カート数量 [Text block]
このテキストブロックはカート数量フィールドに接続されており、編集はできません。これを通常のタイポグラフィ要素のようにスタイル設定できます。
カートボタンに要素を追加または削除する
カートに他の要素を追加したり、異なる画像やテキストブロックを追加して、カートボタンを自由にスタイル設定できます。カートアイコンとテキストブロックは削除できますが、カート数量要素は削除できません。これはカートの設定を使用して非表示にすることができます。以下で詳しく説明します。
カート数量の設定をカスタマイズする
デフォルトでは、カートボタンにはカート数量(カート内の合計アイテム数)が表示されます。
Cart quantity elementを非表示にするには:
- Cart buttonをダブルクリックします。
- 右側に表示される要素設定パネルからCart quantityボタンを切り替えます。
カートが空の場合にカート数量を非表示にするには:
- Cart quantityをダブルクリックします。
- Cart quantity settingsからHide when the cart is emptyをチェックします。
カート内に小計を表示する
カートボタンにカートの小計を表示するには:
- カートにtext blockを追加します。
- Get the text from Cart > Subtotal( Inner text settingsから)を選択します。