スタイリングに加えて、カートにはストアフロントとの連携方法を制御するいくつかの動作設定があります — ドロワーが開くタイミングや、Aftersellがカートと同期させるテーマ要素などです。
カートエディターでCart settingsを開きます。以下のオプションはBehaviorとCustom selectorの下にグループ化されています。
Open cart when an item is addedは、購入者が商品を追加するたびにドロワーが自動的に開くかどうかを制御します。デフォルトではオンになっています。購入者が自分でカートを開くまで閉じたままにしたい場合は、オフにしてください。
AftersellはCSSセレクターを通じてストアフロントと連携します — たとえば、どの要素がカートを開くか、どのカートアイコンの数を同期させるかを認識するためです。組み込みの検出機能は人気のShopifyテーマ(Dawn、Sense、Crave、Debut、Impulse、Horizonなど多数)に対応しているため、ほとんどのストアではこれらの設定に触れる必要はありません。テーマ上で何かが正しく連携していない場合にのみセレクターを調整してください。
各セレクターには同じ3つのモードがあります。
セレクター入力欄は、Default + customモードとCustom onlyモードでのみ有効になります。
- ブラウザ(Chrome推奨)でストアフロントを開きます。
- 対象にしたい要素 — カートアイコン、数の表示、またはカートに追加ボタン — を右クリックして検証を選択します。
- 開いたパネルで、その要素を表すものを見つけます(数の表示は多くの場合、カートアイコン内の
spanです)。
- そのクラス(
.で始まる)またはID(#で始まる)をメモします — たとえば.header__cart-count spanや#CartCountです。
- Cart settingsに戻り、セレクターをDefault + customまたはCustom onlyに設定して貼り付けます。
- 保存して、デスクトップとモバイルの両方でテストします。
まずはDefaultから始めてください — ほとんどのテーマでは設定不要で機能します。複数あるアイコンのうち1つしか更新されない場合(たとえばデスクトップは動作するがモバイルが動作しない場合)はDefault + customを、デフォルトが間違った要素を対象にしている場合はCustom onlyを使用してください。どのセレクターを使うべきかわからない場合は、テーマ開発者に確認してもらえます — コードを書く必要はなく、コピーして貼り付けるだけです。