カートとポップアップ用の関数の作成
このチュートリアルで非常に重要なことは、ポップアップに機能を追加するということです。つまり、任意の部品をクリックするとクリック可能なボタンが表示され、カートに部品を追加したり、逆アセンブリシーケンスを表示したり、モデルの検査を続行したりできるようにします。ただし、これらのボタンをポップアップに追加する前に、これらのボタンに関数を関連付ける必要があります。このセクションでは、部品をカートに追加し、逆アセンブリシーケンスを開始するための関数を作成します。カートには、cartRepeater ウィジェットに保存されている情報が格納されます。注文する部品が増えると、カートのサイズも大きくなります。
 |
このセクションに記載されているコードの完全版は、GitHub の Appendix 3 で見つかります。
|
「Home.js」を開きます。ポップアップでボタンをクリックしてモデルをインタラクティブな方法で操作するには、以下の関数を作成する必要があります。これらの各関数が、1 つのボタンに関連付けられることになります。
|
関数
|
説明
|
コード
|
||
|---|---|---|---|---|
|
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 2. addToCart 関数を開始します。cartItem という変数を作成して初期化し、現在選択している部品に対応する cart のプロパティ値として設定します。
部品を初めて選択する場合、このプロパティは undefined になります。cart は空のオブジェクトとして初期化されているからです。
現在選択している部品をまだ cart オブジェクトに追加していない (undefined になっている) 場合、選択している部品の itemCount、itemNumber、itemName、priceInfo の各アプリケーションパラメータが cartItem に渡されます。
これらのアプリケーションパラメータはすべて cartItem オブジェクト内のプロパティ値として設定されます。アイテムをすでにカートに追加したことがある場合、itemCount パラメータの cartItem のプロパティ値のみが 1 つ増加して変更されます。同じ部品の別のインスタンスがカートに追加されているからです。
以下の if 文が実行された後、cartItem オブジェクトとそのプロパティは cart オブジェクトに追加されます。このプロセスはカートに追加されるさまざまな部品を区別するのに役立ちます。
$scope.cart = {}; // declare empty object called cart の後に以下を追加します。
// 3. 関数の変数をさらに初期化します。cartItemAmount はカート内のアイテムの数をカウントします。cartContents はカートのコンテンツを保持する空の配列として初期化します。cartPrice はカート内のオブジェクトの合計金額を示します。$scope.cart[$scope.currentSelection] = cartItem; の後に以下を追加します。
// 4. for ループを使用してカート内の各アイテムをループし、指定した条件が処理されるようにします。
itm はループのカウント変数です。このループでは、部品の別のインスタンスがカートに追加されるたびに、選択した部品に対応するオブジェクトの count プロパティ値が増加します。
また、価格変数である cartPrice は、選択したアイテムのカートの prc プロパティに基づいて増加します。
アイテムをカートに追加すると、部品の価格と追加した部品の数量を乗算した値によって金額が増加します。
.push メソッドを使用して、選択したオブジェクトの名前 (tag)、数量 (count)、価格 (prc) を cartContents 配列にプッシュします。この後、cartContents 配列は cart アプリケーションパラメータと同じ値に設定されます。
var cartPrice = 0; の後に以下のコードを追加します。
// 5. addToCart 関数の最後のセクションでは、cartLabel アプリケーションパラメータに値を追加して、labelCart ラベルのテキストを編集するように指定します。
$scope.app.params.cart = cartContents; の後に以下のコードを追加します。
// |
||
|
clearCart
|
この関数は clearButton ボタンがクリックされるとカートをクリアします。この関数は、cart のアプリケーションパラメータを空の配列に設定し、cart オブジェクトを空にします。また、cartLabel アプリケーションパラメータを使用して、labelCart ボタンの「テキスト」プロパティを Cart に戻し、合計金額が表示されないようにします。
|
addToCart 関数の後に以下のコードを追加します。
// |
||
|
hiliteOff
|
この関数はポップアップが閉じると、モデルからシェーダーが除去されるようにします。hiliteOff 関数は、PTC API 内の、シェーダーを部品に追加するコードの下に作成されます。
|
$scope.hilite([$scope.currentSelection], true); のすぐ下に以下のコードを追加します。
// |
||
|
disassemble
|
disassemble 関数も PTC API 内に作成します。ポップアップの Disassemble ボタンに機能を追加するために使用します。モデルのシーケンスが設定されると、playButton で使用されるロジックと同じロジックを使用して sequenceloaded イベントリスナーをトリガーします。
|
上の手順で作成した hiliteOff 関数のすぐ下に以下のコードを追加します。
// |
これで、カートとポップアップ用の関数が作成されました。次に、ポップアップボタンの作成に進みます。