Sub Product layout

Questions and answers about ShopSite Custom Templates

Sub Product layout

Postby Sir Yendor » Fri Jun 24, 2011 8:25 am

We're using ShopSite PRo v 10 if it makes any difference

I'm trying to arrange sub product on a page so that they appear a particular way. Using this page as an example:

http://www.carolinaandco.com/Monogrammed_Gifts_For_Your_Home.html notice how the only thing about a product that displays is the photo and the name of the product, which links to the page with that individual product on it.

Now look at this page: http://carolinaandco.com/Bath_Towels.html notice how the sub products appear in one column, I want four. I've used this code:
[-- LOOP SUBPRODUCTS 4 --]
[-- SUBPRODUCTS --]
[-- END_LOOP SUBPRODUCTS --]

Yet the products are showing up in one column. How do I resolve this?

THanks
Sir Yendor
 
Posts: 47
Joined: Tue Sep 26, 2006 5:52 pm
Location: Portland

Re: Sub Product layout

Postby Jim » Fri Jun 24, 2011 8:50 am

I can't see those pages I get a The page cannot be found error screen. It must be behind a firewall or the path isn't correct or the domain name is not yet live.

For the columns to work you need to put the formatting in the subproduct part of the product template. On the product template you need to start a table before the loop subproducts section. The Loop tag will output an initial <tr> and a closing and opening </tr><tr> after the number of times through the loop that you specify for the number of columns. You need to output <td> and closing </td> in the define subproduct section of the template to complete the table layout. After the closing loop tag you need to close the final <tr> and the table.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Re: Sub Product layout

Postby ShopSite Lauren » Fri Jun 24, 2011 8:54 am

I can't view either of the pages that you refer to. Are you using a temp IP rather than the domain right now? Without seeing the pages I can't tell for sure, but my guess is that the entire table structure may not be setup for the subproducts. For example, in the define subproduct area of your product template, it may start right into the product information without starting the table cell, and the [-- LOOP SUBPRODUCTS 4 --] tag only adds the <tr></tr> tags, not the cell tags. So you will want your code to look similar to:

<table>
[-- LOOP SUBRPRODUCTS 4 --]
<td>[-- SUBPRODUCTS --]</td>
[-- END_LOOP SUBPRODUCTS --]
</table>
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Sub Product layout

Postby Sir Yendor » Fri Jun 24, 2011 9:06 am

DOH... yes, the site is not active yet. THe URL will take you to an old site, where the URL I gave you won't work.

Try it replacing the domain name with the IP address: 198.171.204.150


http://198.171.204.150/Monogrammed_Gifts_For_Your_Home.html
and
http://198.171.204.150/Bath_Towels.html

Here is the code on the page:

<table width="950" height="121" border="0" cellpadding="0" cellspacing="0">
<tr><td align="left" valign="top">[-- LOOP SUBPRODUCTS 4 --]
[-- SUBPRODUCTS --]
[-- END_LOOP SUBPRODUCTS --]
</td></tr></table>
Sir Yendor
 
Posts: 47
Joined: Tue Sep 26, 2006 5:52 pm
Location: Portland

Re: Sub Product layout

Postby ShopSite Lauren » Fri Jun 24, 2011 9:34 am

The [-- LOOP SUBPRODUCTS 4 --] tag will start the rows and end the rows where needed, so you only need to include the cell option before and after the [-- SUBPRODUCT --] tag. So your template code should look like:

<table width="950" height="121" border="0" cellpadding="0" cellspacing="0">
[-- LOOP SUBPRODUCTS 4 --]
<td align="left" valign="top">[-- SUBPRODUCTS --]</td>
[-- END_LOOP SUBPRODUCTS --]
</table>
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Sub Product layout

Postby Sir Yendor » Fri Jun 24, 2011 10:10 am

Thanks for the continued help. I copy/pasted your code exactly as you provided and I'm still getting the page to show all sub products in one column. May I send you the entire template and you can see what I'm doing or do you have another idea we can discuss here?
Sir Yendor
 
Posts: 47
Joined: Tue Sep 26, 2006 5:52 pm
Location: Portland

Re: Sub Product layout

Postby ShopSite Lauren » Fri Jun 24, 2011 11:12 am

Yes, you can send the template as an attachment to info-team@shopsite.com. That will go to a team of people at ShopSite, including myself. I could look at the template and see if I can see what is causing the problem.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Sub Product layout

Postby Sir Yendor » Fri Jun 24, 2011 11:17 am

Just sent it, thanks.
Sir Yendor
 
Posts: 47
Joined: Tue Sep 26, 2006 5:52 pm
Location: Portland

Re: Sub Product layout

Postby ShopSite Lauren » Fri Jun 24, 2011 11:27 am

I looked at the template you sent, I noticed a few thing. First, you have the HTML table row tags in the DEFINE SUBPRODUCT section. You will want to remove the <tr> and </tr> HTML tags from the DEFINE SUBPRODUCT section of your product template. Next, because your define subproduct section also has the cell tags, <td> and </td>, you do not need those when you LOOP the subproducts, so you will want to change your LOOP SUBPRODUCT section to:
<table width="950" height="121" border="0" cellpadding="0" cellspacing="0">
[-- LOOP SUBPRODUCTS 4 --]
[-- SUBPRODUCTS --]
[-- END_LOOP SUBPRODUCTS --]
</table>

I also noticed that your product template does not have a DEFINE PRODUCT section. You will want to add that in.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Sub Product layout

Postby Sir Yendor » Fri Jun 24, 2011 12:49 pm

Thanks, this is a huge help. We're almost there.

