카트 및 팝업 함수 빌드

샘플 프로젝트 및 사용 사례 > 사용 사례: 3D-Guided Service Instructions > 3D-Guided Service Instructions 301: 모델에 가격 데이터 및 쇼핑 카트 추가 > 카트 및 팝업 함수 빌드

카트 및 팝업 함수 빌드

이 자습서에서는 부품을 클릭하면 클릭 가능한 버튼으로 부품을 카트에 추가하고, 어셈블리 분해 시퀀스를 보고, 모델을 계속 검사할 수 있도록 팝업에 기능을 추가하는 방법에 대해 중점적으로 알아봅니다. 하지만 이러한 기능을 팝업에 추가하려면 버튼에 연결할 수 있는 함수가 있어야 합니다. 이 섹션에서는 카트에 부품을 추가하고 어셈블리 분해 시퀀스를 시작하기 위한 함수를 생성합니다. 카트에는 cartRepeater 위젯에 저장되는 정보가 포함되고 이 정보는 부품이 주문에 추가됨에 따라 늘어납니다.

이 섹션의 전체 코드는 GitHub의 부록 3에서 확인할 수 있습니다.

Home.js를 엽니다. 팝업에서 버튼을 클릭하여 모델과 상호 작용하려면 다음과 같은 함수를 생성해야 합니다. 이러한 함수는 각각 버튼에 연결됩니다.

함수

설명

코드

addToCart

선택한 부품을 카트에 추가합니다. 이 함수는 독립형 함수로 생성됩니다.

다음 단계를 완료합니다.

1. hilite 함수 아래에서 cartLabel 응용 프로그램 매개 변수를 초기화하여 Cart라고 표시합니다.

이는 labelCart 레이블의 시작 텍스트가 되며 카트에 항목이 추가되면 변경됩니다. 또한 cart로 이름이 지정된 빈 객체를 초기화합니다. hilite 함수 아래에 다음을 추가합니다.

$scope.app.params.cartLabel = "Cart"; // set cartLabel app parameter to be "Cart". This will bind to the Text property for the labelCart label
$scope.cart = {}; // declare empty object called cart

2. addToCart 함수를 시작합니다. cartItem라는 이름의 변수가 생성되고 현재 선택한 부품과 동일한 cart의 속성 값으로 초기화됩니다.

부품을 처음 선택하면 카트가 빈 객체로 초기화되었기 때문에 이 속성은 정의되지 않습니다.

현재 선택 항목이 아직 카트 객체에 추가되지 않았거나 undefined가 호출되면 cartItem은 선택한 부품에 대한 itemCount, itemNumber, itemName 및 priceInfo 응용 프로그램 매개 변수로 채워집니다.

이러한 모든 응용 프로그램 매개 변수는 cartItem 객체 내에서 속성 값으로 설정됩니다. 동일한 부품의 다른 인스턴스가 카트에 추가되었으므로, 항목이 이미 카트에 추가된 경우 cartItem에서 변경되는 유일한 속성은 1씩 증가하는 itemCount 매개 변수입니다.

이 if 문 뒤에 cartItem 객체와 해당 속성이 카트 객체에 추가됩니다. 이 프로세스를 통해 카트에 추가된 여러 부품을 구별할 수 있습니다.

$scope.cart = {}; // declare empty object called cart 뒤에 다음을 추가합니다.

//
// function for adding a selected part to the cart   
$scope.addToCart = function () {
  //
  // create variable called cartItem that is equal to the value of the currentSelection property of the cart object. 
  //If the selected part hasn't been added to the cart yet, then the cartItem variable will be undefined and populate the cartItem variable with the current 
  //information about the part so that cartItem becomes an object. If the selected part has already been added, then the count property of cartItem will increase by the item count
  var cartItem =$scope.cart[$scope.currentSelection];
  
  if (cartItem === undefined) {
  	cartItem = { count: $scope.app.params.itemCount, 
                   itm: $scope.app.params.itemNumber, 
                   tag: $scope.app.params.itemName, 
                   prc: $scope.app.params.priceInfo }
  } else {
    cartItem.count += $scope.app.params.itemCount
  }
  
  $scope.cart[$scope.currentSelection] = cartItem;
} // end of addToCart function

3. 함수에 대해 더 많은 변수를 초기화합니다. cartItemAmount는 카트에 있는 항목 수를 세는 데 사용되고 cartContents는 빈 배열로 초기화되어 카트의 콘텐츠를 보유하며 cartPrice는 카트에 있는 객체의 총계가 됩니다. $scope.cart[$scope.currentSelection] = cartItem; 뒤에 다음을 추가합니다.

  //
  //cartItemAmount initialized as 0. will be used to count how many items are in the cart
  var cartItemAmount = 0;
  
  //  
  // set an empty array for the cart. this array will have an object pushed into it 
  var cartContents = [];
  
  //  
  // initialize variable for keeping track of the price of the objects in the cart
  var cartPrice = 0;

