Wednesday, February 18, 2009

Drag and Drop Shopping Cart

At SQL Integrator we are just beginning to explore the possibilities of Apex. We do that by teaching each other via workshops. When somebody dives into a subject, he presents the result to the other Apex workshop participants. A good way to learn Apex.

I had no idea how to do anything with Ajax. After some web surfing (mainly at I tried some simple examples myself. Most of them were taken from here and here.
A quite fancy example is the drag and drop planboard, but this was a bit too complicated for me to start with (especially since some secrets were not explicitly revealed).

So, I came up with this simple shopping cart demo. There was not much programming involved, since most of the Javascript code was downloaded from

Blogger is trying to interpret tags when you just want to publish the code, so bear in mind that you have to replace the [] pair with <> in the next pieces of code.

The left region is a report based on:

select '[div class="boxwide" id="'||product_id||'"]'||
product_name||'[/div]' product
from demo_product_info

Each product gets a unique id so that you know which product is dragged. The class boxwide is a CSS class that puts the product name in a box.

Note that is is generally not a good idea to put HTML in your query. It is a better idea to put this in the HTML Expression on the Column Attributes page. In this the query should be:

select product_id
from demo_product_info

And the HTML Expression:

[div class="boxwide" id=#PRODUCT_ID#]#PRODUCT_NAME#[/div]

The region on the right is an empty HTML region withe a region header:

[div id="cart"]

and footer:


This identifies the region where products can be dropped.

Next, you have to put some Javascript in the page header to call application processes and the libraries.

[script src="#WORKSPACE_IMAGES#prototype.js" type="text/javascript"][/script]
[script src="#WORKSPACE_IMAGES#scriptaculous.js" type="text/javascript"][/script]
[link type="text/css" href="#WORKSPACE_IMAGES#dragdrop.css" rel="stylesheet"]
[script language="javascript" type="text/javascript"]
function addProduct(element, dropon, event) {
function sendData (prod) {
var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=AddToCart',0);
gReturn = get.get();
$x('cart').innerHTML = gReturn;
function clearCart () {
var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=ClearCart',0);
gReturn = get.get();
$x('cart').innerHTML = gReturn;
function getCart () {
var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=GetCart',0);
gReturn = get.get();
$x('cart').innerHTML = gReturn;

In the footer of the page put this Javascript code to identify which elements are involved in the drag and drop process:

[script type="text/javascript"]
var products = document.getElementsByClassName('boxwide');
for (var i = 0; i < products.length; i++) {
new Draggable(products[i].id, {ghosting:false, revert:true})
Droppables.add('cart', {onDrop:addProduct})

Next you define the appication process AddToCart that is called when an item is dropped on the shopping cart region:

l_string varchar2(32767);
insert into demo_shopping_cart(sessionid, product_id)
values(v('APP_SESSION'), to_number(wwv_flow.g_x01) );

l_string := get_shopping_cart(v('APP_SESSION'));

Get_shopping_cart is a function in the database that returns the items currently in the cart for the session:

CREATE OR REPLACE function get_shopping_cart(i_sessionid in number)
return varchar2 is
cursor c_cart is
select '[div class="boxwide" id="cart_'||id||'"]'||
product_name||'[/div]' product_name
from demo_shopping_cart crt
, demo_product_info prd
where crt.product_id = prd.product_id
and crt.sessionid = i_sessionid
order by id;
l_string varchar2(32767);
for r_cart in c_cart loop
l_string := l_string || r_cart.product_name;
end loop;
return l_string;

Similarly, you can create the ClearCart and GetCart application processes that are called when you click the Clear Cart button and when you open the page.


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

  2. I appreciate your efforts because it conveys the message of what you are trying to say. It's a great skill to make even the person who doesn't know about the subject could able to understand the subject . Your blogs are understandable and also elaborately described. I hope to read more and more interesting articles from your blog. All the best.

    rpa training in bangalore
    best rpa training in bangalore
    RPA training in bangalore
    rpa course in bangalore
    rpa training in chennai
    rpa online training

  3. This is most informative and also this post most user friendly and super navigation to all posts... Thank you so much for giving this information to me.. 
    python Course in Pune
    python Course institute in Chennai
    python Training institute in Bangalore

  4. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.

    AWS Training in Bangalore | Best AWS Amazon Web Services…
    Amazon Web Services (AWS) Training in Pune India
    AWS Training | AWS Training and Certification | AWS online training
    AWS Training in Bangalore cost| Aws training in Bangalore with placements

  5. All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.
    microsoft azure training in bangalore
    rpa training in bangalore
    best rpa training in bangalore
    rpa online training

  6. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    AWS training in chennai

    AWS Training in Bangalore