CSCI A348/548 Lab Notes Thirteen Spring 2001 (Second semester 2000-2001)

Another Path to E-Commerce: A CSS and DHTML Shopping Cart.

We're going to create the storefront for the e-commerce section of the Stitch web site. Stitch is a fictional online fashion magazine. It covers fashion industry news and gossip, clothing trends both couture and street-level, profiles of designers and models, and daily columns. Small features are updated daily, while main features are updated weekly. The Stitch homepage, or rather a picture thereof, appears here. So, once again, that's just a picture of the Stitch homepage so that you can get into the idea of it. We won't work on the company's home page. That's already taken care of. We'll develop a different page. But to better understand what we do we show you a picture of the company's home page, and that's what we just did.

Since Stitch's marketing team has discovered that people interested in fashion also tend to buy more clothes than the average person, Stitch has decided to pump up its thin margin by selling a few products online -- tee shirts, sweatshirts, mugs, and hats emblazoned with the Stitch logo. A fleet of programmers is dealing with the complicated back-end of the e-commerce system, but your boss has decided that you're the person to create the front-end. "And do it in DHTML!" he barks. "Make it look like a software program, not just another Web page!". (And then he says "Woof!" or something like that but you don't notice. That because you're long gone, working on the project, I suppose.) Anyway, that's the background, now we need to get started.

Here is a picture of your boss in action. Now let's get back to the project.

The value of carefully planning your DHTML project cannot be overrestimated. DHTML is so powerful that if you dive into a complicated project without planning it, you'll probably spend most of your time fixing mistakes.

Here's a picture of the storefront we will build. This is a picture, not the real thing. The real thing is forthcoming. You have to build it, bark, bark! To do that you need the following elements that you can take from the demo website:

• cap image (transparent)
• mug image (transparent)
• purple sweatshirt image
• martini image (transparent)
• green shirt image (transparent)
• orange shirt image (transparent)
• purple shirt image (transparent)
• shirts title
• sweatshirts title
• swell stuff title
• store date
• store header
• side navigation bar
• more info picture (partially transparent)
• shopping cart

If you don't know where to start try this organization:

I think you should do it on your own with a piece of paper and a pencil.

To find out coordinates on a picture use this approach:

<a href="">
<img src="http://www.cc.columbia.edu/low3.gif" ismap>
</a>

http://burrowww.cs.indiana.edu:20006/stitch/one.html

Here's the code:

<SCRIPT LANGUAGE="JavaScript">
// Global variables for platform branching
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4)
{
   if (navigator.appName == "Netscape")
   {
      isNav = true
   }
   else
   {
      isIE = true
   }
}

// ***Begin Utility Functions***

// Set zIndex property

function setzIndex(product, zOrder)
{
   product.zIndex = zOrder
}
               
// Position an object at a specific pixel coordinate
function shiftTo(product, x, y)
{
   if (isNav)
   {
      product.moveTo(x,y)
   }
   else
   {
      product.pixelLeft = x
      product.pixelTop = y
   }
}
               
// ***End Utility Functions***

// Global variable that holds reference to selected element 
var selectedProduct

// Global variables that hold location of click relative to element 
var offsetX, offsetY
               
// Find out which element has been clicked on 
function setSelectedElem(evt)               
{ 
  if (isNav)
  {
    var clickX = evt.pageX
    var clickY = evt.pageY
    var testObj
    for (var i = document.layers.length - 1; i >= 0; i--)
    {
      testObj = document.layers[i]
      if ( (clickX > testObj.left)                      &&
           (clickX < testObj.left + testObj.clip.width) && 
           (clickY > testObj.top)                       &&
           (clickY < testObj.top + testObj.clip.height)
         )
      {
        selectedProduct = testObj
        if (selectedProduct)
        {
          setzIndex(selectedProduct, 100)
          return
        }
      }
    }
  }
  else
  {
    var imgObj = window.event.srcElement
    selectedProduct = imgObj.parentElement.style
    if (selectedProduct)
    {
      setzIndex(selectedProduct,100)
      return
    }
  }
  selectedProduct = null
  return
}
              
// Drag an element
function dragProduct(evt)
{
  if (selectedProduct)
  {
    if (isNav)
    {
      shiftTo(  selectedProduct, 
                (evt.pageX - offsetX), 
                (evt.pageY - offsetY)
             )
    }
    else
    {
      shiftTo(  selectedProduct, 
                (window.event.clientX - offsetX), 
                (window.event.clientY - offsetY)
             )
      // prevent further system response to dragging
      return false
    }
  }
}

// Turn selected element on
function grabProduct(evt)
{
  setSelectedElem(evt)
  if (selectedProduct)
  {
    if (isNav)
    {
      offsetX = evt.pageX - selectedProduct.left
      offsetY = evt.pageY - selectedProduct.top
    }
    else
    {
      offsetX = window.event.offsetX
      offsetY = window.event.offsetY
    }
  }
   
  // prevent further processing of mouseDown event so 
  // that the Macintosh doesn't display the contextual 
  // menu and lets dragging work normally.

  return false
}
              
// Turn selected element off
function releaseProduct(evt)
{
  setzIndex(selectedProduct, 0)
  selectedProduct = null
}
              
// Set event capture for Navigator
function setNSEventCapture()
{
  if (isNav)
  {
    document.captureEvents(   Event.MOUSEDOWN | 
                              Event.MOUSEMOVE | 
                              Event.MOUSEUP
                          )
  }
}
              
// Assign event handlers used by both Navigator and IE
function init()
{
  if (isNav)
  {
    setNSEventCapture()
  }
  document.onmousedown = grabProduct
  document.onmousemove = dragProduct
  document.onmouseup = releaseProduct
} 

</SCRIPT>

</head>



<body bgcolor="#ffffff" onLoad="init()">