4. for 루프는 카트에 있는 각 항목을 반복하여 다음 조건을 확인하는 데 사용됩니다.

itm은 루프의 집계 변수가 됩니다. 이 루프에서 선택한 부품에 해당하는 객체의 count 속성은 부품의 다른 인스턴스가 카트에 추가될 때마다 증가합니다.

이 외에도 가격 변수인 cartPrice는 선택한 항목의 카트에 있는 prc 속성에 따라 증가합니다.

항목이 카트에 추가되면 부품 가격에 추가된 부품 수량을 곱한 만큼 총계가 증가합니다.

.push 메서드를 사용하면 선택한 객체의 이름(tag), 수량(count) 및 가격(prc)이 cartContents 배열로 푸시됩니다. 그러면 cartContents 배열이 카트 응용 프로그램 매개 변수와 동일하게 설정됩니다.

이 루프는 이전에 추가되고 cart 응용 프로그램 매개 변수에 바인딩된 반복기 위젯을 채우는 데 사용됩니다. 반복기는 화면에 cart 배열의 각 행을 표시하고 cart 내부의 데이터가 변경될 때마다 콘텐츠를 재평가하고 디스플레이를 변경합니다.

var cartPrice = 0; 뒤에 다음 코드를 추가합니다.

  //
  //loop over each item that is added to the cart
  for (var itm in $scope.cart) {
    
    //
    //add a number to the counting variable for each item added
    cartItemAmount += $scope.cart[itm].count;
    
    //
    // add the price of each item to the total price of the cart
    cartPrice = cartPrice += $scope.cart[itm].count*$scope.cart[itm].prc
    
    //
    //push the name (tag), item count (count), and price (prc) of each part into the repeater for the cart
    cartContents.push({ 
      tag  : $scope.cart[itm].tag, 
      count: $scope.cart[itm].count, 
      prc  : $scope.cart[itm].prc
    }); // end of the push method for cartContents
    
  }// for loop end
  
  //
  // set the app parameter for cart to be equal to the cartContents array
  $scope.app.params.cart = cartContents;

5. addToCart 함수의 마지막 부분에는 cartLabel 응용 프로그램 매개 변수에 값을 추가하여 labelCart 레이블의 텍스트를 편집하는 작업이 포함됩니다.

$scope.app.params.cart = cartContents; 뒤에 다음 코드를 추가합니다.

  //
  //setting the cartLabel app parameter. if there are items to put into the cart (true), the text of the cart label should be cart(total cost of cart). If false, just keep the label text as cart
  $scope.app.params.cartLabel = cartItemAmount > 0 ? "Cart($" + cartPrice + ")" 
  												   : "Cart";

clearCart

이 함수는 clearButton 버튼을 클릭하면 카트를 초기화합니다. 이 함수는 카트의 응용 프로그램 매개 변수를 빈 배열로 설정하고, cart 객체를 비어 있도록 설정하고, cartLabel 응용 프로그램 매개 변수를 사용하여 총계 없이 Cart로 다시 설정되도록 labelCart 버튼의 텍스트 속성을 변경합니다.

addToCart 함수 뒤에 다음 코드를 추가합니다.

//
// clear the cart. set the part app parameter and cart object to be empty. change the text on the cart label back to just Cart
$scope.clearCart = function () {
  
  $scope.app.params.cart = [];
  $scope.cart = {};
  $scope.app.params.cartLabel = "Cart";
  
} // end of clearCart function

hiliteOff

이 함수는 팝업이 닫힐 때 셰이더가 모델에서 제거되도록 합니다. hiliteOff 함수는 PTC API 내에서 셰이더가 부품에 추가되는 아래에 생성됩니다.

$scope.hilite([$scope.currentSelection], true); 바로 아래 다음 코드를 추가합니다.

    //
    //function for removing the highlight
    $scope.hiliteOff = function() {
      
      $scope.hilite([$scope.currentSelection], false)
      
    }; // end of hiliteOff function

disassemble

disassemble 함수는 PTC API 내에서도 생성되며 팝업의 Disassemble 버튼에 기능을 추가하는 데 사용됩니다. playButton에서와 동일한 로직을 사용하고 모델의 시퀀스가 설정될 때 sequenceloaded 이벤트 수신기를 트리거합니다.

방금 생성한 hiliteOff 함수 바로 아래 다음 코드를 추가합니다.

//
    // function to be bound to the Disassemble button in the popup
    $scope.disassemble = function () {
      
      //
      // set an object that targets the model and its instruction property
      var modelObject = {      model: targetName, 
                         instruction: 'l-Creo 3D - ' + instructionName + '.pvi' };
      
      //
      // set the sequence for the quadcopter to be the name of the associated instruction
      $scope.view.wdg.quadcopter.sequence = modelObject.instruction
      
    } //disassemble function end

카트를 작성하고 팝업 함수를 만들었으므로 이제 팝업 버튼 생성 방법을 살펴보겠습니다.

도움이 되셨나요?