Thursday, 21 January 2010

Shop 'til ya drop, Apex 4 style.

Bad title I know, but it's late here in the UK, so I hope you'll cut me a little slack?

Now I said I would update you on my progress with creating an online shop for my wifes business.  So, this is what I have so far.

I've taken the original Online Shop packaged application, then modified and funked it up a little it using Apex 4 early adopter (if you haven't already then get yourself an account at Apex 4 EA).  Specifically, I have used some of Anthony Rayner's excellent plugins from his recent blogpost, which I highly recommend that you use as a starting point.  The plugins in question are those to create and control a slider and drag and drop.

Please visit my demo shop application and have a play around.  It's obviously only a first cut, just to test drive some Apex 4 features, and is obviously a long long way off being useful.  The features you may want to try are:

  • You can drag and drop products (the image) to the shopping basket and the number of items will increment.  
  • There is a slider which can be used to view all products with the slider value as the minimum price.  A bit of Ajax is used to reduce/increase the products displayed.
  • There is an autocomplete search box using the new Text Item with Autocomplete, straight out of the box.

If you want to play with the drag and drop, you will need to do this first as setting the slider renders this feature unusable.  I will work on this, just not tonight.

Let me know how you get on, and if anyone is interested then I will blog again on how it was developed.


Anthony Rayner said...

Hi Paul,

Nice one, looks great!! I'm really pleased you could make use of it and thanks for the comments, much appreciated!!

I hope you don't mind, but I took a look what you've done and have a couple of ideas / suggestions...

1. For the bug with the drag and drop failing after the slider action has fired, try switching the 'Event > Bind type' of the draggable dynamic action to 'live'. This should fix your issue. Problem is the dynamic action firing when the slider changes does a PPR refresh on your report, and the draggable event handler bound to those report elements is lost.

2. For what happens after the drop, you are using the 'JavaScript Code' action to fire a custom piece of JavaScript that handles the Ajax and returns the product count. Try switching this to use the built in 'Set Value (PL/SQL Function)' type dynamic action, where you call a function that does the same job as your application process and just returns the product count. You would just have to add the 'PRODUCT_ID' page item as a 'Page Item to Submit' in that action, and also specify the 'P1_BASKET_TOTAL' as the affected element.

Also, I wonder if you thought the whole 'wwvFlowForm / always / load' business on the 'When' selector of the drag and drop dynamic actions is a bit weird. Well, it's not currently as easy as it should be to define actions that just do initialisation on page load like the drag and drop do here. But this will be easier in the next refresh of the EA instance (hopefully), whereby you can just select 'Page Load' as the event and that's it, no other arbitrary elements to define in the 'When' like we have to currently.

Nicely done again and be interested to know how you get on.


Paul Brookes said...

Thanks Anthony,

I very much appreciate the detailed feedback.

I tried the solution in point 1 and it doesn't seem to make any difference. I wonder if this is due to the Products being a report on a separate page (as per Munkys solution: I forget why I did it this way now rather than just a PPR!

I will also try your change detailed in point 2.

As for the 'When' selector and the wwwFlowForm in the DOM object, I did find it a little strange but then plugins are new territory so it all feels a little strange at the moment!

Thanks again.