Welcome, Guest ( Customer Panel | Login )




 All Forums
 VPCart Forum
 Customization
 DOM/CSS friendly layouts?
 New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

rEd86
Starting Member

5 Posts

Posted - September 04 2008 :  19:10:03  Show Profile  Reply with Quote
Greetings.

I've installed the latest version of VP-ASP and started digging in to evaluate whether this product is one we are going to start using for clients who want a robust ecommerce solution.

When I looked into skinning the site, I found that most of the layouts are done the old-fashion way - tables and embedded code.

Has anyone taken the time to re-write the templates using CSS friendly DOM so it's easier to customize the look & feel of a site? I'd rather not reinvent the wheel if this has already been done.

Thanks!

--Ed

elammers
VP-CART Super User

USA
256 Posts

Posted - September 04 2008 :  22:05:55  Show Profile  Visit elammers's Homepage  Reply with Quote
Not sure how much you've looked into this yet, but here are 2 helpful tidbits.

#1 Overall Layout
Take the SHOPPAGE_HEADER.HTM and SHOPPAGE_TRAILER.HTM files and put them together in a temporary file I like to call SHOPPAGE_LAYOUT.HTM. Now you can easily make the site look however you want since you can see the full layout. Granted, there's still tons of tables. But once you have the look you like, very easy to break that single file back into the two as long as you keep the comments in that tell you where to do this.

#2 Replacing some of the tables with plain old CSS
Yes, this can be done. Starting from the SHOPPAGE_LAYOUT.HTM noted above, you can quickly identify where you can remove the header and footer table/rows and use DIV ID's or whatever you like. I haven't gone so far as pulling out the tables in the body area because it's just too embedded into the overall code: shop$colors.asp writes some lines, many key pages pull in template files, these templates have tables. Now it may be possible to replace the tables in some or all of the those template files, but I have only scratched the surface of doing that.

Regards,
Eric Lammers
www.KrackMedia.com
Building More Than Web Sites . . . Building a Web Presence
Go to Top of Page

Steve2507
VP-CART Expert

590 Posts

Posted - September 05 2008 :  03:11:27  Show Profile  Reply with Quote
We've done as Eric suggested across all our sites and now have a mixture of tables and css.

It's not that hard, it just takes some common sense when messing around with the asp files.


Steve
Sex toys from a UK sex shop
Go to Top of Page

rEd86
Starting Member

5 Posts

Posted - September 05 2008 :  06:56:45  Show Profile  Reply with Quote
Thanks for the input guys. We have already skinned the main "templates" ( shoppage_header.htm and shoppage_trailer.htm) but as you know, so much of the page generation is embedded in code. Steve's right, it's not that hard but it is time consuming. I just didn't know if someone at VP-ASP or elsewhere had done it already and contributed the code back to the community. I am also interested in how hard the code becomes to maintain when upgrades come out.

Steve - I looked at your site and see you've done a lot of customization. I especially like how you've created SEO friendly URLs. Is that what the "Generate Static HTML" does or did you have to enhance the system? (Generate Static HTML is disabled in the evaluation copy of VP-ASP) If you enhanced the system, did you have to change the code in a lot of places to make this work? I'm assuming you're using a URL re-writer to convert the first two directories in the URL "/x/123/" to "/shopquery.asp?catalogid=123" on the back end, but I don't know how many pages would need to change to generate a SEO friendly URL output.

Later!

--Ed
Go to Top of Page

elammers
VP-CART Super User

USA
256 Posts

Posted - September 05 2008 :  08:56:09  Show Profile  Visit elammers's Homepage  Reply with Quote
Regarding customization and vendor code updates, WinMerge is my best friend. You can compare one file to another or entire directories. And the price is the best, FREE. Thanks to VP-ASP support for recommending this a few years back.

http://www.winmerge.org/

Regards,
Eric Lammers
www.KrackMedia.com
Building More Than Web Sites . . . Building a Web Presence
Go to Top of Page

rEd86
Starting Member

5 Posts

Posted - September 05 2008 :  09:03:57  Show Profile  Reply with Quote
Thanks Eric! That looks like it would streamline merging code updates with new releases.

--Ed
Go to Top of Page

Steve2507
VP-CART Expert

590 Posts

Posted - September 05 2008 :  19:50:34  Show Profile  Reply with Quote
quote:
Originally posted by rEd86


