Exact Position / Image, Description, Drop Downs. etc...

[jmitteco]

I've been setting up my "More Info Pages" custom templates & wondering if there's a way to control exact positioning of the image, description & drop down order options on the page.
I'd like a simple but large product image on the left of the page & the description & other order options to the right of the page.
I cab separate the sections with DIVs but how do I direct theses ShopSite elements to be placed there?
I can do it with Order Anywhere buttons but that's going to mean a separate custom page for each item.
Am I going to have to get into the code editing & placing snippets for each element inside these DIVs?
Any help?
Thanks in advance.
John

[Jim]

What version of ShopSite are you using? That will determine which built in themes are available to you to select from.
The layout of the moreinfo page will be determined by the product template used in the theme you select.

Have you looked through the various themes to see if one of them might have the product moreinfo page laid out the way you would like it? You can find a description of the build in theme at http://www.shopsite.com/templates/cookbook/builtintemplates.shtml . The page doesn't show the layout of the moreinfo page but it will give you an idea of what the regular pages of the store look like.

I switched my test store theme to the Ship-Shape theme and the moreinfo page is laid out with the image on the left and the product information to the right.

If none of the built in themes work for you, it is possible to create a custom template with the layout that you want. If that is the way you want to proceed it will require that you know how to layout a page in html and then you can insert the appropriate template tags to display the product information where you want it. If you are just making the template for your own use it doesn't need to be nearly as complex as what the templates provided with your ShopSite software.

[jmitteco]

Hi Jim & thanks for the response.
I'm using Manager.
I have created my own custom pages on my own for the store. Everything is in DIVs & controlled with css.
I'm new to shopsite & it's the first time I'm using custom templates. I did do a temporary online store for Valentine's day, with 18 items, using Order Anywhere buttons.
That works fine for a small number of items but not so good with large numbers.
I've followed the custom templates tutorials & that seems to work fine except for Shopsite elements not being placed where I want them.
For example, on my "More Info" pages, I want the large image of the product on the left, with the Description & order options listed on the right side.
Here's a link to my test page that shows what I'm trying to achieve: http://taiflora.com/storenew/tf_md_moreinfo2.html
Excuse any missing images, I just threw it online in a hurry.
As you can see, everything lines up to the right of the picture properly.
The text is there as a place holder & the drop down menus for the "bouquet size, delivery date & add to cart button" will go in those boxes.
My problem is how to make this happen automatically through shopsite so I don't have to use Order Anywhere buttons or have a separate custom template page for every product.
Excuse me if I'm missing something obvious, as I said, I'm new to this.
I believe what you said in your last sentence about "you can insert the appropriate template tags to display the product information where you want it" is what I'm looking for but need some direction on how to do that. Where do I start? Where are the shopsite tutorials for this?
I've been creating websites for years in Dreamweaver & know enough coding to make me slightly dangerous.
Any help is appreciated.
Thanks.
John

[Jim]

Your page look quite nice and clean and is a good starting point for making the moreinfo page template.

The more info page template is part of the product template which has this basic format.

Code: Select all

[-- DEFINE PRODUCT_CROSS_SELL --]
# This defines how the Cross sell products will look
[-- END_DEFINE PRODUCT_CROSS_SELL --]

[-- DEFINE MORE_INFO_PAGE --]
# This defines how the more information page for the products
#   that use this template will look
[-- END_DEFINE MORE_INFO_PAGE --]

[-- DEFINE SUBPRODUCT --]
# This define is used to control how the sub-products assigned
#    to the main product will be displayed
#    (if no sub-products assigned, this section is ignored)
[-- END_DEFINE SUBPRODUCT --]

[-- DEFINE PRODUCT --]
# This define is used to control how the products will look
[-- END_DEFINE PRODUCT --]

Copy all the html for your sample page and place it into the section [-- DEFINE MORE_INFO_PAGE --] So it looks something like this (note I deleted a bunch so as to not take up lots of space in the forum)

Code: Select all

[-- DEFINE PRODUCT_CROSS_SELL --]
# This defines how the Cross sell products will look
[-- END_DEFINE PRODUCT_CROSS_SELL --]

[-- DEFINE MORE_INFO_PAGE --]
# This defines how the more information page for the products
#   that use this template will look
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tai Flora OnLine</title>
<style type="text/css">
body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
...

...
      </div>
    </div>
  </div>
</div>
</body>
</html>
[-- END_DEFINE MORE_INFO_PAGE --]

