error in product formatting

[FredW]

Hi ShopSite folks,

This morning I encountered a problem with some of our products being formatted incorrectly on a page. I searched the this forum for like issues and could not find anything.

This page was correct until I made some changes to the page and to some of the products assigned to the page. When I published the page, the formatting error appeared. I did changed too many variables to know which change caused the error.

I can't show you the page in error for in an attempt to find out what caused the problem, I tried to recreate the change that caused the error. However, my efforts did show that the problem appears to be related to products with an shipping option and with a pull down menu. It appears size of the lengthy pulldown text affects the formatting of the item in the page. Having product graphics, or not, also affect the formatting.

You can find my test pages by going to: http://keithdemo.keithspecialty.com/FW-ss-error1.htm . The default product template is Multi-use-product.sst.

If there is anything else I can provide to you to help me resolve this, please let me know.

Thanks,
Fred

[ShopSite Lauren]

Fred, if you are using the Multi-Use page template, you will want to have your products use the Multi-Use product template. That should fix the issue.

[FredW]

Hi Lauren,

Thanks for the reply.

Forget error page 2, 3 and 4. I admit I have mixed page and product templates for testing purposes.

Let's focus on Error 1 at url http://keithdemo.keithspecialty.com/FW-ss-error1.htm

It has page template: Multi-use-page-left and all the products on that page use Multi-purpose product template. That is the default page and product template from the Line Section themes and according to your ShopSite documeted page: http://www.shopsite.com/templates/cookbook/builtintemplates-linesections.shtml

If you look at that page it looks crappy and I consider it an error.

To test what you said would work, I changed copied that page and changed the page template to multi-use-page and the product section still looks crappy (I still consider it an error) as to the rest of the page by centering everything. I don't call that an error, just something we don't want.

So do you consider the error 1 page correct?
Fred

[ShopSite Lauren]

I am not sure I see what the error is. What would you like the page to look like?

[FredW]

Are you pulling my leg or are we seeing something different?

Maybe we should make sure we see the same thing. I turned what I see in to a jpg and uploaded it to: http://keithdemo.keithspecialty.com/media/ss-error1-page.jpg I circled in red three places where products are displayed on the page. I'll leave the alone until we agree we are seeing the same thing. Jim has the information to get into the site if you can't get it from him let me know and I'll give you assess information.

What I want is to all the products to be displayed in columns evenly spaced like in this page: http://keithdemo.keithspecialty.com/FW-ss-error1-avoid.htm I think the problem is when we add a lenghly shipping pulldown option. I can reword these to maybe avoid the issue, but I thought if it is a ShopSite problem, you may want to know it.

These are all test pages. The real product page is here: http://keithdemo.keithspecialty.com/water.line.pe.htm - the products two column are spaced way right, off the screen, forcing the user to scroll right, until you get to the bottom of the page and they jump left and the columes are different sizes.

All of these displays change depending on where the offending product is place that contains the lengthy pulldown text. If there is a way to wrap that text, it may help also.

[ShopSite Lauren]

Try adding a new product template using the code below and select that for your products.

Code: Select all

#############################################
# Multi-Use Product and More Info Template
# Copyright ShopSite Inc. Design By Lauren
#############################################

[-- DEFINE SUBPRODUCT --]
[-- IF VAR.SubproductDisplay "checkbox" --]
  <input type="checkbox" name="itemnum" value="[-- PRODUCT.RecordNumber --]"> [-- IF PRODUCT.DisplayName --][-- PRODUCT.Name --] [-- ELSE_IF PRODUCT.DisplaySku --][-- PRODUCT.Sku --] [-- ELSE_IF PRODUCT.OptionText --][-- PRODUCT.OptionText --] [-- END_IF --]
  [-- IF PRODUCT.DisplayPrice --][-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.SaleOn --][-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- END_IF --]<br>
