示例项目和用例 > 用例:3D-Guided Service Instructions > 3D-Guided Service Instructions 303:使用 ThingWorx 创建持久化购物车 > 完成 Vuforia Studio 体验
  
完成 Vuforia Studio 体验
创建绑定后,创建持久化购物车的最后一步是使用在选择零件时出现的弹出窗口调用 addToCart 服务。调用 addToCart 服务的最终结果会是将零件添加到 ThingWorx 内的购物车中。在本节中,当您将电池和 PCB 组合到 electronics 零件时,您还将回顾 Metadata 101 的内容。此外,我们还将删除不再需要的代码,以使代码尽可能保持简洁。
* 
本节的完整代码可在 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. 移除整个 clearCart 函数,因为该功能已转移到 ThingWorx 中的相应服务。
6. 删除用于创建 cartLabel 应用程序参数和 cart 对象的代码,因为我们也不再需要这些代码了。
7. 为了访问 electronics 组合零件的定价数据,必须添加逻辑以提高具体值数据在其结构中的级别。这样可使有关 electronics 零件的数据在您单击 PCB 或电池时显示在弹出窗口中。
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 属性,则 welding 设置为 falsewhile 循环结束。
b. 若要查看此逻辑的最终效果,请单击“预览”。单击 PCB 的末端。您会注意到,弹出窗口中现在含有 electronics 组合零件的零件名称、显示名称和价格。先前并未显示价格,弹出窗口中显示的是 PCB 的信息。
8. 在此用例的最后一步,您将查看您完成的体验