商品オプション

読了時間: 1分

この章では、商品にオプションを付けてカートインできるECサイトを構築するときのカスタマイズについて説明します。

オプション商品

商品にオプションを付けてカートインさせたいとき、オプションに価格がある場合は、オプションを商品として扱います。

Commerbleでは複数商品の同時カートインに対応しているため、商品とオプション商品を同時にカートインさせることができます。

ただし、同じ商品を異なるオプション商品で購入させたい場合は、Commerbleのカートイン仕様に注意します。異なる商品を同じオプション商品で購入させたい場合も同様です。

カートインの標準仕様

Commerbleのカートイン仕様を下図に示します。

カートイン標準仕様

Commerbleのカートでは、商品IDが明細において一意になります。同じ商品を複数回カートインした場合、最初のカートインの個数が採用されます。つまり、カート内にある商品は追加でカートインできません。

個数を変更する場合は、カート画面で明示的に個数を変更します。

このカートイン仕様は不変で、変更できません。つまり、同じ商品を異なるオプション商品で購入させたい場合は、この仕様を前提に実現方法を考えます。

カスタマイズ実績1 加算方式

テンプレートをセルフカスタムすることで、既にカートイン済みの商品を新たにカートインした際に、その個数分を加算するように変更できます。

カートイン仕様のカスタム1

ただし、明細の備考欄を使用する場合は注意が必要です。複数のカートインで別々の備考を付けてカートインした場合、どちらかを採用するか、もしくは文字列結合して両方を採用するかを決めます。文字列結合する場合は、個数の内訳をどうするかや、備考の文字列制限も考慮します。

このカスタムを実現するには、カートインの前にカート内のすべての明細をクリアし、対象商品を加算した明細データを丸ごと入れ直します。

sequenceDiagram
    ブラウザ->>+Order/Cart: POST itemclear, AntiForgeryToken, returnUrl=全明細カートイン 
    Order/Cart->>Order/Cart: カートクリア
    Order/Cart-->>-ブラウザ: 302 Location=全明細カートイン 
    activate ブラウザ
    ブラウザ->>+Order/Cart: GET 全明細カートイン 
    deactivate ブラウザ
    Order/Cart->>Order/Cart: 加算された全明細を入れ直し
    Order/Cart-->>-ブラウザ: 200 カート画面

カスタマイズ実績2 フロントカート方式

加算方式カスタマイズに加えて、セッションにカートイン情報を保持することで、カートインごとに明細が分離されたフロントカートを作成できます。また、フロントカートデータを受注サービス情報に保存することで、履歴ページでもカートインごとに明細が分離されたフロントカートを再現できます。

カートイン仕様のカスタム2

ただし、カスタマーサポートで明細キャンセルを提供している場合は注意が必要です。管理画面から表示・変更できる明細は、標準仕様に則り、商品IDで一意にまとめられたデータです。これらの明細を変更しても、フロントカート情報を変更するにはサービス情報も変更します。変更点が2つになり、オペレーションの実行が難しくなります。これらを透過的に実行するには、Web APIを用いてカスタム管理画面を作成します。

sequenceDiagram
    ブラウザ->>+FrontCart: カートイン情報
    FrontCart->>FrontCart: カートイン情報をセッションに保存
    FrontCart-->>-ブラウザ: カートクリアフォーム
    activate ブラウザ
    ブラウザ->>+Order/Cart: POST itemclear, AntiForgeryToken, returnUrl=全明細カートイン 
    deactivate ブラウザ
    Order/Cart->>Order/Cart: カートクリア
    Order/Cart-->>-ブラウザ: 302 Location=全明細カートイン 
    activate ブラウザ
    ブラウザ->>+Order/Cart: GET 全明細カートイン 
    deactivate ブラウザ
    Order/Cart->>Order/Cart: 加算された全明細を入れ直し
    Order/Cart-->>-ブラウザ: 200 カート画面 

    ブラウザ->>+Purchase/Order: 購入
    Purchase/Order->>Purchase/Order: セッションのカートイン情報をサービス情報に保存
    Purchase/Order-->>-ブラウザ: 購入完了画面