[-- ELSE_IF VAR.SubproductDisplay "radio" --]
  <input type="radio" name="itemnum" value="[-- PRODUCT.RecordNumber --]"> [-- IF PRODUCT.DisplayName --][-- PRODUCT.Name --] [-- ELSE_IF PRODUCT.DisplaySku --][-- PRODUCT.Sku --] [-- ELSE_IF PRODUCT.OptionText --][-- PRODUCT.OptionText --] [-- END_IF --]
  [-- IF PRODUCT.DisplayPrice --][-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.SaleOn --][-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- END_IF --]<br>
[-- ELSE_IF VAR.SubproductDisplay "table" --]
  <td class="sub_pr_nme">[-- IF PRODUCT.DisplayName --][-- PRODUCT.Name --][-- ELSE_IF PRODUCT.DisplaySku --][-- PRODUCT.Sku --][-- ELSE_IF PRODUCT.OptionText --][-- PRODUCT.OptionText --][-- END_IF --]</td>
  <td class="sub_pr_prc">[-- IF PRODUCT.DisplayPrice --][-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.SaleOn --][-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- END_IF --]</td>
  <td class="sub_pr_add">
    [-- IF VAR.AddButtonGraphic --]
    <a href="[-- PRODUCT.AddToCartURL --]"><img src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart" border="0"></a>
  [-- ELSE_IF ADDIMAGE? --]
    <a href="[-- PRODUCT.AddToCartURL --]"><img [--ADDIMAGE--] border="0"></a>
  [-- ELSE --]
    <a href="[-- PRODUCT.AddToCartURL --]">[-- ADDTEXT --]</a>
  [-- END_IF --]
  </td>
[-- ELSE --]
  <option value="[-- PRODUCT.RecordNumber --]">[-- IF PRODUCT.DisplayName --][-- PRODUCT.Name --] [-- ELSE_IF PRODUCT.DisplaySku --][-- PRODUCT.Sku --] [-- ELSE_IF PRODUCT.OptionText --][-- PRODUCT.OptionText --] [-- END_IF --]
  [-- IF PRODUCT.DisplayPrice --][-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.SaleOn --][-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --][-- END_IF --]</option>
[-- END_IF --]
[-- END_DEFINE SUBPRODUCT --]
#############################
#############################
[-- DEFINE PRODUCT --]
[-- IF PRODUCT.ImageAlignment "Left" --]
  [-- VAR.Alignment "left" --]
[-- ELSE_IF PRODUCT.ImageAlignment "Right" --]
  [-- VAR.Alignment "right" --]
[-- ELSE --]
  [-- VAR.Alignment "center" --]
[-- END_IF --]

[-- IF PRODUCT.TextWrap "On" --]
  [-- VAR.Table "yes" --]
[-- ELSE --]
  [-- VAR.Table "no" --]
[-- END_IF --]

<div class="pr_info [-- VAR.Alignment --] [-- PRODUCT.DescriptionStyle --] [-- PRODUCT.DescriptionSize --]">
[-- IF PRODUCT.UseMultiMenus  checked --]
[-- ELSE_IF VAR.SubproductDisplay "table" --]
[-- ELSE --]
<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">
[-- END_IF --]

[-- IF VAR.Table "yes" --]
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
  [-- IF PRODUCT.Graphic --]
    [-- IF PRODUCT.DisplayGraphic --]
      [-- IF VAR.Alignment "right" --]
        <td valign="top" class="left">
      [-- ELSE --]
        <td valign="top" class="[-- VAR.Alignment --]">
        [-- IF PRODUCT.DisplayMoreInformationPage --]<a href="[-- PRODUCT.MoreInfoURL --]" title="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]">[-- PRODUCT.Graphic --]</a>
        [-- ELSE --]
        [-- PRODUCT.Graphic --]
        [-- END_IF --]
        [-- IF VAR.Alignment "center" --]
          </td></tr><tr><td valign="top" class="[-- VAR.Alignment --]" width="100%">
        [-- ELSE --]
          </td><td valign="top" class="[-- VAR.Alignment --]" width="100%">
        [-- END_IF --]
      [-- END_IF --]
    [-- ELSE --]<td valign="top" class="[-- VAR.Alignment --]" width="100%">
    [-- END_IF --]
  [-- ELSE --]<td valign="top" class="[-- VAR.Alignment --]" width="100%">
  [-- END_IF --]
