Cross Sell Help

[ascrapoftime]

I recently was able to get the cross sell function working on my More Info page, but there is a large gap inbetween the first product and the second product that I can not get rid of. For example: http://scrap-of.ipower.com/store/product235.html

Here is the code I am using:
[-- IF Product.MoreInformationProductCrossSell --]
[-- IF PRODUCT.CrossSell "0" --]
[-- ELSE --]
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" width="700"><span class="style19">[-- STORE.CartCrossSellHeader --]</span></td>
</tr>
<tr><td width="300" valign="top"><div align="center">

[-- LOOP Product_Cross_Sell 4 --]
<td class="gcs_table_content">[-- PRODUCT_CROSS_SELL --]</td>
[-- END_LOOP Product_Cross_Sell --]
</div>
</td>
</tr>
</table>
[-- END_IF --]<br>
[-- END_IF --]

Appreciate any help.

[Jim]

Looking at the html source of the page I see that there are multiple html issues, for example there are 4 instances of
</body></html> which appear to be associated with your cross-sell items. There is a <tr> that is inside of a <td> right where the problem is occurring, which might be the source of the problem.

Note that when you use any [-- LOOP xyz <number> --] tag ShopSite will automatically add the initial <tr> tag before the first item and the closing </tr> after the <number> of products have been output on the row. This may be where the extra <tr> tag is coming from.

Another thing I noticed, the add_to_cart buttons associated with the cross-sell items is using white text and the page background is white so the add_to_cart button isn't visible.

Once you get the extra <tr> issue resolved you might be able to modify the style associated with the cross sell table to set the <td> tags to have a width of 25% so that each will just take 1/4 of the available space.

FYI: I use Firefox for my browser and when I view the source of the html page any html issues are highlighted in red so they are really easy to spot. This is a good debugging tool for issues like this.

[ascrapoftime]

Hi Jim,

Thank you for the information!

I see the extra <tr> tag, as well as the extra </body> </html> tags you are talking about when I look at the page source. What I am stuck on is where these are coming from. I have searched my product template, as well as my Cross Sell Include, and I cannot find any extra tags that can be removed. Would it help if you could see the entire Product Template code? Also, I know the add to cart graphic for the products is selected in the product info form, but where is the cross sell add to cart graphic located? Thank you again for your help!

Product URL: http://scrap-of.ipower.com/store/product235.html

Here is the cross sell coding I am using on the Product template:

[-- IF Product.MoreInformationProductCrossSell --]
[-- IF PRODUCT.CrossSell "0" --]
[-- ELSE --]
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<td align="center" width="700"><span class="style19">[-- STORE.CartCrossSellHeader --]</span></td>
<td width="25%" valign="top" align="center"><div align="center">

[-- LOOP Product_Cross_Sell 4 --]
<td class="gcs_table_content" align="center">[-- PRODUCT_CROSS_SELL --]</td>
[-- END_LOOP Product_Cross_Sell --]
</div>
</td>
</table>
[-- END_IF --]<br>
[-- END_IF --]


This is the coding for the Cross Sell Include:

