Questions Regarding Custom Product Templates

Questions and answers about ShopSite Custom Templates

Questions Regarding Custom Product Templates

Postby tdsrob » Fri Jan 08, 2010 5:52 pm

I have been reading through the cookbook and help pages on shopsite for a few days now. I am still confused about using custom templates. I was hoping someone here can answer my questions and explain this process, who knows myb something will click for me.

So far I have built a product and page template using the "Quick & Easy" tutorial. My page template works great with the products showing up, however I am confused on how to setup the layout for the product and more information pages. I do not like how the layout looks from the code I received from he Quick & Easy" tutorial on the pages. I also cannot figure out how to edit the layout of the more information pages. Basically I want to change the way the products * info appear on my pages and also change the layout of my more information pages...
tdsrob
 
Posts: 21
Joined: Fri Jan 08, 2010 10:34 am
Location: Florida

Postby BFChris » Fri Jan 08, 2010 6:10 pm

Both the layout of products within a page and a "More Information" page are controlled by code in the Product template.

The [--Define_Product --] section of a product template is a sub-section of HTML code that is repeated within a Shopsite Page template for each product that appears on that page. It does so at the point within the page template where the [-- Loop_products --] tag appears. For example, each product may be in a table row of its own, so the [-- Define_product --] section of the Product template might look like:

Code: Select all
<tr><td>[-- Product.Name --]</td><td> [-- Product. Price --]</td>..... </tr>


Of course the table itself would need to be opened and closed in the page template (above and below the [-- Loop_products --] tags).


The [-- Define_MoreInfoPage --] section of the Product template defines a COMPLETE HTML page (starting with a DTD or at least <html> and ending with </html>). This is a standalone page where the detailed information for a single product resides (although sub-products and cross-sell items can also appear). The best strategy for coding this part of the template may be to pick a product and get the format looking like you want in another HTML editor (Dreamweaver, etc), go back and replace product-specific info in your sample page with the corresponding Shopsite tags, then paste the code into the Product template inside the [Define_moreInfoPage --] tags.

Hope that helps.

Note: I was working off the top of my head so the tag names used might not be 100% correct, but you should get the idea.
~~Barefoot Chris
--------------------------------
Barefoot Chris Web Design
www.barefootchris.net
--------------------------------
BFChris
 
Posts: 322
Joined: Mon Oct 09, 2006 3:28 pm
Location: PA

Thanks for the help - little problem im having after setting

Postby tdsrob » Sun Jan 10, 2010 2:38 pm

Thanks guys i finally figured it out. Everything looks great for the product layout & more information page, except I get a small error when publishing the template. The error sais:" [375] Template Error: Mismatched IF-END_IF tags" I do not know enough yet to figure out where this error is coming from. I narrowed it down to the more information page layout though. Here is the part of the code where i believe the error is coming from:

Code: Select all
<div class="prod_box_big">
<div class="product_title_big">
####################
#  PRODUCT NAME    #
####################
[-- IF PRODUCT.VariablePrice? --]
  [-- IF PRODUCT.VariableName? --]
    <span class="VariableProductName">
    [-- STORE.ProductName --]: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value="">
    </span>
  [-- ELSE --]
    <span class="ProductName">[-- PRODUCT.Name --]</span>
  [-- END_IF --]
[-- ELSE --]
  <span class="ProductName">[-- PRODUCT.Name --]</span>
[-- END_IF --]</div>
            <div class="center_prod_box_big">           
                 
                 <div class="product_img_big">
                 [-- IF ANALYTICS_MULTI_DOMAIN --]
          <form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
          <form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]
                 [-- IF PRODUCT.MoreInformationGraphic --]
              [-- PRODUCT.MoreInformationGraphic --]
            [-- END_IF --]</div>
              <div class="details_big_box">
         
                <div class="specifications">
                           
                           <p>&nbsp;</p>
                  <p align="center"><span class="price">
####################
#  PRODUCT PRICE   #
####################
[-- IF PRODUCT.QuantityPricing --]
#do nothing
[-- ELSE --]
  [-- INCLUDE Product-Price PROCESS --]
</span></p>
                           <p>&nbsp;</p>
                  <p align=""><img src="images/shipping-sm.gif"/><br /><li>Most Orders Ship in 24 Hours!</li><li>Free Shipping on Orders Over $99</li></p>
<p>[-- IF PRODUCT.DisplaySku --]Item #[-- PRODUCT.Sku --]<br>[-- END_IF --]</p>
                          <p>&nbsp;</p>
                          <p>&nbsp;</p>
                </div>
                <div class="prod_price_big" align="center">
#######################
#  ADD TO CART BUTTON #
#######################
[-- IF PRODUCT.DisplayOrderingOptions --]
  <br>
[-- END_IF --]
[-- INCLUDE Product-AddToCartButton PROCESS --]

          </td>
        </tr>
      </table>
 [-- IF Product.MoreInformationProductCrossSell --]
  [-- IF PRODUCT.CrossSell "0" --]
  [-- ELSE --]
<table class="pcs_table">
  <caption>[-- STORE.CartCrossSellHeader --]</caption>
      [-- LOOP Product_Cross_Sell 3 --]
     <td class="gcs_table_content">[-- PRODUCT_CROSS_SELL --]</td>
      [-- END_LOOP Product_Cross_Sell --]
</table>
  [-- END_IF --]
[-- END_IF --]

[-- IF Product.MoreInformationGlobalCrossSell --]
<table class="gcs_table">
  <caption>[-- STORE.GlobalCrossSellHeader --]</caption>
      [-- LOOP GLOBAL_Cross_Sell 3 --]
     <td class="gcs_table_content">[-- GLOBAL_CROSS_SELL --]</td>
      [-- END_LOOP Global_Cross_Sell --]
</table>
[-- END_IF --]


Now I am trying to figure out how to make my search field and submit button from my custom template work with shopsite. In other words im trying to add my search form into the shop site custom template with the appropriate shopsite tags
tdsrob
 
Posts: 21
Joined: Fri Jan 08, 2010 10:34 am
Location: Florida

Postby Jim » Mon Jan 11, 2010 8:48 am

This section doesn't appear to have the matching [-- END_IF --]
Code: Select all
####################
#  PRODUCT PRICE   #
####################
[-- IF PRODUCT.QuantityPricing --]
#do nothing
[-- ELSE --]
  [-- INCLUDE Product-Price PROCESS --]
</span></p>
                           <p>&nbsp;</p>
                  <p align=""><img src="images/shipping-sm.gif"/><br /><li>Most Orders Ship in 24 Hours!</li><li>Free Shipping on Orders Over $99</li></p>
<p>[-- IF PRODUCT.DisplaySku --]Item #[-- PRODUCT.Sku --]<br>[-- END_IF --]</p>
                          <p>&nbsp;</p>
                          <p>&nbsp;</p>
                </div>
                <div class="prod_price_big" align="center">
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Fixed!

Postby tdsrob » Mon Jan 11, 2010 9:41 am

Thanks Jim that was the issue. After staring at code for awhile, sometimes you just need a fresh pair of eyes looking at it :)
tdsrob
 
Posts: 21
Joined: Fri Jan 08, 2010 10:34 am
Location: Florida


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 10 guests

cron