[-- ELSE --]
  [-- IF PRODUCT.Graphic --]
    [-- IF PRODUCT.DisplayGraphic --]
      [-- IF PRODUCT.DisplayMoreInformationPage --]<a href="[-- PRODUCT.MoreInfoURL --]" title="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]">[-- PRODUCT.Graphic --]</a>
      [-- ELSE --]
      [-- PRODUCT.Graphic --]
      [-- END_IF --]
    [-- END_IF --]
  [-- END_IF --]
[-- END_IF --]

# product name, description and SKU.  No SKU is displayed if the product has subproducts
  [-- IF PRODUCT.VariableName? --]
     <br><b>[-- STORE.ProductName --]:</b> <input name="[--PRODUCT.RecordNumber--]:name" size="20" maxlength="100" value="" type="text"><br>
  [-- ELSE --]
    [-- IF PRODUCT.Name --]
      [-- IF PRODUCT.DisplayName --]
        [-- IF PRODUCT.DisplayMoreInformationPage --]<a class="textwrap-off [-- PRODUCT.NameStyle --] [-- PRODUCT.NameSize --]" href="[-- PRODUCT.MoreInfoURL --]" title="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]">[-- PRODUCT.Name --]</a>
        [-- ELSE --]<span class="textwrap-off [-- PRODUCT.NameStyle --] [-- PRODUCT.NameSize --]">[-- PRODUCT.Name --]</span>
        [-- END_IF --]
      [-- END_IF --]
    [-- END_IF --]
  [-- END_IF --]

<span class="reviews-brief">[-- REVIEWS_STARS --]</span>
  [-- IF PRODUCT.ProductDescription --][-- PRODUCT.ProductDescription --][-- END_IF --]

  [-- IF PRODUCT.VariableSku? --]
     <br><b>[-- STORE.Sku --]:</b> <input name="[--PRODUCT.RecordNumber--]:sku" size="10" value="" type="text">
  [-- ELSE_IF PRODUCT.NumSubproducts "0" --]
    [-- IF PRODUCT.Sku --]
      [-- IF PRODUCT.DisplaySku --]
        <span class="pr_sku textwrap-off [-- PRODUCT.SkuStyle --] [-- PRODUCT.SkuSize --]">[-- STORE.Sku --]: [-- PRODUCT.Sku --]</span>
      [-- END_IF --]
    [-- END_IF --]
  [-- END_IF --]

# product price.  No price is displayed if the product has subproducts
[-- IF PRODUCT.NumSubproducts "0" --]
  [-- IF PRODUCT.VariablePrice? --]
  <p class="pr_price [-- PRODUCT.PriceStyle --] [-- PRODUCT.PriceSize --]"><b>[-- STORE.Price --]:</b> <input name="[--PRODUCT.RecordNumber--]:price" size="4" value="" type="text"></p>
  [-- ELSE_IF PRODUCT.DisplayPrice --]
    [-- IF PRODUCT.QuantityPricing --]
      [-- PRODUCT.QuantityPricing --]
    [-- ELSE --]
    <p class="pr_price [-- PRODUCT.PriceStyle --] [-- PRODUCT.PriceSize --]">
      [-- IF PRODUCT.SaleAmount --]
        [-- IF PRODUCT.SaleOn --]
          <strike>[-- PRODUCT.Price --][-- IF PRODUCT.AltPrice --] [-- PRODUCT.AltPrice --][-- END_IF --]</strike> [-- PRODUCT.SaleAmount --][-- IF PRODUCT.AltSaleAmount --] [-- PRODUCT.AltSaleAmount --][-- END_IF --]
        [-- ELSE --]
          [-- PRODUCT.Price --][-- IF PRODUCT.AltPrice --] [-- PRODUCT.AltPrice --][-- END_IF --]
        [-- END_IF --]
      [-- ELSE --]
        [-- PRODUCT.Price --][-- IF PRODUCT.AltPrice --] [-- PRODUCT.AltPrice --][-- END_IF --]
      [-- END_IF --]
    </p>
    [-- END_IF --]
  [-- END_IF --]