Steve - I looked at your site and see you've done a lot of customization. I especially like how you've created SEO friendly URLs. Is that what the "Generate Static HTML" does or did you have to enhance the system? (Generate Static HTML is disabled in the evaluation copy of VP-ASP) If you enhanced the system, did you have to change the code in a lot of places to make this work? I'm assuming you're using a URL re-writer to convert the first two directories in the URL "/x/123/" to "/shopquery.asp?catalogid=123" on the back end, but I don't know how many pages would need to change to generate a SEO friendly URL output.


We haven't used the static html feature, instead we use a url rewriter, along with extra fields added to the tables.

The header and footer are only the beginning, you also need to look at all the product templates, also brought features, frontpage templates, shopdisplaycategories (and products), plus others. It is not a quick job, but worth it the end (imo).


Steve
Sex toys from a UK sex shop
Go to Top of Page

rEd86
Starting Member

5 Posts

Posted - September 05 2008 :  20:08:57  Show Profile  Reply with Quote
quote:
Originally posted by Steve2507

The header and footer are only the beginning, you also need to look at all the product templates, also brought features, frontpage templates, shopdisplaycategories (and products), plus others. It is not a quick job, but worth it the end (imo).


Steve
Sex toys from a UK sex shop

Agreed - judging from how you've customized it your efforts were definitely worth it. I am confident I can dig through all the pages and update them to give us the necessary system based on CSS and not tables. (as well as more robust layouts) I just don't want to put all that time into updating the templates in the "free" version we are evaluating only have to do it again when I purchase the Plus version. That's why I was hopeful that someone had already done so.

No worries. I'll just bust it out this weekend. I really think VP-ASP will give us a solid base to build robust ecommerce solutions for our clients. We have built our own in the past and just don't have the volume of customers to justify developing/maintaining the system. That's why I'd like to use something like VP-ASP that's 95% there and customize it to our needs.

--Ed


Go to Top of Page

Steve2507
VP-CART Expert

590 Posts

Posted - September 06 2008 :  03:52:30  Show Profile  Reply with Quote
I agree, VP isn't a perfect solution, but it has all the base elements needed and then some. So effectively 95% of the work is done.

To be honest when you upgrade or apply a patch as long as you are careful and use something like winmerge the changes you make will stay there.

As to the code - our code would probably complicate things for you. We have customised it not only with changes to layout and base files, but also by adding extra fields to various tables and calling these fields for a number of functions. We've also brought in new asp files which are called from a number of standard vp files.


Steve
Sex toys from a UK sex shop
Go to Top of Page

devshb
Senior Member

United Kingdom
1904 Posts

Posted - September 06 2008 :  04:51:42  Show Profile  Visit devshb's Homepage  Reply with Quote
we've got a panel-splitter which might help; it breaks each section of the pages/panels into separate files, and generally makes it easier to tweak the contents/sizing etc of each panel:

http://www.bigyellowkey.com/mysoftware_product_details.asp?prdid=201&opu=n

it uses a combination of tables/divs/css etc, but mostly tables because they seem to be more stable/flexible when it comes to working across browsers etc. we put a tweak in the panel splitter addon/readme file which explains how to stretch out the whole page to fit the browser, and once you've applied that the rest seems to fall in place and generally makes things look a lot better than the standard fixed widths.

so, we haven't rewritten things to use pure css, but we have broken it all down into lots of separate files and made it so that you can call a page with or without any of the panels.

Simon Barnaby
Developer
[email protected]
www.BigYellowZone.com
Web Design, Online Marketing and VPASP addons
Go to Top of Page

rEd86
Starting Member

5 Posts

Posted - September 06 2008 :  09:38:14  Show Profile  Reply with Quote
Steve,

I am sure you've got a LOT of extra code in there. :) I was looking for a "package" that was changed to DOM/CSS before all the customization occurred. I actually have a busy weekend so I can't start the process until Monday. Soccer season (football to the rest of the world) just started this weekend and we've got two kids playing in four games (two each) this weekend.

Good to hear that we can upgrade from Free to the Plus or Deluxe versions and use winmerge to keep the work we’ve done to the system.

Simon,

We prefer to use tables when we’ve got a list of data in an “excel” like view. By moving all the interface into DIVs and other DOM elements, it makes it easier for designers to significantly update the look & feel through CSS and nothing else. You are right though, it is much harder to get consistent results in all browsers.

In looking at what's in the system already I am fairly confident we'll be purchasing VP-ASP to use for our ecommerce offering.

Thanks for all your input.

--Ed
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Snitz Forums 2000
0 Item(s)
$0.00