Is it possible to use a smaller image for the image that displays for Sub Products either by assigning a percentage of the original size or by pulling from another image on the server?

There are a couple more layout issues I have, but I'm going to try and do that once I have an answer about the image size.

Thanks again for your continued help.
Sir Yendor
 
Posts: 47
Joined: Tue Sep 26, 2006 5:52 pm
Location: Portland

Re: Sub Product layout

Postby ShopSite Lauren » Fri Jun 24, 2011 3:11 pm

If all of your images are in the media directory AND if you are using the resize image feature (Images > Configure), then you can hard-code the image size you would like to use. For example, instead of having [-- PRODUCT.Graphic --] in the DEFINE SUBPRODUCT area of your product template, you would replace that with <img src="[-- OUTPUT_DIRECTORY_URL --]/media/ss_size3/[-- IMAGE PRODUCT.Graphic --]" border="0" alt="[-- PRODUCT.Name REMOVE_HTML --]">
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Sub Product layout

Postby Jim » Fri Jun 24, 2011 3:49 pm

As Lauren mentioned there is no automatic way to pull a different size image for a subproduct than what is assigned to the product (the one being used as a subproduct).

You can however build your own image urls to get the different size image, this can be done in several different ways.

1. If your images are all in the media directory see Lauren's answer.

2. If the image is not in the main image directory (media/some directory) There is no tag to get to the size directory directly because the [-- image product.graphic --] will return the path relative to the media directory (subdirectory/image.jpg) and the resized images are in
subdirectory/ss_sizeN/image.jpg.
There are several ways around this issue.
A. You could create a CALL script that you pass the image product.graphic result to and have your CALL script split the subdirectory from the image name and insert the ss_sizeN value between the subdirectory and the image name.
B. You could use 2 of the custom fields to hold the image name and subdirectory and then in your code you build the url similar to what I did above.
<img src="[-- output_url --]/media/[--product.fieldX1 --]/ss_sizeN/[-- product.fieldX2 --] alt="your alt text" border="your border width" ... other attributes you want to set > where product.fieldX1 contains the subdirectory path and product.fieldX2 contains the image filename.
C. If you know that all the images will be in a certain subdirectory you could set a VAR to represent the path to the image size you want and use one of the custom fields to contain the image filename. [-- VAR.imagepath "subdirectory/ss_sizeN" --]
and then create the image url similar to above <img src="[-- output_url --]/media/[--VAR.imagepath --]/ [--product.fieldX1 --] alt="your alt text" border="your border width" ... other attributes you want to set >

There might be other ways to do this too.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Re: Sub Product layout

Postby Sir Yendor » Mon Jun 27, 2011 8:39 am

Lauren, We are getting very close. I've done as you suggested. I replaced this:

[-- PRODUCT.Graphic --]

in the DEFINE SUBPRODUCT area with this:

<img src="[-- OUTPUT_DIRECTORY_URL --]/media/ss_size3/[-- IMAGE PRODUCT.Graphic --]" border="0" alt="[-- PRODUCT.Name REMOVE_HTML --]">

In the images/config area, in the "image Layout Defaults" I have set the size of the original image as 175 wide x 197 height. in the "Resized Image 3" area, I have selects "yes" to "Create Resized Images" and set the size to 125 x 141 and saved changes.

All of the images I am trying to rezies are located in "Media" then in one of the sub diectories ending with "Small" for example, the "For-Home-Small" directory versus "For-Home-Big". When I try and load the page ... http://carolinaandco.com/Bath_Towels.html (remember, you may need to replae the URL with the IP address 198.171.204.150 to see it) the images show the red x meaning a broken image. Prior to changing the code, the images appeared fine. Right clicking on one of the images shows this when I click on properties:

http://carolinaandco.com/media/ss_size3/For-Him-Small/Golf_Towel_SMALL.jpg

which imples I need to create a new directory and upload all the files there. Is this correct? My understanding from reading your post and looking at the configure images page is that this wouldn't be needed. If it is, it's no problem to do it. WHen I view the size of the broken image it's not showing the 125 x 141 I was hoping for, it's showing different sizes, as if it's taken a percentage of the original.

Have I missed something?

Thanks
Sir Yendor
 
Posts: 47
Joined: Tue Sep 26, 2006 5:52 pm
Location: Portland

Re: Sub Product layout

Postby Jim » Mon Jun 27, 2011 9:42 am

As I mentioned Lauren's solution will only work for images that are in the media directory of the store. The resized images for any image in the media directory will be in media/ss_size1 or media/ss_size2 or media/ss_size3. If you have a subdirectory of media such as media/For-Him-Small/ the resized images will be in media/For-Him-Small/ss_size1 or media/For-Him-Small/ss_size2 or media/For-Him-Small/ss_size3. Since the template tag [-- IMAGE PRODUCT.Graphic --] returns the full path for the image relative to the media directory it will return "For-Him-Small/Golf_Towel_SMALL.jpg" for your image. Since the resized image would be For-Him-Small/ss_size3/Golf_Towel_SMALL.jpg you can not simply use the [-- image product.graphic --] tag to create the url for the image, there is no way to put the ss_size3 in the path between For-Him-Small and Golf_Towel_SMALL.jpg. In order to do that you will need to use one of the methods I described in my previous post.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Re: Sub Product layout

Postby Sir Yendor » Mon Jun 27, 2011 2:15 pm

I think I've got it figured out. Thank you for your help and patience
Sir Yendor
 
Posts: 47
Joined: Tue Sep 26, 2006 5:52 pm
Location: Portland


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 87 guests

cron