[-- END_IF --]
# if the product has subproducts then display the subproducts otherwise display the product add to cart information.
[-- IF PRODUCT.SubProduct --]
    [-- IF VAR.SubproductDisplay "checkbox" --]
      <br>[-- LOOP SUBPRODUCTS --]
        [-- SUBPRODUCTS --]
      [-- END_LOOP SUBPRODUCTS --]
    [-- ELSE_IF VAR.SubproductDisplay "radio" --]
      <br>[-- LOOP SUBPRODUCTS --]
        [-- SUBPRODUCTS --]
      [-- END_LOOP SUBPRODUCTS --]
    [-- ELSE_IF VAR.SubproductDisplay "table" --]
      <table id="sub_pr">
      [-- LOOP SUBPRODUCTS 1 --]
        [-- SUBPRODUCTS --]
      [-- END_LOOP SUBPRODUCTS --]
      </table>
    [-- ELSE --]
      <br><select name="itemnum" class="sub_pr">
      [-- LOOP SUBPRODUCTS --]
        [-- SUBPRODUCTS --]
      [-- END_LOOP SUBPRODUCTS --]
      </select><br><br>
    [-- END_IF --]

[-- ELSE --]
# product has no subproducts
[-- IF PRODUCT.UseMultiMenus  checked --]
  [-- IF PRODUCT.DisplayMoreInformationPage --]
    [-- IF MOREINFOIMAGE? --]
      <br><a href="[-- PRODUCT.MoreInfoURL --]"><img [-- MOREINFOIMAGE --] border="0"></a>
    [-- ELSE --]
      <br><a href="[-- PRODUCT.MoreInfoURL --]" class="btn nobr">[-- MOREINFOTEXT --]</a>
    [-- END_IF --]
  [-- END_IF --]
[-- ELSE --]
<input type="hidden" name="itemnum" value="[-- PRODUCT.RecordNumber --]">

  [-- IF product.DisplayOrderQuantity? --]
    <span class="pr_qty">[-- STORE.Quantity --]: <input type=text size=2 name="[-- PRODUCT.RECORDNUMBER --]:qnty" value="[-- IF PRODUCT.MinimumQuantity "0" --]1[-- ELSE_IF PRODUCT.MinimumQuantity "" --]1[-- ELSE --][-- PRODUCT.MinimumQuantity --][-- END_IF --]"></span>
  [-- END_IF --]

  [-- IF PRODUCT.DisplayOrderingOptions --]
      [-- IF PRODUCT.OptionText --]<span class="opt_hdr [-- PRODUCT.NameStyle --]">[-- PRODUCT.OptionText --]</span>[-- END_IF --]
    [-- IF VAR.Alignment "center" --]<center>[-- Order_Option_Menu Column --]</center>[-- ELSE_IF VAR.Alignment "right" --]<span class="oo-right">[-- Order_Option_Menu Column --]</span>[-- ELSE --][-- Order_Option_Menu Column --][-- END_IF --]
      [-- IF PRODUCT.OptionsBoxHeader --]<span class="opt_hdr [-- PRODUCT.NameStyle --]">[-- PRODUCT.OptionsBoxHeader --]</span>[-- END_IF --]
    [-- IF PRODUCT.OptionsBox --]<textarea name="[-- PRODUCT.Recordnumber --]:freeopt" cols="[-- PRODUCT.OptionsBoxColumns --]" rows="[-- PRODUCT.OptionsBoxRows --]"></textarea><br>[-- END_IF --]
  [-- END_IF --]
