Kingsbell のコマース層は Shopify ネイティブの商品、バリアント、カート、検索、コレクション、顧客、レコメンドを使用します。視覚バリエーションも同じコマースエンジンを再利用します。
商品とバリアント
Kingsbell は次をサポートします。
- レスポンシブな商品メディア。
- 通常価格、セール、売り切れ、単価表示。
- SKU、在庫、店頭受取可否。
product.options_with_valuesに基づくオプション。- option value ID と Combined Listings。
- 数量、Ajax カート追加、ダイナミックチェックアウト。
- エラー、ローディング、アコーディオン、アプリブロック。
- 補完商品と関連商品。
単一バリアント、複数オプション、選択不可の組み合わせ、売り切れ、単価、多数メディアの商品を確認してください。
商品フォームとカード
バリアント ID、数量、該当する selling plan、エラー、無効状態、ダイナミックチェックアウト設定を維持してください。視覚変更で Shopify フォームの契約を変えてはいけません。
商品カードは主要メディア、任意の第 2 画像、バッジ、価格、在庫状態、Quick Add を共有します。選択が必要な商品で Quick Add がオプション選択を回避しないようにします。
コレクション、フィルター、並び替え
コレクションは Shopify のネイティブフィルター、並び替え、ページネーション、共通商品カード、Ajax 更新、ブラウザ履歴を使用します。
フィルターの組み合わせ、解除、価格範囲、並び替え、ページネーション、戻る・進む、共有 URL、結果なし、JavaScript なしの状態を検証してください。
カート
Kingsbell はカートドロワーとカートページを提供します。Ajax による数量変更と削除は Shopify の bundled section rendering で同期します。
商品フォームと Quick Add からの追加、ドロワー、数量、削除、line item property、selling plan、在庫エラー、空カート、JavaScript なしの fallback を確認します。
確定金額は必ず Shopify の応答を使用してください。
検索とレコメンド
予測検索は商品、検索候補、コレクション、ページ、記事を返せます。検索ページはフィルター、並び替え、ページネーション、Ajax に対応します。
レコメンドは Shopify Recommendations API を使用し、0 件、設定数未満、販売不可商品、遅延応答、セクション再読み込みを処理できる必要があります。
ナビゲーション、アカウント、アプリ
ヘッダーは多階層ナビゲーション、モバイルメニュー、検索、カート、現在の Customer Account 要素に対応します。Shopify Navigation と route object を使用し、URL をハードコードしないでください。
商品テンプレートと Flexible content はアプリブロックに対応します。保存、モバイル、スクリプト重複、性能、バリアント・カート・アカウントへの影響を確認します。
回帰テスト
共通 snippet、フォーム、カード、フィルター、カート JavaScript を変更した場合は、バリアント、カート追加、価格、フィルター、検索、レコメンド、アプリブロック、アカウントルート、キーボード、Reduced Motion を再検証してください。