FlexCard Designer を使用した CPQ Cart FlexCard の設定

学習の目的

この単元を完了すると、次のことができるようになります。

• CPQ カート FlexCard の外観を変更する。
  
• CPQ カート FlexCard に項目を追加する。
  

ベストプラクティス

CPQ カート FlexCard を設定する前に、以下のベストプラクティスを考慮してください。

1. 既存の FlexCard をコピーして、新しい FlexCard で作業してください。ただし、プロトタイプを作成する目的では、作業する各 FlexCard の新しいバージョンを作成するほうが簡単です。これにより、望ましくない変更が発生した場合でも、元の状態に戻すことができます。
   
2. FlexCard を変更する前に無効化してください。そうしないと、FlexCard の変更がロックされます。
   
3. 変更が完了したら、FlexCard を再び有効化してください。そうしないと、CPQ カートが正しく機能しなくなります。
   

CPQ カート FlexCard の外観と操作感を設定する

CPQ カートの外観と操作感に影響を与える簡単な調整について見ていきましょう。通常は、CPQ カートタブの各親カードを視覚的に大きく変更したいと考えます。今回は、[Catalog (カタログ)] タブと [Cart (カート)] タブに注目します。

背景色を変更する

大きな変更でもすばやく行うことができます。まずは CPQ カートの背景色を変更しましょう。 

1. [Catalog (カタログ)] タブの背景色を変更するには、Omnistudio FlexCards アプリケーションで cpqBrowsePhaseContainer を検索してクリックし、カードの利用可能なバージョンを表示します。その後、バージョン 2 をクリックして開きます。
   
2. [New Version (新しいバージョン)] をクリックして、カードの新しいバージョンを作成します。
   
3. 右ペインの [Style (スタイル)] をクリックします。
   
4. [Background Color (背景色)] 項目に #F0F0F0 と入力します。
   

これにより、[Catalog (カタログ)] タブの背景色が中間的なグレーに設定されます。

フォントを変更する

次に、簡単な調整を行います。デフォルトのフォントを変更すると、微妙ながらも会社のブランドに合わせた効果が得られます。cpqBrowsePhaseContainer を開いた状態で、このカードのフォント CSS を変更します。この CSS の変更は、すべての子カートフォントにも適用されます。 

[Style (スタイル)] タブの [Inline CSS Styles (インライン CSS スタイル)] 項目に font-family: Arial, Helvetica, sans-serif; と入力します。

これにより、Web ブラウザーはこのページのテキストを Arial フォントで表示します。Arial が利用できない場合は Helvetica、さらに Helvetica が利用できない場合は sans-serif が使用されます。

ブランドを追加する

次は、もう少し重要な変更を試しましょう。たとえば、Infiwave という会社では、会社のアプリケーション (CPQ カートを含む) にロゴを入れるとします。手順は次のとおりです。 

1. [Build (ビルド)] タブをクリックし、[Image Element (Image 要素)] をドラッグアンドドロップして左列の一番上、検索バーの上に配置します。
   
2. 新しい Image 要素を選択した状態で、[Properties (プロパティ)] タブの Image Source (画像のソース) 項目の下にある青い虫眼鏡アイコンをクリックします。
   
3. [Upload Files (ファイルをアップロード)] をクリックして任意の画像をアップロードするか、演習ガイドに含まれている Infiwave の画像を保存してアップロードします。
   
4. アップロードが完了したら [Done (完了)] をクリックし、次に [Save (保存)] をクリックします。[Catalog (カタログ)] タブの CPQ カートのこの列に、画像がブラウザーの幅に合わせて拡大または縮小されて表示されます。
   

パディングを追加する

ロゴと [Search (検索)] 項目の距離が近すぎる場合はどうしたらよいでしょうか。パディングを追加することで、CPQ カート FlexCard の要素間のスペースを調整できます。 

手順は次のとおりです。

1. 追加した Image 要素をクリックします。
   
2. [Style (スタイル)] タブをクリックします。
   
3. [Alignment (配置)] セクションの [Padding Type (パディング種別)] で [Bottom (下)] を選択し、[Padding Size (パディングサイズ)] で [Medium (中)] を選択します。
   
4. [Padding Size (パディングサイズ)] の右にある青いプラスボタンをクリックします。これで、ロゴの下に少しスペースができました。
   
5. [Activate (有効化)] をクリックしてカードを有効化します。
   
6. プロセスが完了したら [Done (完了)] をクリックします。
   

バッジを削除する

バッジは商品をカートに追加すると表示されます。たとえば、電話商品をカートに追加すると、この商品が誰かのアカウントに追加されることを示す「Add (追加)」というバッジが表示されます。ですが、このバッジは人によって役に立ったり立たなかったりします。そこで、バッジを表示するブロックに条件を設定し、API から受け取った値が Add の場合にのみバッジが表示されるように設定できます。

手順は次のとおりです。

1. Omnistudio FlexCard のリストに戻ります。
   
2. cpqCartFlexTable (version 2) を検索してクリックします。このカードは cpqCartSummaryContainer の子カードで、カート品目用のバッジが含まれます。更新内容は親カードにも反映されます。
   
