Template Cart and Price Text Wrap

[krawick$]

I am using Shopsite 10 and I use the awesome orange theme in blue. Anyway, the orange template shows the item description, price, cart and quantity inline with the product image. However, when you apply the theme these items are below the item image. I had spoke with someon at shopsite a while back about this and they had me do a few things which move something but not everything. In the end when I hung up with them I tried some things on my own and found that turning off text wrap moved the decription where I wanted it. Somehow I don't remember how I got everything where I wanted it, then I changed my color from green to blue and it all reset...So, I took off text wrap again and the description is moved where I want it too, but the price, cart and quantity are under the image again?? I thought before I had gone into the product and selected a different product layout to move the cart, price and quanity over however, before it still kept the borders around the product image as the awesome theme has. Now if I do this, it changes the layout for the product and my borders goes away around the product, which I dont' want.

Does anyone know how to get the price, cart and quantity to not wrap and to have it under my description, which is in line with the photo rather than under the photo, but still have the border and theme that awesomer orange has?

Example




image:..................Product Name
..........................Descrption
..........................Price
..........................Add to cart Quantity

[ShopSite Lauren]

You will need to modify the template. follow the steps below.

1 - Make sure your products are using the awesome_orange_001_pr_template.sst (Products > Edit Product Layout).
2 - Go to Merchandising > Custom Templates > Includes, and create a new include file called "awesome_orange_001_pr_include.sst"
3 - Edit the newly created include file and replace everything in it (should be just a single line) with the code below.
4 - After you have made the template change, go to Utilities > Publish > Regenerate, to recreate your entire store with the template changes.

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">
[-- IF VAR.define "subproduct" --]
<input type="hidden" name="super" value="[-- Product.Parent --]">
[-- END_IF --]
<input type="hidden" name="itemnum" value="[-- PRODUCT.RecordNumber --]">
      <table class="pr_table" width="150">
        <tr>
          <td class="pr_image">
#<!-- Image -->#
          [-- IF PRODUCT.Graphic --]
            [-- IF PRODUCT.DisplayMoreInformationPage --]
              <a class="pr_image" href="[-- PRODUCT.MoreInfoURL --]"><img class="pr_image" [-- PRODUCT.Graphic REMOVE_HTML --] alt="[-- IMAGE PRODUCT.Graphic --]"></a>
            [-- ELSE --]
              <img class="pr_image" [-- PRODUCT.Graphic REMOVE_HTML --] alt="[-- IMAGE PRODUCT.Graphic --]">
            [-- END_IF --]
          [-- END_IF --]
          </td>
          <td class="pr_data" style="padding-left: 14px;">
#<!-- Name Data -->#
[-- IF PRODUCT.DisplayMoreInformationPage --]
  [-- IF PRODUCT.DisplayName --]
    [-- IF PRODUCT.VariableName? --]
        <a class="pr_name" style="[-- VAR.pr_name_size --][-- VAR.pr_name_styles --]">[-- STORE.ProductName --]</a>: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value=""><br>
      [-- ELSE --]
      <a class="pr_name" href="[-- PRODUCT.MoreInfoURL --]" style="[-- VAR.pr_name_size --][-- VAR.pr_name_styles --]">[-- PRODUCT.Name --]</a><br>
    [-- END_IF --]
    [-- IF PRODUCT.DisplaySKU --]
      [-- IF PRODUCT.VariableSKU? --]
        <span class="pr_sku" style="[-- VAR.pr_sku_size --][-- VAR.pr_sku_styles --]">[-- STORE.SKU --]:</span> <input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="10" maxlength="20" value=""><br>
        [-- ELSE --]
        <span class="pr_sku" style="[-- VAR.pr_sku_size --][-- VAR.pr_sku_styles --]">[-- PRODUCT.SKU --]</span><br>
      [-- END_IF --]
    [-- END_IF --]
  [-- ELSE --]
    [-- IF PRODUCT.DisplaySKU --]
      [-- IF PRODUCT.VariableSKU? --]
        <a class="pr_sku" style="[-- VAR.pr_sku_size --][-- VAR.pr_sku_styles --]">[-- STORE.SKU --]:</a> <input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="10" maxlength="20" value=""><br>
        [-- ELSE --]
        <a class="pr_sku" href="[-- PRODUCT.MoreInfoURL --]" style="[-- VAR.pr_sku_size --][-- VAR.pr_sku_styles --]">[-- PRODUCT.SKU --]</a><br>
      [-- END_IF --]
    [-- END_IF --]
  [-- END_IF --]
