[flexcoders] Adding Quantity to Cart

[Sal H.]

I created this cart and now I'm trying to code the actionscript to
handle all the capabilities. So far I am able to add items to the cart
using an ArrayCollection. Now, I am having trouble adding the quantity
according to what the numeric stepper indicates. I'm using a standard
tilelist and the numeric stepper is located in the item renderer.
Also, I want to be able to increase the quantity if the same item gets
added to the cart. Any suggestions please let me know. Below is a my code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="vertical" xmlns="*" creationComplete="srv.send()">
        
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
                        
[Bindable] public var cartItems:ArrayCollection = new ArrayCollection();
                        
public var formatter:CurrencyFormatter = null;
                        
public function buyItem(event:Event):void{
        addItemToCart(event.target.data);
}
public function addItemToCart(product:Object):void{
        cartItems.addItem({image: product.image,
        partNum: product.partNum,
        qty: 1,
        price: product.price});
}
                        
public function currencyFunction(item:Object, dgc:DataGridColumn):String{
        if(formatter==null){
        formatter = new CurrencyFormatter();
                                        
CurrencyFormatter(formatter).precision=2;
                                        
CurrencyFormatter(formatter).rounding="up";
}
return formatter.format(item[dgc.dataField]);
}
]]>
</mx:Script>
        
        <mx:CurrencyFormatter id="cf" currencySymbol="$" precision="2"/>
        
        <mx:HTTPService id="srv"
url="http://www.cedcat.com/data/overStock.xml"; useProxy="false" 
result="(srv.lastResult.overStock.product)" showBusyCursor="true"/>
                
<mx:TileList width="100%" height="100"
dataProvider="{srv.lastResult.overStock.product}">
        <mx:itemRenderer>
        <mx:Component>
                <cartOverStock buy="outerDocument.buyItem(event)"/>
        </mx:Component>
        </mx:itemRenderer>
</mx:TileList>
        
<mx:DataGrid id="cartGrid" textAlign="center" dataProvider="{cartItems}">
<mx:columns>
<mx:DataGridColumn id="partNum" width="120" headerText="Product"
dataField="partNum" editable="false"/>
<mx:DataGridColumn id="quantity" width="60" headerText="Qty" 
rendererIsEditor="true" dataField="qty" editable="false"/>
<mx:DataGridColumn width="80" headerText="Price" dataField="price" 
editable="false" labelFunction="currencyFunction"/>
</mx:columns>
</mx:DataGrid>
        
</mx:Application>

// cartOverStock Component
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="145"
height="100">
<mx:Metadata>
[Event("buy")]
</mx:Metadata>
        
        <mx:CurrencyFormatter currencySymbol="$" id="cf" precision="2"/>
        
        <mx:VBox left="5" right="5" top="5" bottom="5" verticalGap="0">
                <mx:Label text="{data.partNum}"/>
                
                <mx:HBox width="100%" height="100%" horizontalGap="3">
                        <mx:Canvas width="100%" height="100%" 
borderStyle="solid"
cornerRadius="4" 
                    borderThickness="3" id="canvas1" backgroundColor="#FFFFFF">
                                <mx:Image width="100%" height="100%" 
verticalAlign="middle" 
                                        horizontalAlign="center" 
source="{data.image}"
                                        completeEffect="Fade"/>
                        </mx:Canvas>
                        <mx:VBox width="55" height="100%" verticalAlign="middle"
horizontalAlign="center" verticalGap="2">
                                <mx:Label text="{cf.format(data.price)}" 
width="55"
textAlign="left" fontWeight="bold"/>
                                <mx:NumericStepper width="100%" 
id="qtyNumStepper" minimum="1"/>
                                <mx:LinkButton label="Buy" width="55"
                                        click="dispatchEvent(new 
Event('buy',true))"/>
                        </mx:VBox>
                </mx:HBox>
        </mx:VBox>
        
</mx:Canvas>