[-- END_IF --]
[-- END_IF --]

[-- IF PRODUCT.UseMultiMenus  checked --]
[-- ELSE_IF VAR.SubproductDisplay "table" --]
[-- ELSE --]
  [-- IF VAR.AddButtonGraphic --]
  <input class="pr_add" type="image" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
  [-- ELSE_IF ADDIMAGE? --]
  <input class="pr_add" type="image" [--ADDIMAGE--]>
  [-- ELSE --]
  <input class="pr_add" type="submit" value="[-- ADDTEXT --]">
  [-- END_IF --]
[-- END_IF --]

[-- IF WishList --]<br>[-- WishList --][-- END_IF --]

[-- IF VAR.Table "yes" --]
  [-- IF VAR.Alignment "right" --]
    [-- IF PRODUCT.Graphic --]
      [-- IF PRODUCT.DisplayGraphic --]
        </td>
        <td valign="top" class="[-- VAR.Alignment --]">
        [-- IF PRODUCT.DisplayMoreInformationPage --]<a href="[-- PRODUCT.MoreInfoURL --]" title="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]">[-- PRODUCT.Graphic --]</a>
        [-- ELSE --]
        [-- PRODUCT.Graphic --]
        [-- END_IF --]</td>
      [-- END_IF --]
    [-- ELSE --]</td>
    [-- END_IF --]
  [-- ELSE --]</td>
  [-- END_IF --]
  </tr>
</table>
[-- END_IF --]
[-- IF VAR.SubproductDisplay "table" --]
[-- ELSE --]
</form>
[-- END_IF --]
</div>
[-- END_DEFINE PRODUCT --]
#############################
#############################
[-- DEFINE PRODUCT_CROSS_SELL --]
 [-- INCLUDE cross-sell-default.sst PROCESS --]
[-- END_DEFINE PRODUCT_CROSS_SELL --]
#############################
#############################
[-- DEFINE MORE_INFO_PAGE --]
[-- IF VAR.MoreInfoTemplate --]
  [-- INCLUDE VAR.MoreInfoTemplate PROCESS --]
[-- ELSE --]
  [-- INCLUDE Classic-MoreInfoPage PROCESS --]
[-- END_IF --]
[-- END_DEFINE MORE_INFO_PAGE --]

[FredW]

Wow! Lauren, You the Woman!

What a great response and reply!

The error page and the full product page have been redone with the template you provided and I'm VERY happy!

The test error page (http://keithdemo.keithspecialty.com/FW-ss-error1.htm) has item such that only one column has the lengthly popdown option to select, the other column is narrow since not product in it do not have this popdown. It's doable and we can tweak it now that is formats correctly.

The full product page (http://keithdemo.keithspecialty.com/water.line.pe.htm) have both column extra wide because both colume have lenghtly popdown text. One has to scroll right to see all the column but is workable.

I'll show this to our team and see what they think, but I'm happy.

Thanks tons! Between ShopSite and LexiConn support, you both are setting a high bar for your competitors. Keep up the great work!

Fred

[Jim]

You could make the pulldown options shorter by rephrasing the descriptive text and pulldown text. Put most of the question in the descriptive text and just a couple of words in the pulldown options.

Maybe something like
Shipping on this item is an estimate only. Orders of 50 feet or more may incur an extra $50 UPS charge for an oversize item. UPS ground estimates listed below are valid for sizes under 50 feet. If actual shipping charges exceed the estimate, how do you want us to proceed with your order.
Options:
Contact me before shipping.
Adjust charge and ship order.

They should be expecting the shipping charge to be greater than the estimate if they order a large quantity so that is the only time you really need to have them say what they want to have you do. If the shipping is less than the estimate then they were already willing to pay that estimated amount or they wouldn't have placed the order. Getting the order with a lower than expected shipping charge would be a pleasant surprise for them.

[FredW]

Jim,

Greats suggestions! Sometime a fresh view is better than fixing a bug.

Thanks,
Fred