ShopSite Forums

by **chico** » Tue Mar 09, 2010 4:08 pm

14 years of experience making sites, but lost in these tutorials. I have a complete site cut up in HTML and CSS and I need to start from the beginning. What is the easiest and fastest way to do this? I have CSS and javascript and whacks of images I need to upload to get it all to work and look right. Then of course I need to create the cart pages afterwards... but this initial step is the most important at the moment.

Any help or push in the right direction would be greatly appreciated. I have searched and read for hours, but uploading a simple CSS still seems like a mystery to me.

Thanks.

by **Jim** » Tue Mar 09, 2010 9:50 pm

Creating a ShopSite template from a pre-designed html page does not need to be too complicated but it can be if you want lots of variability on your pages.

Essentially you would take your html page and add
[-- Define Page --]
to the top of the page before your doc type and <html> tag
Next add [-- End_define page --] after your closing </html> tag.

That is the most basic template. It will allow ShopSite to publish your page (although nothing on the page would change from your original html.)

(Note: template tags are not case sensitive so [--DEFINE PaGe --] is the same as [--define page --] or [--Define Page --] etc. Comments can be added in the template by putting a # as the first character on the line)

Now decide what on your page will change depending on the products, links, page text etc. that you will have on the page.

Let say that you want to display the page name on each page. Find the spot in your html where you have the page name and replace that with the tag [-- page.name --]. The value for page name will come from the ShopSite database. You enter the page name for each page under Pages > Add a Page or Pages > Edit Page Info.

If you have a standard header or footer on each page you can use the tags [-- header --] and [-- footer --] in place of the information that is currently in your html. Just copy the content of that section of the html and put it in the Preferences > Page Layout > header and footer sections in the backoffice of your store.

If certain blocks of text will change from page to page you can replace those blocks of text with [-- page.text1 --], or [-- page.text2 --] or [--page.text3--]

In the section where you want to have links to other pages you would replace the links you have with
[-- Loop Links --]
[-- link --]
[-- end_loop Links --]
If you do use ShopSite to generate the links you need a section that defines how the links will look. So you would add a section like this above the [-- Define Page --] tag.

Code: Select all: [-- DEFINE LINK_TO_PAGE --] <a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]"> [-- IF PAGE.LinkGraphic --][-- PAGE.LinkGraphic --] [-- END_IF --] [-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]</a> [-- IF PAGE.LinkText --] [-- PAGE.LinkText --][-- END_IF --] [-- END_DEFINE LINK_TO_PAGE --]

What that code does is for each time a link is to be displayed on the page it outputs and <a href to the html page and displays either a graphic, the link name or the link text that you have assigned to the page which is being linked to.

In the section where you want your product information to display you replace your html with
[-- loop products --]
[-- product --]
[-- end_loop products --]

That would be most of what you would need to do for a page template. Note that it could be more complicated than that by replacing other elements of your html with ShopSite tags that will insert the data from your store at publish time but it doesn't need to be more complicated if you aren't changing things on each page.

You would also need to create a product template that would be used in the [-- loop products --] section when the [-- product --] tag is encountered.

The process for creating the product template would be similar to the page template. You take the basic layout for a single product from your html and replace variable parts of the html with the ShopSite tag that represents that information.
Say for example that you want to display the product image,name, sku, price and add to cart and view cart buttons. Your product template would be like this

Code: Select all: [-- define product --] [-- product.graphic --] [--product.name --] [-- product.sku --]    [--product.price --] [-- PRODUCT.OrderCheckout --] [-- end_define product --]

That would give you a simple product layout that would be repeated for each product assigned to the page and would be place in the location where the [-- loop products --] code is found.

You can also create a more information page template that will create an individual page or each product explaining in more detail about the product. If you have already created the html for such a page you would convert it similar to how you did the page template but would use [-- product.---- --] tags instead of [-- page.---- --]tags.

I hope that gives you more information to go on. You mentioned that you have reviewed some of the tutorials have you checked out the ones on this page? http://www.shopsite.com/templates/cookb ... ates.shtml

Also the over view of what how the database fields relate to the fields in the template might give you a little more insight.

The video tutorials off of http://www.shopsite.com/templates/tutorial/index.html Will give you good information on how ShopSite works.

In particular you might want to look at the video here
http://www.shopsite.com/tutorial/mercha ... plates.htm

All the Shopper facing screen use custom templates so when you get around to your shopping cart, customer registration etc. you would use similar methods as for the page template for the basic layout, just replace the html code in your page layout with the appropriate ShopSite template tags.

If you have further questions feel free to post them.

by **PatG** » Wed Mar 10, 2010 7:32 am