[-- ELSE --]
  [-- IF PRODUCT.DisplayName --]
    [-- IF PRODUCT.VariableName? --]
        <span class="pr_name" style="[-- VAR.pr_name_size --][-- VAR.pr_name_styles --]">[-- STORE.ProductName --]: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value=""></span><br>
      [-- ELSE --]
      <span class="pr_name" style="[-- VAR.pr_name_size --][-- VAR.pr_name_styles --]">[-- PRODUCT.Name --]</span><br>
    [-- END_IF --]
  [-- END_IF --]
  [-- IF PRODUCT.DisplaySKU --]
    [-- IF PRODUCT.VariableSKU? --]
      <span class="pr_sku" style="[-- VAR.pr_sku_size --][-- VAR.pr_sku_styles --]">[-- STORE.SKU --]:</span> <input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="10" maxlength="20" value=""><br>
      [-- ELSE --]
      <span class="pr_sku" style="[-- VAR.pr_sku_size --][-- VAR.pr_sku_styles --]">[-- PRODUCT.SKU --]</span><br>
    [-- END_IF --]
  [-- END_IF --]
[-- END_IF --]
#<!-- Description -->#
                <span class="pr_desc" style="[-- VAR.pr_description_size --][-- VAR.pr_description_styles --]">[-- PRODUCT.ProductDescription --]</span><br>
      [-- IF WishList --][-- WishList --]<br>[-- END_IF --]
#<!-- Subproducts or price and buttons -->#
            [-- IF PRODUCT.NumSubproducts "0" --]
[-- IF PRODUCT.DisplayPrice --]
  [-- IF PRODUCT.VariablePrice? --]
    <span class="pr_price" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[--STORE.Price --]: [-- STORE.CurrencySymbol --]<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value=""></span>
  [-- ELSE --]
    [-- IF PRODUCT.QuantityPricing --]
      <span class="pr_price" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[-- PRODUCT.QuantityPricing --]</span>
    [-- ELSE --]
      [-- IF PRODUCT.SaleOn --]
        <span class="pr_price_sale" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[-- PRODUCT.Price --]</span> <span class="pr_sale_price" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[-- STORE.OnSaleText --] [-- PRODUCT.SaleAmount --]</span>
        [-- IF PRODUCT.AltPrice --]
        <br>
        <span class="pr_alt_price_sale" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[-- PRODUCT.AltPrice --]</span> <span class="pr_alt_sale_price" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[-- STORE.OnSaleText --] [-- PRODUCT.AltSaleAmount --]</span>
        [-- END_IF --]
      [-- ELSE --]
        <span class="pr_price" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[-- PRODUCT.Price --]</span>
        [-- IF PRODUCT.AltPrice --]
        <span class="pr_alt_price" style="[-- VAR.pr_price_size --][-- VAR.pr_price_styles --]">[-- PRODUCT.AltPrice --]</span>
        [-- END_IF --]
      [-- END_IF --]
    [-- END_IF --]
  [-- END_IF --]
<br>
[-- END_IF --]
#<!-- Add To Cart Data -->#
[-- 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 --]
[-- IF PRODUCT.DisplayOrderingOptions "checked" --]
  <span class="pr_option_text">[-- PRODUCT.OptionText --]</span>
  <br>
  [-- ORDER_OPTION_MENU COLUMN --]
  <br>
[-- END_IF --]