3. FlexCard の新しいバージョンを作成します。
   
4. カードの上部付近にある Block-2-Block-0-Block-6 という名前のブロック (1) をクリックします。ブロックにカーソルを合わせると名前が表示されます。
   
5. [Conditions (条件)] の右にある [Edit (編集)] をクリックします。すでにこのブロックには、一括変更が実行されていない場合にのみ表示されるという条件があります。
   
6. このモーダルの下部で [+ Add Condition (条件を追加)] をクリックします。
   
7. [Data Field (データ項目)] 項目に vlocity_cmt__Action__c.value と入力します。これは CPQ API からこのカードに渡される [Action (アクション)] 項目の値です。
   
8. 演算子を != に変更します。
   
9. [Value (値)] 項目に Add と入力します。
   
10. [Save (保存)] をクリックしてカードを有効化します。このブロックは、カート品目のアクションが Add (2) である場合には表示されなくなるため、CPQ カートでは Add バッジが表示されなくなります。
    

CPQ カート FlexCard に項目を追加する

CPQ カートに初期設定では表示されない項目を追加したい場合はどうしたらよいでしょうか。CPQ API と Integration Procedure を利用すれば簡単に項目を追加できます。必要なのは、該当する場所で項目の API 参照名を指定するだけです。 

たとえば、商品の販売開始日をユーザーに表示し、いつから商品が販売されるのかを知らせたいとします。この情報を [Catalog (カタログ)] タブに追加する手順は次のとおりです。

1. Omnistudio FlexCard リストから子カード cpqProductDetailsPopup を検索してクリックします。
   
2. バージョン 1 をクリックして開きます。これは [Catalog (カタログ)] タブでクリックされた商品の子カードです。
   
3. カードの新しいバージョンを作成します。
   
4. [Build (ビルド)] パネルから [Rich Text Field (リッチテキスト項目)] 要素をカード内の [Description (説明)] の下にドラッグアンドドロップします。
   
5. [Properties (プロパティ)] ペインの要素テキストエリアに On sale starting: と入力します。
   
6. 次に、[Output Field (出力項目)] をテキスト項目の下にキャンバスへドラッグアンドドロップします。
   
7. [Field Properties (項目プロパティ)] の [Field Type (項目種別)] で [Date (日付)] を選択します。
   
8. [Field Properties (項目プロパティ)] 内の Output field に Product2.vlocity_cmt__SellingStartDate__c を入力します。これは [Selling Start Date (販売開始日)] 値の API 項目です。API が商品詳細を取得すると、この値が Product2 ノード内に配置されます。
   
9. [Format (形式)] 項目で日付の形式を指定します。
   
10. カードを有効化します。
    

最後の設定例として、子 FlexCard を使用して [Catalog (カタログ)] タブに商品画像を追加してみましょう。 

1. Omnistudio FlexCard タブに移動し、[New (新規)] をクリックして新しい FlexCard を作成します。
   
2. 名前として cpqProductTileImage と入力し、[Is Child Card (子カードかどうか)] を選択します。
   
3. [Next (次へ)] をクリックし、さらに [Save (保存)] をクリックします。
   
4. この子カードを設定したら、cpqProductTileList (version 2) を開き、新しいバージョンのカードを作成します。
   
5. TileView - Browse Phase アコーディオンを展開します。
   
6. 右ペインの [Build (ビルド)] タブをクリックします。
   
7. レイアウトの [Product Name (商品名)] のすぐ下に FlexCard 要素をドラッグアンドドロップします。
   

8. [FlexCard Name (FlexCard 名)] に FlexCard cpqProductTileImage と入力し、動的検索結果から作成した子カードを選択します。
   
9. [Data Node (データノード)] に {record.Attachments} と入力します。Attachments は商品画像の URL を格納する商品レコードのノードです。これらの URL は Product Designer で入力または変更できます。
   

10. 追加した FlexCard にカーソルを合わせ、[View Card (カードを表示)] をクリックします。
    
11. 子 FlexCard で右ペインの [Build (ビルド)] タブをクリックします。
    
12. Image 要素を FlexCard にドラッグアンドドロップします。
    
13. [Image Source (画像のソース)] 項目に {url} と入力します。この変数は、Attachments ノードで画像 URL の値が格納されている場所を表します。Image 要素は画像 URL を解析して表示します。
    
14. FlexCard を有効化します。
    
15. この動作を確認するため、既存の注文を開くか、新しい注文を作成します。[Catalog (カタログ)] タブに移動し、タイルアイコンを使用してビューを商品のタイルビューに変更します。 
    

FlexCard Designer を利用すれば、LWC カートを簡単にカスタマイズできます。

Industries CPQ カートは Lightning Web コンポーネントと FlexCard Designer を使用して構築された、顧客と営業担当者のための多機能で簡単に設定できるアプリケーションです。明確なビジネス目標を持って開発マイルストーンを設定し、CPQ カートの機能をしっかりと理解して使いこなせば、素晴らしいセールスエクスペリエンスを実現できます。

リソース

• Industries Training Playground にサインアップします
• プラクティスガイド: Add Fields to a CPQ Cart FlexCard (CPQ カート FlexCard に項目を追加する)