[-- DEFINE SUBPRODUCT --]
# This define is used to control how the sub-products assigned
#    to the main product will be displayed
#    (if no sub-products assigned, this section is ignored)
[-- END_DEFINE SUBPRODUCT --]

[-- DEFINE PRODUCT --]
# This define is used to control how the products will look
[-- END_DEFINE PRODUCT --]

Then go through the html in the file and replace sections where you have put in actual content and replace it with the template tag that represents that content. For example the large image of the product has this html.

Code: Select all

 <div id="itemPic"><img src="media/items/item6.jpg" alt="Tropical Spring Bouquet" width="600" height="575" border="0" /></div>

which you would replace with

Code: Select all

 <div id="itemPic">[-- PRODUCT.MoreInformationGraphic --]</div>

The next section would be the product name and description which in the html page is

Code: Select all

<div id="itemOrderOne"><span class="itemHeaderBold">Roses &amp; Romance Bouquet</span><br />
Red roses mixed with cymbidium &amp; dendrobium orchids.<br />
She'll never forget you.</div>

So we replace the changeable part like this.

Code: Select all

<div id="itemOrderOne"><span class="itemHeaderBold">[-- PRODUCT.Name --]</span><br />
[-- PRODUCT.ProductDescription --]
</div>

The ordering options and add to cart can be added with a single tag. So this section

Code: Select all

         <img src="media/horiz_line1.png" width="418" height="2" border="0" />
        <div id="itemOrderTwo">1). Select your bouquet size:</div>
        <img src="media/horiz_line1.png" width="418" height="2" border="0" />
        <div id="itemOrderThree">2). Select a delvery date:</div>
        <img src="media/horiz_line1.png" width="418" height="2" border="0" />
        <div id="itemOrderFour">ADD TO CART</div>
        <img src="media/horiz_line1.png" width="418" height="2" border="0" />

can be changed to this.

Code: Select all

 
       <img src="media/horiz_line1.png" width="418" height="2" border="0" />
       <div id="itemOrderTwo">[-- PRODUCT.OrderCheckout --] </div>
       <img src="media/horiz_line1.png" width="418" height="2" border="0" />


That would take care of most of the More Info page section. There may be other elements on that page that I missed which could be done with template tags but that should give you an idea of how to do it.

You would still need to add code for the [-- DEFINE PRODUCT --] section and possibly the cross-sell and subproduct sections. The [-- DEFINE PRODUCT --] is what is used for the product layout on a store page where other products are display also. You only need to define it once because all products on that page would probably have the same basic layout.

The template tutorials on our main website give more instructions that might be helpful. http://www.shopsite.com/templates/cookbook/ If you have other questions feel free to ask them here on the forum.

[jmitteco]

Thanks again Jim,
A lot to process. The Shopsite tags are a whole new language. I would think they would have had a simpler way of creating these custom templates.
Rolling up my sleeves & diving in.
Thanks again.
John

P.S. I'm sure I'll have more questions as I go.
Are you one of the shopsite designers?

[Jim]

I work for ShopSite but I am in the QA department and not in template design. So like other people I know enough to get myself in trouble.

Creating templates for an individual store isn't really that complicated, you just design the way you want the pages to look using some html editing software. You can start by using hard coded values for things like images, text, price etc. and get it laid out so it looks good. Then just replace the hardcoded values with the template tag that represents that content from ShopSite.

The reason the ShopSite provided template are so complex is because we need to take into account every possible configuration setting that any merchant might use. Typically most merchants have a set layout so they know if, for example all products will have an image or sku, etc. so there isn't any need to include statements in the template to see if there is a value for something before using it. This greatly simplifies the code needed in the template.

[jmitteco]

Hey Jim,

I do have another question.
In your reply, you said:
"Then go through the html in the file and replace sections where you have put in actual content and replace it with the template tag that represents that content. For example the large image of the product has this html".
CHANGE THIS:
<div id="itemPic"><img src="media/items/item6.jpg" alt="Tropical Spring Bouquet" width="600" height="575" border="0" /></div>
TO THIS:
<div id="itemPic">[-- PRODUCT.MoreInformationGraphic --]</div>

My question is, how does that tag([-- PRODUCT.MoreInformationGraphic --]) know to put my image there? Does that need to be setup as an include? Or what am I missing here??

Also, on setting up the shopping cart custom templates, does it work the same way? Where do I find a list of the ShopSite tags?

I did o through the custom template video tutorials but I think a lot is left out. Some of the tutorials don't even show the final result at the end.
Thanks again.
John

[Jim]

