Shopping cart behaviors

July 30, 2000
by Pat McClellan

Dear Multimedia Handyman,

I'm new at Lingo and need to create an interactive order form but I'm stuck. I'd like to use check boxes and have values assigned to those check boxes. When the user clicks on a check box the total price gets updated and a picture of the item appears on screen. Similar to customizing a car: click on option, see it as it would look installed and then update the final price. So depending on the state of the check box the price would increase or decrease and a related image would appear or disappear.

Chris

Dear Chris,

Imagine how you would do this by hand. As the user selects an item, you'd add its price to the total, and if the user changed their mind, you'd deduct the price. You can do that in Lingo pretty easily. Let's say that you have a global variable called gTotal. When the user highlights one of the check boxes, then the associated price needs to be added to gTotal. Likewise, when a box is deselected, you'll want to deduct the price from gTotal. Try it out for yourself in this demo.

D7 download for Mac or Windows.

To build this, start by adding a behavior to the checkboxes. You'll want to be able to specify the price. That will allow you to re-use the same behavior for items of different prices. In the mouseUp handler, it checks to see if the hilite of the member is true (whether the box is checked). If so, it adds its pMyPrice value to gTotal. Otherwise, it deducts its value from gTotal.

global gTotal
property pMyPrice, pMem

on getPropertyDescriptionList me

  set pdlist to [:]
  addprop pdlist, #pMyPrice, [#comment:"My price:", #format:#float, #default:10.00]
  return pdlist

end getPropertyDescriptionList

on beginSprite me

  the floatPrecision = 2
  pMem = sprite(me.spriteNum).member
  pMem.hilite = FALSE
  if voidP(gTotal) then gTotal = 0.00

end beginSprite

on mouseUp me

  if pMem.hilite = TRUE then
    gTotal = gTotal + pMyPrice
  else
    gTotal = max(0.00, gTotal - pMyPrice)
  end if

pass

end

Pretty easy. In order to see the price total displayed, you'll need to put a behavior on that field or text member. Here's the code for that behavior, which simply converts the value of gTotal into a text string and puts it into the cast member:

on exitFrame me
pMem.text = string(gTotal)
end exitFrame

As you click on items in the demo, you'll notice that they are added to the list that is held in the global variable gOrder. And if you deselect an item, it is removed from the list. The behavior for that is very similar to the pricing behavior, except that the event adds it or deletes it from the list. Here's the mouseUp handler from the behavior.

on mouseUp me

  if pMem.hilite = TRUE then
    gOrder.add(pMyProduct)
  else
    gOrder.deleteOne(pMyProduct)
  end if

end

The last step is to display a graphic of the selected items. Obviously, I didn't pay a graphic designer to contribute to my demo. Sorry about that. You'll need to create your graphics in such a way that they are layered and registered to each other correctly. Put a behavior that takes a look at the gOrder list on each of those sprites. If it finds itself on the list, then it appears. But if it is not on the list, the sprite swaps in a blank cast member -- thus disappearing. Here's the primary handler of interest.

on prepareFrame me

  if gOrder.getOne(pMyProduct) = 0 then
    pSprite.member = pBlankmem
  else
    pSprite.member = pMyGraphic
  end if

end prepareFrame

That's all there is to it. If you want to get a bit more elegant, you could eliminate the global variables and have the behaviors send messages directly to each other. But functionally, this approach gets the job done. Good luck with your project.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.