America/US Samples
Europe Samples
Asia Samples

Ajax Shopping Cart with Gaia

Here you can see an Ajax Shopping Cart Example. Try to drag the items from the right and drop them in the shopping cart to the left.
This example utilizes AspectDraggable and the AspectDroppable to be able to create the Shopping Cart. Basically the Shopping Cart itself has a Droppable "aspect" attached to it while the shopping items have the Draggable "aspect" attached to them. Other than that it's nothing more magically than a couple of Gaia Ajax Images and a Gaia Ajax Panel.

Your shopping cart is currently empty. Drag items to the cart to buy.

Macintosh
Very cool Italian car
Best Ajax Library in the world
FREE your bits!!


Markup (ASPX/.aspx)

   1:   
   2:      <p>
   3:          <gaia:Label 
   4:              runat="server" 
   5:              ID="total" 
   6:              Text="Your shopping cart is currently empty. Drag items to the cart to buy." 
   7:              style="font-weight:bold;" />
   8:      </p>
   9:      <gaia:Panel 
  10:          runat="server" 
  11:          ID="shoppingCart" 
  12:          CssClass="shoppingCart">
  13:          <gaia:Panel 
  14:              runat="server" 
  15:              ID="pnlToolTip" 
  16:              Visible="false"
  17:              style="padding:5px;border:solid 1px #999;z-index:6000;position:absolute;background-color:Yellow;width:200px;left:15px;top:25px;">
  18:              Click button to remove one item of the specific type from the cart...
  19:          </gaia:Panel>
  20:          <table style="width:100%;">
  21:              <tr>
  22:                  <td style="width:25%;">
  23:                      <gaia:Panel 
  24:                          runat="server" 
  25:                          ID="pnlapple" 
  26:                          style="display:none;">
  27:                          <gaia:ImageButton 
  28:                              runat="server" 
  29:                              ID="btnapple" 
  30:                              OnClick="CartItem_Clicked"
  31:                              ImageUrl="img/apple_small.png" 
  32:                              AlternateText="Apple bought" />
  33:                          <gaia:Label 
  34:                              runat="server" 
  35:                              ID="lblapple" 
  36:                              Text="0" 
  37:                              style="vertical-align:top;" />
  38:                      </gaia:Panel>
  39:                  </td>
  40:                  <td style="width:25%;">
  41:                      <gaia:Panel 
  42:                          runat="server" 
  43:                          ID="pnlferrari" 
  44:                          style="display:none;">
  45:                          <gaia:ImageButton 
  46:                              runat="server" 
  47:                              ID="btnferrari" 
  48:                              OnClick="CartItem_Clicked"
  49:                              ImageUrl="img/ferrari_small.png" 
  50:                              AlternateText="Ferraris bought" />
  51:                          <gaia:Label 
  52:                              runat="server" 
  53:                              ID="lblferrari" 
  54:                              Text="0" 
  55:                              style="vertical-align:top;" />
  56:                      </gaia:Panel>
  57:                  </td>
  58:                  <td style="width:25%;">
  59:                      <gaia:Panel 
  60:                          runat="server" 
  61:                          ID="pnlgaia" 
  62:                          style="display:none;">
  63:                          <gaia:ImageButton 
  64:                              runat="server" 
  65:                              ID="btngaia" 
  66:                              OnClick="CartItem_Clicked"
  67:                              ImageUrl="img/gaia_small.png" 
  68:                              AlternateText="Gaias bought" />
  69:                          <gaia:Label 
  70:                              runat="server" 
  71:                              ID="lblgaia" 
  72:                              Text="0" 
  73:                              style="vertical-align:top;" />
  74:                      </gaia:Panel>
  75:                  </td>
  76:                  <td style="width:25%;">
  77:                      <gaia:Panel 
  78:                          runat="server" 
  79:                          ID="pnlubuntu" 
  80:                          style="display:none;">
  81:                          <gaia:ImageButton 
  82:                              runat="server" 
  83:                              ID="btnubuntu" 
  84:                              OnClick="CartItem_Clicked"
  85:                              ImageUrl="img/ubuntu_small.png" 
  86:                              AlternateText="Ubuntus bought" />
  87:                          <gaia:Label 
  88:                              runat="server" 
  89:                              ID="lblubuntu" 
  90:                              Text="0" 
  91:                              style="vertical-align:top;" />
  92:                      </gaia:Panel>
  93:                  </td>
  94:              </tr>
  95:          </table>
  96:          <gaia:Label 
  97:              runat="server" 
  98:              ID="status" 
  99:              style="left:15px;bottom:15px;position:absolute;" />
 100:      </gaia:Panel>
 101:   
 102:      <gaia:Panel runat="server" ID="items" style="display:block;width:220px;float:right;">
 103:          <gaia:Image 
 104:              runat="server" 
 105:              ID="apple" 
 106:              style="cursor:move;" 
 107:              AlternateText="Macintosh"
 108:              ImageUrl="img/apple.png" />
 109:          <br />
 110:          <gaia:Image 
 111:              runat="server" 
 112:              ID="ferrari" 
 113:              style="cursor:move;"
 114:              AlternateText="Very cool Italian car"
 115:              ImageUrl="img/ferrari.png" />
 116:          <br />
 117:          <gaia:Image 
 118:              runat="server" 
 119:              ID="gaia" 
 120:              style="cursor:move;"
 121:              AlternateText="Best Ajax Library in the world"
 122:              ImageUrl="img/gaia.png" />
 123:          <br />
 124:          <gaia:Image 
 125:              runat="server" 
 126:              ID="ubuntu" 
 127:              style="cursor:move;"
 128:              AlternateText="FREE your bits!!"
 129:              ImageUrl="img/ubuntu.png" />
 130:      </gaia:Panel>
 131:      <br style="clear:both;" />
 132:   
 133:   
 134: