DOM Draggable Content Template [Design Phase]

**qhome** · 10 Aug 2006, 03:47 PM

This is the next contrib I've been trying to create, but it is nowhere near completed... barely even started. I really just want to get the idea out there to get some feedback and ideas on it before moving forward. Plus get some input from the pro php and jscript coders out there

Basically the idea is simple: a Wysiwyg drag-n-drop way to design templates on the fly, and to save the X-Y coordinates, as well as the Z-order of each element to the database.

You can see a mock example here:

http://www.unbannable.com/zenajax/in...&products_id=1

note that each of the purple boxes are draggable (i used purple temporarily so you could see it easily, but a live store would have no backgrounds obviously). Simply click and hold and drag it around your screen. Currently their positions are saved to a cookie, so if you reload the page, you will see the same layout positions. The goal is to pass the params of each field to the database instead of a cookie so that store owners can open a similar page on the admin side, drag and drop each piece the way they want it, and then save it that way. Then the actual store front would use that positioning when it rendered the page.

Gone could be the days of mucking around in the tpl code. And from there it could hopefully expand to something more as it evolves.

Currently I would say the basic parameters that would need to be saved and loaded would be the div's: top, left, z-style, and ID

Since it is all dynamic based on javascript, the first step would be to pass the session variables to php to save (since php loads server side). And then pass the php variables to the jscript to load the positions.

This is the main idea and basis for the contrib.

Thoughts?

**qhome** · 11 Aug 2006, 12:21 AM

I should also state the obvious. Tho you can move it around as the customer in the above example.... thats just for example. The point is not for the customer to drag them around, they would be static for the customer, but a similar layout would load for you in the admin area and be draggable.

**voltage** · 11 Aug 2006, 05:30 AM

Ghome, I wish I can do more than just say, Wow, what an incredible idea. This would be an amazing add on for those who know little about php and creating product layouts.

**qhome** · 12 Aug 2006, 09:05 PM

Glad you like the idea :) I am unfortunately a mediocre javascripter so I have a little bit more to learn about passing session variables to php, but Im pretty close. Now if you goto the demo and double click on the div sections you can see the top/left (x/y) coordinates of the selected box. I just need to pass that to the database for all the boxes on the page. It's not really all that hard.. just takes a little know how that I need to learn

**tajul_ashyqin** · 23 Nov 2006, 01:42 AM

how was this mod progress?! has it been done,Q?

**qhome** · 24 Nov 2006, 05:56 PM

Originally Posted by tajul_ashyqin

how was this mod progress?! has it been done,Q?

lol no...my knowledge on the subject is still a bit undeveloped.. if it was done you'd see me become president of the world cuz of how sweet it would be

i havent even had time lately but hopefully soon i can start looking at it again.

**BlessIsaacola** · 25 Nov 2006, 09:39 AM

Originally Posted by voltage

Ghome, I wish I can do more than just say, Wow, what an incredible idea. This would be an amazing add on for those who know little about php and creating product layouts.

Voltage why would you leave yourself so wide open like that? Of course you can do more donation! donation!! donation!!!

Sorry I couldn't resist! You left yourself open for that.

I was blown away just like you when I went to qhome's demo site. With this kind of innovation and creativity, Zen Cart will attract even more followers. This is good stuff qhome.