팝업 버튼 생성
addToCart 및 disassemble 함수를 만들었으므로 이제 대화식으로 작동하도록 팝업에 추가합니다. 팝업의 템플릿도 부품 간의 차이를 고려하여 변경됩니다.
 |
이 섹션의 전체 코드는 GitHub의 Appendix 4에서 제공됩니다.
|
1. Add to Cart 버튼이 addToCart 함수가 첨부된 price 변수에 추가됩니다. 부품과 연관된 가격이 있는 경우에만 버튼이 표시되므로 팝업 대신 Add to Cart 버튼이 price 변수에 추가됩니다. .close 메서드 및 hiliteOff 함수도 버튼에 연결되어 버튼을 클릭하면 팝업을 닫고 셰이더를 제거합니다.
var price = priceString != undefined ? '</br>$' + parseFloat(priceString) + '</div><div ng-click="hiliteOff(); popup.close();addToCart();"> Add to Cart</div>'
: "";
2. 이제 팝업의 템플릿을 편집하여 itemCount 응용 프로그램 매개 변수, 부품 가격 및 Continue 버튼을 추가합니다.
1. 아래와 같이 팝업 템플릿에 itemCount 응용 프로그램 매개 변수와 price 변수를 추가합니다.
template: '<div>' + $scope.app.params.itemCount + 'x ' + partNumber +
'</br>' + partName +
price + '</div>',
2. Continue 버튼이 팝업 템플릿에 직접 추가됩니다. 이 버튼을 클릭하면 다른 작업을 수행하지 않고 팝업이 닫힙니다. 클릭 시 hiliteoff 함수 및 .close 메서드가 활성화됩니다. 이제 팝업에는 카트에 부품을 추가하고 팝업을 닫는 버튼이 표시됩니다.
//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x ' + partNumber +
' [/br]' + partName +
price +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',
3. 어셈블리 분해 시퀀스를 2D 인터페이스의 버튼에 바인딩하는 대신 팝업의 버튼에 바인딩합니다. 특정 부품에만 해당하는 어셈블리 분해 시퀀스가 있으므로 표시할 팝업 버전을 결정하는 if else 문을 생성해야 합니다. 예를 들어, Add to Cart, Disassembly 및 Continue 버튼으로 구성하거나 Add to Cart 및 Continue 버튼만으로 구성합니다. if else 문의 두 부분은 모두 instructionName 변수의 길이를 기반으로 합니다. 팝업의 각 버튼에는 이 자습서의 뒷부분에서 다룰 함수가 추가됩니다.
1. 첫 번째 조건의 경우 instructionName 변수의 길이가 0이면 선택한 부품에 연관된 어셈블리 분해 시퀀스가 없음을 의미합니다. 선택한 부품에 연관된 어셈블리 분해 시퀀스가 없는 경우 팝업에 Disassemble 버튼이 필요하지 않습니다. 팝업의 현재 상태인 Add to Cart 및 Continue 버튼만 표시됩니다. 팝업이 호출되는 위치 위에 다음과 같은 새로운 코드 줄을 추가하고 if 문 외부에서 액세스할 수 있도록 팝업 변수의 범위를 변경합니다. if 문 내에서 올바르게 정렬되도록 코드를 들여씁니다.
if (instructionName.length == 0) {
//
// adds an ionic popup when a part is clicked. Show the quantity, part number, name, and price of the selected object. </br> adds a line break between the two variables
$scope.popup = $ionicPopup.show({
//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x ' + partNumber +
' </br>' + partName +
price +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',
scope: $scope
}); //end of ionic popup
}
2. else 조건은 부품과 연관된 어셈블리 분해 시퀀스가 있을 때 케이스에 대한 팝업을 호출합니다. 그러면 Add to Cart, Disassemble 및 Continue의 세 가지 버튼이 모두 있는 팝업이 호출됩니다. Disassemble 버튼은 disassemble 함수는 물론hiliteOff 및 popup.close도 호출합니다.
} else {
//
// adds an ionic popup when a part is clicked. Show the quantity, part number, name, and price of the selected object. [/br] adds a line break between the two variables
$scope.popup = $ionicPopup.show({
//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x ' + partNumber +
' </br>' + partName +
price +
'<div ng-click="hiliteOff();popup.close();disassemble();">Disassemble</div>' +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',
scope: $scope
}); //end of ionic popup if there is a disassembly sequence associated with it
} // end of if statement
4. 미리 보기를 클릭합니다.
1. 팝업에 적용된 변경 사항을 보려면 로터 중 하나를 클릭합니다. 아직 스타일이 적용되지 않았지만 각 버튼을 클릭할 수 있습니다. 각 버튼을 사용하여 모델과 어떻게 상호 작용하는지 확인합니다.
2. 이제 쿼드콥터의 베이스를 클릭하여 부품과 연관된 어셈블리 분해 시퀀스가 없는 경우 팝업의 차이를 확인합니다.
3. 마지막으로 PCB를 클릭합니다. PCB를 클릭하면 가격이 표시되지 않고 카트에 부품을 추가할 수 있는 옵션이 제공되지 않음을 알 수 있습니다. 이는 이전에 PCB와 배터리를 단일 부품으로 결합했으며 개별 PCB에는 이와 연관된 가격이 없기 때문입니다.
4. 세 가지 다른 버전의 팝업이 모두 성공적으로 표시되면 이 섹션을 완료한 것입니다.
이 섹션의 마지막 부분에서는 CSS를 사용한 경험 스타일 적용 방법을 살펴보겠습니다.