Range Slider Plugin
I've spent a little time updating my online shop demo recently. I've still a long way to go but initially I am trying to get as much core functionality built into the search page, such as trying not to submit the page at all and do as much with Ajax as I can. From hereonin I think I shall refer to this as 'Ajaxifying' my application. Ok maybe not.
You can go to the demo here....Online Store Demo
Something to note. You can drag and drop the product images into the shopping basket and the basket inventory will update, but this doesn't work with pagination. If you use the range slider this will reset pagination and it will work again. Also note, that this page only works properly with Firefox, which I think maybe down to Apex 4 EA not yet being supported in IE (it doesn't work with Chrome either).
You will notice that I have created a new plugin which I have based on Patrick Wolf's slider plugin, but this uses 2 markers on the slider to represent a range of high and low. You can also specify default high and low values for the slider. You can get the range slider plugin here. (let me know if this link doesn't work). As plugins only return a single value, then the value returned will be made up of 2 values separated by a comma (ie '100,4500'). You will of course need to extract each value from the item you base on the plugin if you want to refer to them in a report Where clause.
I will post some more in the next day or so as I make other improvements.
(Thanks to Anthony for help with the live binding of the drag and drop/slider dynamic actions)
UPDATE: One thing I forgot to mention is that I added a plugin parameter for the range slider that allows you to specify a jQuery theme from a select list. This is not the most efficient way of applying themes to all jQuery based plugins on a page/application, but it gives you a flavour of what can be done.
You can go to the demo here....Online Store Demo
Something to note. You can drag and drop the product images into the shopping basket and the basket inventory will update, but this doesn't work with pagination. If you use the range slider this will reset pagination and it will work again. Also note, that this page only works properly with Firefox, which I think maybe down to Apex 4 EA not yet being supported in IE (it doesn't work with Chrome either).
You will notice that I have created a new plugin which I have based on Patrick Wolf's slider plugin, but this uses 2 markers on the slider to represent a range of high and low. You can also specify default high and low values for the slider. You can get the range slider plugin here. (let me know if this link doesn't work). As plugins only return a single value, then the value returned will be made up of 2 values separated by a comma (ie '100,4500'). You will of course need to extract each value from the item you base on the plugin if you want to refer to them in a report Where clause.
I will post some more in the next day or so as I make other improvements.
(Thanks to Anthony for help with the live binding of the drag and drop/slider dynamic actions)
UPDATE: One thing I forgot to mention is that I added a plugin parameter for the range slider that allows you to specify a jQuery theme from a select list. This is not the most efficient way of applying themes to all jQuery based plugins on a page/application, but it gives you a flavour of what can be done.
Comments
It's really taking shape. Looks great. By the way, 1 point of clarification, the slider item plugin is actually Patrick Wolf's, not mine. I, unfortunately cannot take credit for that one!!
Anthony.
Post now updated.
What is great is the minimal amount of coding required, once you start using plugins.
It would be nice to get the PPR working on the Products without having to code but its working so I'm happy. Just need to fix the issue with pagination causing the drag and drop to stop working.
Paul.