fastest way to get a design layout into shopsite?

General ShopSite user discussion

fastest way to get a design layout into shopsite?

Postby Rodney Blackwell » Tue Jun 14, 2005 12:57 pm

I have shopsite installed and I have a custom layout already designed and
the HTML written.

What's the quickest way to get shopsite to use my custom layout on all the
pages.

Should I just use my custom layout as the HEADER/FOOTER? or do I need to
make separate templates for each page type (category page, product pages,
search engine results page, shopping cart page, registration page?)

I really need to get my shopsite store launched ASAP, but I'm having a hard
time getting the templates to work like I want them to.

Thanks in advance.

--Rodney
Rodney Blackwell
 

Re: fastest way to get a design layout into shopsite?

Postby jim » Tue Jun 14, 2005 9:34 pm

Rodney,

The best way to do it would be to create custom templates for each of
the page types. That way you can specify exactly how everything will look.
The other option would be to take the main layout information and put it
in the header/footer section of the store. This will be displayed on
store pages and search pages (if you check the box to display them) For
the shopping cart screens you would need to put similar information in
the Text at top of Shopping cart (or Shipping or Thankyou etc) screen
field and the Text at bottom of Shopping cart (etc). These are under
Commerce Setup > Order System > (Shopping cart or Checkout or
Confirmation or Thankyou)

Going the custom template route gives the most flexibility and if done
correcty you can reuse sections of the code for the various templates by
putting it in include files.

If you haven't done so yet read the section of help on custom templates
http://www.shopsite.com/help/7.1/en-US/ ... lates.html
There are some simple examples there.

The basic process of converting from a designed html page to a template
is to break the html into sections that relate to the various fields in
ShopSite. For example a Page will have a title, some text in various
locations a background image, a place for links etc. Once you have the
various sections defined simply replace the text in you mockup with the
ShopSite tag that provides that information. For example where you want
the page title put the tag [-- PAGE.name --] Where you have a block of
text that is to be replaced on each page by the text in say the Page
text 1 filed use the tag [-- PAGE.text1 --]

The each section of the template must be wrapped in statements that tell
where it begins and ends so it looks like this:

[--DEFINE LINK_TO_PAGE--]
# This define is used to control how the link to this page will
# look on other pages
[--END_DEFINE LINK_TO_PAGE--]

[-- DEFINE PAGE --]
<html>
# This define is used to control how the page will look
# All of your layout information needs to go in here.
</html>
[-- END_DEFINE PAGE --]

Give it a try and if you have more question post them here. If you can
post your mock up html file somewhere that we can view it we can
probably give you some pointers to start with.

Jim


Rodney Blackwell wrote:
I have shopsite installed and I have a custom layout already designed and
the HTML written.

What's the quickest way to get shopsite to use my custom layout on all the
pages.

Should I just use my custom layout as the HEADER/FOOTER? or do I need to
make separate templates for each page type (category page, product pages,
search engine results page, shopping cart page, registration page?)

I really need to get my shopsite store launched ASAP, but I'm having a hard
time getting the templates to work like I want them to.

Thanks in advance.

--Rodney

jim
 

Re: fastest way to get a design layout into shopsite?

Postby Rodney Blackwell » Thu Jun 16, 2005 2:02 am

I just wanted to say thanks for this detailed breakdown, Jim.

I think you may have just saved me a couple thousand dollars by not having
to hire a "shopsite designer" to take my html layout and turn it into a
template.

--
Rodney (slowing getting the hang of the power behind templates and includes)

"jim" <jstavast@xmission.com> wrote in message
news:d8ob56$jfn$1@eval.shopsite.com...

Once you have the
various sections defined simply replace the text in you mockup with the
ShopSite tag that provides that information. For example where you want
the page title put the tag [-- PAGE.name --] Where you have a block of
text that is to be replaced on each page by the text in say the Page text
1 filed use the tag [-- PAGE.text1 --]
Rodney Blackwell
 


Return to User Forum

Who is online

Users browsing this forum: Bing [Bot] and 20 guests