サンプルプロジェクトとユースケース > ユースケース: 3D-Guided Service Instructions > 3D-Guided Service Instructions 303: ThingWorx を使用した永続的なショッピングカートの作成 > Vuforia Studio エクスペリエンスの最終処理
  
Vuforia Studio エクスペリエンスの最終処理
バインドを作成した後は、部品を選択すると表示されるポップアップを使用して addToCart サービスを呼び出します。これが永続的なカートを作成する最後の手順になります。addToCart サービスを呼び出すと、部品は最終的に ThingWorx 内のカートに追加されます。このセクションには、3D-Guided Service Instructions 101に関連する情報も記載されています。バッテリーと PCB が結合された electronics 部品の処理手順について説明します。また、コードをできるかぎり無駄のない状態に保つため、不要になったコードを削除します。
* 
このセクションに記載されているコードの完全版は、GitHub の Appendix 1 で見つかります。
1. 「Home.js」を開きます。
2. コードから priceInfo アプリケーションパラメータを削除します。カートの合計金額は ThingWorx で計算されるので、このアプリケーションパラメータは不要になります。
3. コードから priceInfo を除去した状態で、price 変数を $scope.price に変更し、コード内のどこからでもアクセスできるようにします。また、$ はポップアップのテキストとラベルフィルタに追加されるので、条件文から削除します。
a. ポップアップテンプレート内で、setTemplateprice の入力を $scope.price に変更し、新しいスコープが適用されるようにします。
//
// call the setTemplate function to popuplate the template
template: $scope.setTemplate(meta, $scope.price),
b. setTemplate 関数に移動します。addTo 変数に $ を追加し、部品が使用可能な場合は、ポップアップ上で価格の前にドル記号が表示されるようにします。
//
// if price != unavailable, define an add to cart button and have the price displayed in the popup, if it is unavailable, just display price
var addTo = price != 'UNAVAILABLE' ? '$' + price + '&nbsp;</div><div class="btnadd" ng-click="hiliteOff();popup.close();addToCart();">Add to Cart</div>'
: price ;
4. addToCart 関数が表示されるまで上方向にスクロールします。
a. addToCart サービスは addToCart 関数と同じ機能を持っているので、この関数の本体全体を除去します。除去すると、コードは以下のようになります。
//
// function for adding a selected part to the cart
$scope.addToCart = function () {

} //end of addToCart function
b. triggerDataService 関数を使用して、ThingWorx から addToCart サービスを呼び出します。以下の変数を使用して、pidqtyprice の各入力情報を取得します。
//
// call addToCart service from ThingWorx
twx.app.fn.triggerDataService('cartThing', 'addToCart', {pid: $scope.meta.partNumber, qty: 1, price: $scope.price});
5. ThingWorx のサービスは clearCart 関数と同じ機能を持っているので、この関数全体を除去します。
6. cartLabel アプリケーションパラメータと cart オブジェクトを作成するコードは、不要になったので除去します。
7. electronics 複合部品の価格データにアクセスするには、オカレンスデータを構造内の 1 つ上のレベルに引き上げるロジックを追加する必要があります。これにより、PCB またはバッテリーのいずれかをクリックすると、electronics 部品に関するデータがポップアップに表示されるようになります。
a. $scope.meta のすぐ上に以下のコードを追加します。
//
// variable to pull the value for the occurrence property in the eventData JSON object from the model. Create variable for the currently selected part
var pathId = JSON.parse(eventData).occurrence
$scope.currentSelection = targetName + "-" + pathId

//
// set welding = true until it is turned false
var welding = true
while (welding) {

//
//if the part is welded, use its parent part
var sbominfo = metadata.get(pathId, 'sBOM_Welded');
if (sbominfo != undefined && sbominfo === 'true') {

//try parent until the root is reached
var child = pathId.lastIndexOf('/');
if (child === 0)
return;

pathId = pathId.substr(0, child);

} else {
welding = false;
} // end of if statement
} //end of while loop
上記のコードは以下のように機能します。
welding という名前の変数を作成します。この変数は while ループをトリガーします。
while ループ内で sbominfo という名前の変数を作成します。sbominfo 変数は sBOM_Welded 属性の値を使用して設定します。sbominfo に情報が含まれており、sBOM_Welded 属性の値が true である場合、オカレンスのインデックスは選択した部品の親部品のレベルにロールバックされます。
つまり、electronics は PCB とバッテリーの親部品とみなされるので、PCB やバッテリーが選択されるたびに、オカレンスパス (pathId) は electronics 部品のパスに設定されます。選択した部品に sBOM_Welded 属性が含まれていない場合、weldingfalse に設定され、while ループが終了します。
b. この動作を確認するには、「プレビュー」をクリックします。PCB の端点をクリックします。ポップアップに electronics 複合部品の部品名、表示名、価格が表示されます。以前は価格が表示されず、PCB の情報はポップアップに表示されました。
8. 次に、エクスペリエンスの表示に進みます。