my favorite starting point for ShopSite...

quick and easy templates tutorial:
http://www.shopsite.com/templates/cookb ... ates.shtml

by **chico** » Wed Mar 10, 2010 11:02 am

How do I upload my CSS file, and where does it go (aka how do I call it from within the template)?

by **Jim** » Wed Mar 10, 2010 1:27 pm

What version is your ShopSite? In ShopSite 10 sp1 a feature was added to the Merchandising > Custom Templates > Includes called Publish Files. You can upload your css files through the backoffice interface to that location. The files will be put in the store's publish directory which is at the same level as the media folder where images for the store are kept. To access the files in your template specify the path as [-- STORE.Output_URL --]/publish/<yourfilename>

Of course you would have to do the include statement to make it completed something like
<link rel="stylesheet" href=" [-- STORE.Output_URL --]/publish/<yourfilename>" type="text/css">

If you are using an older version of ShopSite you can upload the files by ftp to your store's output directory and then just specify the path to that location in the url. It would be as above without the "publish'.

by **chico** » Wed Mar 10, 2010 1:46 pm

Jim wrote:What version is your ShopSite? In ShopSite 10 sp1 a feature was added to the Merchandising > Custom Templates > Includes called Publish Files. You can upload your css files through the backoffice interface to that location. The files will be put in the store's publish directory which is at the same level as the media folder where images for the store are kept. To access the files in your template specify the path as [-- STORE.Output_URL --]/publish/<yourfilename>

Of course you would have to do the include statement to make it completed something like
<link rel="stylesheet" href=" [-- STORE.Output_URL --]/publish/<yourfilename>" type="text/css">

If you are using an older version of ShopSite you can upload the files by ftp to your store's output directory and then just specify the path to that location in the url. It would be as above without the "publish'.

Not working. I uploaded the css file (I am using SS 10). File appears to be there when looking in the Includes page... and it is linked as you stated, but it isn't taking effect.

by **Jim** » Wed Mar 10, 2010 2:18 pm

Is your ShopSite version 10 or 10sp1? Click on the ShopSite tab in the navbar of the backoffice and look between the two ShopSite logos in the footer to see the actual version.

Under Merchandising > Custom Templates > Includes do you have two sections? The top one should be Include Files and the bottom one will be Publish Files (css, js, ...)

You will only have the Publish Files (css, js, ...) option if you have ShopSite 10sp1. If you only have an Upload Include button then you do not have 10sp1.

If you don't have 10 sp1 then you will either have to manually ftp the files to your stores output directory and use the method I referred to previously to link to the css file or you can use the ShopSite [-- INCLUDE <filename> --] option to insert the actual css into the page when the page is generated.

The advantage of using the Link method is that the browser will cache the style sheet so pages load faster if the shopper view multiple pages on your site and they all link to the same .css file. But either of these method will work.

If you uploaded the file using the Upload Include button the link method will not work because the Include files are in a password protected location and can't be linked to. The will work using the [--INCLUDE <filename> --] method because when you publish the store pages your are logged in to the password protected area so ShopSite can read the file and include its content in the html output.

by **chico** » Wed Mar 10, 2010 2:20 pm

ShopSite® Pro 10 r6

by **Jim** » Wed Mar 10, 2010 2:30 pm

So this is not a ShopSite 10 sp1 store. You will need to use this method

You can use the ShopSite [-- INCLUDE <filename> --] option to insert the actual css into the page when the page is generated.
.

by **chico** » Wed Mar 10, 2010 2:54 pm

OK! Now I am getting somewhere. Thank-you.

That being said, I should still have FTP access if I am using ver10r6 correct? I didn't set up Shopsite... we were brought in after the fact by our client. I have requested FTP access from our client who in turn is passing this to the host. Once I get the info, upload and link to the CSS as per usual? And also upload all my graphics and javascript the same way? Can I create subdirectories for js, css and images while I am in there?

Thanks a bunch btw.

by **Jim** » Wed Mar 10, 2010 3:14 pm

You would have to talk to your host about ftp or shell access to your site since that is server related and doesn't have anything directly to to do with ShopSite.

Typically the ftp user does not have the same permissions as the webserver user or ShopSite so you would need to make sure the permissions are properly set. You can usually create directories with ftp permissions and then upload files to those directories. Note that all images in ShopSite need to be in the media directory or a subdirectory of that directory so ShopSite can create the appropriate code for displaying them. Also if you want to have subdirectories for your store pages you will need to create them manually in the output directory for your store. You can find the path to the output directory for your store under Preferences > Hosting Services near the bottom of the screen.

ShopSite Forums

where to begin??

where to begin??

adding CSS

Who is online