[-- IF PRODUCT.UseMultiMenus checked --]
[-- 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 PRODUCT.DisplayGraphic --][-- IF PRODUCT.Graphic --][-- IF CROSS_SELL_LINK --]<a href="[-- CROSS_SELL_LINK --]">[-- END_IF --][-- PRODUCT.Graphic --][-- IF CROSS_SELL_LINK --]</a>[-- END_IF --][-- END_IF --][-- END_IF --]
<br>
<strong>[-- IF PRODUCT.VariableName? --][-- IF CROSS_SELL_LINK --]<a href="[-- CROSS_SELL_LINK --]" class="prod_name_vr_[-- PRODUCT.NameStyle --]_[-- PRODUCT.NameSize --]">[-- STORE.ProductName --]</a>[-- ELSE --]<span class="prod_name_vr_[-- PRODUCT.NameStyle --]_[-- PRODUCT.NameSize --]">[-- STORE.ProductName --]</span>[-- END_IF --] <input name="[--PRODUCT.RecordNumber--]:name" size="20" maxlength="100" value="" type="text">
[-- ELSE_IF PRODUCT.DisplayName --][-- IF CROSS_SELL_LINK --]<a href="[-- CROSS_SELL_LINK --]" class="prod_name_[-- PRODUCT.NameStyle --]_[-- PRODUCT.NameSize --]">[-- PRODUCT.Name --]</a>[-- ELSE --]<span class="prod_name_[-- PRODUCT.NameStyle --]_[-- PRODUCT.NameSize --]">[-- PRODUCT.Name --]</span>[-- END_IF --][-- END_IF --]</strong>
<br>
<font color="#ff0033"><strong>[-- IF PRODUCT.QuantityPricing --]
[-- ELSE_IF PRODUCT.VariablePrice? --]
<span class="crosssell_price_[-- PRODUCT.PriceStyle --]_[-- PRODUCT.PriceSize --]">[-- STORE.Price --] [-- STORE.CurrencySymbol --]<input name="[--PRODUCT.RecordNumber--]:price" size="4" maxlength="10" value="" type="text"></span>
[-- ELSE_IF PRODUCT.DisplayPrice --]
<span class="crosssell_price_[-- PRODUCT.PriceStyle --]_[-- PRODUCT.PriceSize --]">[-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.AltPrice --] [-- PRODUCT.AltSaleAmount --][-- END_IF --][-- IF PRODUCT.SaleOn --]<strike>[-- PRODUCT.Price --][-- IF PRODUCT.AltPrice --][-- PRODUCT.AltPrice --][-- END_IF --]</strike>[-- PRODUCT.SaleAmount --][-- IF PRODUCT.AltPrice --] [-- 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 --]</span>
[-- END_IF --]</strong></font>
<br>
<input type=hidden name=itemnum value=[-- PRODUCT.RecordNumber --]>
<div class="crosssell_add">
[-- IF PRODUCT.UseMultiMenus checked --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF MOREINFOIMAGE? --]
<br><a href="[-- PRODUCT.MoreInfoURL --]"><img [-- MOREINFOIMAGE --] border="0" class="btn"></a>
[-- ELSE --]
<br><a href="[-- PRODUCT.MoreInfoURL --]" class="btn nobr">[-- MOREINFOTEXT --]</a>
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
[-- IF VAR.AddButtonGraphic --]
<input type="image" class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart" onClick="return(checkChecker('form[-- PRODUCT.RecordNumber --]'));">
[-- ELSE_IF ADDIMAGE? --]
<input type="image" [--ADDIMAGE--] onClick="return(checkChecker('form[-- PRODUCT.RecordNumber --]'));">
[-- ELSE --]
<input class="add" type="submit" value="[-- ADDTEXT --]" onClick="return(checkChecker('form[-- PRODUCT.RecordNumber --]'));">
[-- END_IF --]</div>
[-- ELSE_IF CROSS_SELL_LINK --]
<div class="crosssell_add">
[-- IF MOREINFOIMAGE? --]
<a href="[-- CROSS_SELL_LINK --]">[-- MOREINFOIMAGE --]</a>
[-- ELSE --]
<a href="[-- CROSS_SELL_LINK --]" class="btn">[-- MOREINFOTEXT --]</a>
[-- END_IF --]
</div>
[-- END_IF --]
<div class="clear"></div>
[-- IF PRODUCT.UseMultiMenus checked --]
[-- ELSE --]
</form>
[-- END_IF --]

[Jim]

This section of code has problems.

Code: Select all

<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<td align="center" width="700"><span class="style19">[-- STORE.CartCrossSellHeader --]</span></td>
<td width="25%" valign="top" align="center"><div align="center">

[-- LOOP Product_Cross_Sell 4 --]
<td class="gcs_table_content" align="center">[-- PRODUCT_CROSS_SELL --]</td>
[-- END_LOOP Product_Cross_Sell --]
</div>
</td>

In the first line you open a table and then in the second line put a <td> without having a <tr> before it.

The [-- LOOP Product_Cross_Sell 4 --] will automatically add a <tr> before it does the first loop but that will not be in a table because you haven't created a new table before the loop inside of the <td> that you are opening.

The </body></html> come after the closing form tag and before the next loop starts so I would look in both templates and see if there is anyplace at the start or end of the template or above a define after the end_define or in any include files that contains the </body></html> .

[ascrapoftime]

Thank you for your help, got the alignment fixed! I am still having issues with the cross sell Add to Cart button. I know on the Add to Cart image for a product is selected on the Product Info page. Where do I select the Add to Cart image for the Cross Sell products?

[Jim]

It should use the same add to cart as the normal product would. I would be possible to hard code a different button in the cross-sell template (I think that is in the shopping cart template for Global and Cart cross sell and in the product template for Product cross-sell) but I don't think that is usually done.