[-- IF PRODUCT.DisplayOrderQuantity "checked" --]
  <span class="pr_quantity">[-- STORE.OrderQuantity --]: <input class="pr_quantity" type="text" size="2" name="[-- PRODUCT.RecordNumber --]:qnty" value="1"></span>
[-- END_IF --]

[-- IF VAR.make_form "yes" --]
  <input class="pr_addtocart_button" type="image" value="submit" src="[-- ShopSite_Images --][-- VAR.button_path --]/[-- VAR.add_button_name --]" alt="Add to Cart">
[-- ELSE --]
  <a class="pr_addtocart_button" href="[-- PRODUCT.AddToCartURL --]"><img class="pr_addtocart_button" alt="Add to Cart" src="[-- ShopSite_Images --][-- VAR.button_path --]/[-- VAR.add_button_name --]" border="0"></a>
[-- END_IF --]
[-- END_IF --]

            [-- ELSE --]
[-- IF VAR.define "subproduct" --]
#<!-- Do Nothing -->#
[-- ELSE --]
        <table class="pr_sub_loop">
          [-- LOOP SUBPRODUCTS VAR.subpr_cols --]
            <td class="pr_sub_loop_data">[-- SUBPRODUCTS --]</td>
          [-- END_LOOP SUBPRODUCTS --]
        </table>
[-- END_IF --]
            [-- END_IF --]
          </td>
        </tr>
      </table>
</form>

[krawick$]

Thanks so much.. this worked great!!!

[krawick$]

Another question, is there a way to get the photo's to fall within a certain size block. My images seem to be all different sizes. My images were large upon upload so I set the upload configuration to resize if needed and put in values. If the products were about the same proportions this worked ok, but if not, they were still all different sizes. Just really would like a way to have all photo's fit into the same size photo block. This way the description text starts in the same place for each product and the images look balanced on the page.

[ShopSite Lauren]

What you will want to do is go to Images > Configure, and set the resized images to max pixels rather than percent dimensions. Setting the resized images to specific pixels will make all images the same size regardless of the dimensions of the original image uploaded (except if the original image is even smaller than the resized image size...if all your images are large then you won't have a problem).

After you have changed the resized image sizes to pixel dimensions (I typically set image 1 to something between 300-400, image 2 to something between 150-200 and image 3 to something between 60-100), you will need to recreate all resized images for images already uploaded. Highlight all of your images then click on "Create Resized Images."

[krawick$]

I have set the Image Layout Defaults to 315 Max x 306 Max but it kinda does its own thing when I upload a photo. Do you mean to set the border pixals? This is the only place I can see to set pixals?

Thanks
Heather

[Jim]

What do you mean by "it kinda does its own thing when I upload a photo"?

It should make the image fit within those dimensions. But if you have some really tall or really wide in relation to the other dimension it will shrink it to all fit in the size you specified so they may not look like you expect. Some times it is better to just set one of the dimension, i.e. just set the height parameter and leave the width blank. That way the images will all come out the same height and the layout will look more consistent.

The border parameter is for the thickness of the line that goes around the image, it won't have an affect on the size of the image.

[krawick$]

Some of my images are tall or wide so when I set the parameters I specified before for height and width the images upon upload came in different than those specified. For example a tall one came it at a width of 167 and height of 306 when I specified 315 to 306? Another came in at 315 width to 244 height. So it kind of does what it wants....LOL

[Jim]

It is doing exactly what you asked it to do, fit the image into a box that is x high and y wide. If you specify both the width and height then it will make the image fit into those dimensions. A tall image will have to be reduced in height to fit in the box so the width must of necessity be made narrower or the image will look distorted. The same for a wide image, it will be reduced so the width of the image fits in your defined width but the height will have to be reduced to correspond or the image will look distorted.

The only way to have images be resized so they look the way you want them is to have them all be the same dimensions when you upload them. This would mean exporting them from some image editing application like photoshop and have them all cropped to the exact same size.