When you publish the store (Utilities > Publish > Regenerate) the publish process uses the template assigned to the Page or Product and looks for ShopSite template tags. It replaces the template tag with the value it represents for the page or product that is being generated. So the template tag [-- PRODUCT.MoreInformationGraphic --] will have the information to display the Moreinfo image for the product that is currently being put into the html code for the page. When the public come to the next product that products image will be used.

When editing a template in the backoffice of your store under Merchandising > Custom Templates there is a View Tags button under the edit field. Clicking on that button opens a page with a list of template tags broken out into sections where they can be used. Here is a link to the "cheat sheet" for version 12
http://www.shopsite.com/help/12.0/en-US/templates/custom.template.cheatsheet.html There is also a section of the help that gives more info on most of the template tags at http://www.shopsite.com/help/12.0/en-US/sc/pro/custom.template.spec-global.html

[jmitteco]

Hey Jim,
I'm still struggling with the More Info page.
I feel like I've made some progress but can't control exactly how I want these elements to look or where they are to be positioned.
The image is in the right place & I've got the other information on the right side of the image, as I wanted but for some reason the SKU# is displaying above the name & the description isn't showing at all.
The text size is also an issue. I changed the text size in my css & re-uploaded but it's not affecting the text size. What is controlling this?

Also, The two different ordering options I have for this product.
How can I separate them & have them displayed in different DIVs?
I'm still confused on this part. They seem to be locked to the ADD TO CART button.
I've tried adding "[-- PRODUCT.DisplayOrderingOptions --]" in my DIV tag but it had no affect.
Here's a link to the page in question:
http://taiflo.fatcow.com/store/product20.html

If there was another template of something similar to what I'm trying to do, that I could look at, that would be helpful.
Any help is appreciated.
Thanks again.
John

[Jim]

The tag for the sku is [-- PRODUCT.SKU --] to move where it displays just find that tag in the [-- DEFINE MORE_INFO_PAGE --] in the product template that you are using and move it to where you want it to display.
The text for the product can come from two different areas, the main product description is output by the template tag [-- PRODUCT.ProductDescription --] . The more information text is displayed by the tag [-- PRODUCT.MoreInformationText --]. Just place the tag for which ever description you want in the place where you want it to display.

There is probably a style associated with the text so check the html source of the page and see what style is around the text you want changed. Then modify that style with your own css.

The Order Options are always displayed by a single tag, so there is no easy way to separate them as far as you want them to be.
In my first sample code I gave you the easiest way to display the order options and checkout buttons all with one tag, [-- PRODUCT.OrderCheckout --]. That one tag opens the require form element, outputs the order option text description, outputs all the order options, outputs the add to cart and view cart buttons and closes the form.

It is possible to break up the output using multiple tags that will give you more control over the layout. Here is a more expanded version of what the [-- PRODUCT.OrderCheckout --] does. You could use this in place of that tag.

Code: Select all

<form action="[-- SHOPPING_CART_URL Base --]/order.cgi" method="post">
   <input type="hidden" name="storeid" value="[-- STORE.ID --]">
   <input type="hidden" name="dbname" value="products">
   <input type="hidden" name="function" value="add">
   <input type="hidden" name="itemnum" value="[-- PRODUCT.RecordNumber --]">
  [-- IF PRODUCT.DisplayOrderingOptions --]
     [-- IF PRODUCT.OptionText --]<span class="options-hdr">[-- PRODUCT.OptionText --]</span>[-- END_IF --]
     [-- IF PRODUCT.OptionFiniteText --]<span class="product-options">[-- Order_Option_Menu Column --]</span>[-- END_IF --]
  [-- END_IF --]
  [-- IF PRODUCT.DisplayOrderQuantity --]
      <span class="product-quantity">[-- STORE.Qty --]: <input type="text" size="3" value="[-- IF PRODUCT.MinimumQuantity "0" --]1[-- ELSE_IF PRODUCT.MinimumQuantity "" --]1[-- ELSE --][-- PRODUCT.MinimumQuantity --][-- END_IF --]" name="[-- PRODUCT.RecordNumber --]:qnty"></span>
  [-- END_IF --]
  [-- IF ADDIMAGE? --]
      <input class="add" type="image" [--ADDIMAGE--]>
  [-- ELSE --]
      <input class="add" type="submit" value="[-- ADDTEXT --]">
  [-- END_IF --]
</form>

The above code will put the order options each on a separate row so the two order options you have for will look like

Code: Select all

Select Bouquet Size
Delivery date

Instead of being on the same row.
Give that a try and see if you like it better.