샘플 프로젝트 및 사용 사례 > 사용 사례: 3D-Guided Service Instructions > 3D-Guided Service Instructions 303: ThingWorx를 사용하여 지속 쇼핑 카트 만들기 > Vuforia Studio 경험 완료
  
Vuforia Studio 경험 완료
바인딩이 생성되면 지속 카트 생성의 마지막 단계는 부품을 선택할 때 나타나는 팝업을 사용하여 addToCart 서비스를 호출하는 것입니다. addToCart 서비스를 호출하면 궁극적으로 ThingWorx 내 카트에 부품이 추가됩니다. 이 섹션에서는 배터리와 PCB를 electronics 부품에 결합하는 방법을 다룬 3D-Guided Service Instructions 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 서비스를 호출합니다. pid, qtyprice 입력에 아래 변수를 사용합니다.
//
// 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 결합 부품에 대한 가격 데이터에 액세스하려면 구조에서 발생 데이터를 한 수준 위로 가져오는 로직을 추가해야 합니다. 이를 통해 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
위의 코드는 다음과 같이 작동합니다.
while 루프가 발생하도록 트리거하는 welding라는 변수가 생성됩니다.
while 루프 내에 sbominfo라는 변수가 생성됩니다. sbominfo 변수는sBOM_Welded 속성 값으로 설정됩니다. sbominfo에 정보가 있고 sBOM_Welded 속성의 값이 true이면 발생 색인이 선택한 부품의 상위 부품으로 한 단계 롤백됩니다.
즉, electronics는 PCB 및 배터리의 상위 부품으로 간주되므로 PCB 또는 배터리를 선택할 때마다 발생 경로(pathId)가 electronics 부품의 경로가 됩니다. 선택한 부품에 sBOM_Welded 속성이 없으면 weldingfalse로 설정되고 while 루프가 종료됩니다.
b. 작동 방식을 확인하려면 미리 보기를 클릭합니다. PCB의 끝을 클릭합니다. 이제 팝업에 전자 결합 부품의 부품 이름, 표시 이름 및 가격이 표시됩니다. 이전에는 가격과 PCB에 대한 정보가 팝업에 표시되지 않았습니다.
8. 이 사용 사례의 마지막 단계에서는 완료된 경험 확인 방법을 살펴보겠습니다.