3 column layout with thumbnail for Related Products
 

I just installed the mod from mlfnet that displays the Recommended Products in 3 columns with a product icon, and I thought it would be nice to have the Related Products do the same thing. Tested in version 3.5.13, but should work for previous 3.5.x versions as well. Replace your /modules/Upselling_Products/related_products.tpl with this:

Awesome mod! This seems to work with 4.0.8 as well.

Thanks, I would add in


just before the last {/if} in case there is no upselling products, otherwise it's blank.

Oops...my bad. Nice catch Philj, thanks! :)

Thanks for this mod. Works in 4.0.11 :D

Very small change needed to make sure that if you have the 'open in new window' option selected in modules admin the thumbnail as well as the link opens in a new window.

Thanks balinor! This mod is great and I put in below the product details and removed the dialog. Looks (and works) great.

PhilJ- not sure why you need an else statement there ... related products are manually added and there already is an if statement in the product.tpl for the module (if active). If there aren't related products then there is no header.

Thanks,

- Mike

Works great in v3.4.6

Thanks Balinor

this is great!

Is there a way to include a part of the product detail?
--

got it - simple modification of the related_products.php

replace the sql code with this

and in your related_products.tpl you just need to add this wherever you want:


hope that helps!

-edit-
and if the description is too long..then add this:



and then add a 'read more here' link to the end of the dots...


you can see the example here:
http://www.yoyonation.com/product.php?productid=63&cat=0&page=1 - it's still in testing and we haven't loaded in our yoyo products yet...

if anyone can help me out with the comment thing below..
would like to add an edit/delete option in the admins..having trouble programming that - but if i get it, will definitely add it into the mod page.!

no luck using with a two column

Can anyone tell me what needs to be added to include the price and an add to cart, if it will fit...

If not just the price...


Thanks!

Buy Now added to related products listing
 

Noticed this thread and wondered if anyone had used the Buy Now button in the related_product.tpl

Sort of an interesting idea to list multiple related products as options for upsell ie - unit or box or case.

Cheers, Oak.

Can your 3 column mod show

1. the thumb
2. title of product below the thumb
3. price

as is, i think it only shows the thumb.

show me pls

1 and 2 should be links ot the product page.

thanks

Adding Thumbnail to Related Products v4.1
 

Hi,

Does anyone know how I could add just a thumbnail to the related product in the product description page? I have the random choice disabled, so I guess it would be the product upsell instead? I found the older version, for x-cart 3.0 but nothing for the newest version (4.1). I would not mind buying a module, if I knew where to find it, but a code snipet is much appreciated! (A mod suggestion is great too).

Thanks in advance,

Vera

Re: 3 column layout with thumbnail for Related Products
 

To add another question to this thread, does anyone know how I would go about having the recommended products list show only other products within the same category as the main product page that they appear on? For instance, If a customer is looking at a horror book, the recommended products list would only list other horror books. This is for the 4.1.x branch.

Re: 3 column layout with thumbnail for Related Products
 

No problem :)

Re: 3 column layout with thumbnail for Related Products
 

Thanks for this mod. Have any of you been able to integrate this with the DSEFU mod?

Re: 3 column layout with thumbnail for Related Products
 

I use it with DSEFU all the time :) Don't want to post John's code, so drop him a line and he'll hook you up.

Re: 3 column layout with thumbnail for Related Products
 

This mod is great for the Product Details page. Thanks! I'm trying to figure out how to add comparable information for an item in the 'shopping cart'.

Eg. Product A is in the shopping cart, and I'd like the related products B and C to appear - 'people who have purchased product A have also purchased product B or C'. I saw the post, "Add multiple products to cart" but that isn't what I'm trying to do.

Any ideas?

Re: 3 column layout with thumbnail for Related Products
 

Forget my post above. I think I figured out what I was missing. I need to have 'recommended products' module checked. Trying that now.. Sorry

Re: 3 column layout with thumbnail for Related Products
 

Upselling is actually what you want...Recommended is random

Re: 3 column layout with thumbnail for Related Products
 

Ok.. then how do I get the 'upselling' related products to appear in the Shopping cart, when customer orders 'Product A', and I want them to consider buying Product B or C? I have the upselling links option module enabled and, I see the related items in the 'product description', but they are at the bottom (after email to a friend, and larger image.... so, may never get seen.). Is there a way to have these also appear in the shopping cart during checkout? Thanks

Re: 3 column layout with thumbnail for Related Products
 

Ah sorry, doesn't work in the cart by default, no :(

Re: 3 column layout with thumbnail for Related Products
 

You want/need/must buy WebsiteCM's ez-Upsell.

There are very few mods that I consider a must-have, and this is one of them...

If you are using 4.1, it even parses your variant thumbnail images...

If upselling your customer is important to you, this will be the best $40 you ever spend.

PS -- of course, you can customize the look of ez-Upsell as displayed... if you want to see mine in action, PM me... i'll give you a URL.

Best,

Jeremy

Re: 3 column layout with thumbnail for Related Products
 

Anyone know how to add an "add to cart" and show price with this mod? It's pretty cool so far.

Re: 3 column layout with thumbnail for Related Products
 

ok, so i used balinor's code from the beginning of this post, and it works great in firefox, but in IE, my thumbnail images arent coming up for the related products. it seems to be creating the following:
img src=image.php.....

while my product thumbnail code is
img src=http://www.audiolines.com/image.php

why is my url not coming up for the related products?

Re: 3 column layout with thumbnail for Related Products
 

For anyone who wants this to work for 4.0.18, here's the code to use:


It is set for 3 columns, but you can change that by changing the number 3 to whatever you want, and also change the percentage for the width of the table cell (currently set to 33%).

Re: 3 column layout with thumbnail for Related Products
 

Balinor,

Great mod, makes the site look so much more professional.

Is there away to have "Our price" and "Add to cart" with each related product, this would complete this mod.

Re: 3 column layout with thumbnail for Related Products
 

Balinor,

Is the Add to Cart button too hard to incorporate in this mod?

Re: 3 column layout with thumbnail for Related Products
 

To add the price (including VAT) I used this to replace /modules/Upselling_Products/related_products.tpl:

{if $product_links ne ""}
{capture name=dialog}
{assign var="tmp" value="0"}

{section name=cat_num loop=$product_links}
{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if}
{/section}
{section name=cat_num loop=$product_links}
{ if %cat_num.first% }
<table border="0" cellspacing="0" width="100%">
{/if}

{if $smarty.section.cat_num.index is div by 3}
</tr><tr>
<tr>
<td><img src="{$ImagesDir}/spacer.gif" width="400" height="10"></td>
</tr>
<tr valign="top">
{/if}

<td width="33%" align="center">
<a style="text-decoration: none;" href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_x=$config.Appearance.thumbnail_width product=$product_links[cat_num].product tmbn_url=$product_links[cat_num].tmbn_url}</a>
<br>

<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
<b>{ $product_links[cat_num].product}</b>
</a>
<br>

<font class="ProductPrice">{include file="currency.tpl" value=$product_links[cat_num].taxed_price}</font>
{if $product.taxes}<font class="ProductPriceVat">
{include file="customer/main/taxed_price.tpl"
taxes=$product.taxes}</font>
{/if}


</td>
{ if %cat_num.last% }
</tr></table>
{/if}
{/section}
{/capture}
{include file="dialog.tpl" title="Recommended products" content=$smarty.capture.dialog extra="width=100%"}
{/if}



I had to add:
<a style="text-decoration: none;"
to the <A HREF> tag for the image, because the original code enclosed both the image and the product name in the same tag, and with my CSS A:hover is set to 'text-decoration: underline;', so the image showed an underline whenever you moused over it, which looked odd.

My CSS for the selectors I used above is:

.ProductPrice {
COLOR: #bc0000;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.ProductPriceVat {
COLOR: #bc0000;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}

Re: 3 column layout with thumbnail for Related Products
 

ps I'd love to know how to add the "Add to cart" button to this to make it work. I've had a brief go but I can't get it work by substituting in "$product_links[cat_num].product" in:
{include file="buttons/buy_now.tpl" style="button" href="javascript: document.orderform_`$product.productid`_`$product. add_date`.submit();"}
which I took from product_box.tpl.

Re: 3 column layout with thumbnail for Related Products
 

How can I limit the number of items shown? For instance, lets say I want a maximum of 3 items shown, but I have 6 related products, some of which may be out of stock at times and I don't want listed then, but I want them listed instead of other items on the list if they are in stock. Is there a way to only have it "loop" a certain number of times, and how would I go about doing that? Thanks.

Re: 3 column layout with thumbnail for Related Products
 

I know this is kind of late, but I just ran across this thread and figured if this didn't help you, it might help others.

{section} requires a name= and a loop=

There are a few more attributes that can be used though. The one you are looking for is max=

Example:


This will stop the loop at 3 instances returned.

More reading about {section}

Re: 3 column layout with thumbnail for Related Products
 

Thanks! It took a little experimentation but I found it works fine if you put the "{section name=cat_num loop=$product_links max=3}" in the second loop.

Re: 3 column layout with thumbnail for Related Products
 

I used Sisoms code in my related_products.tpl but instead of a price I get a $ symbol under each thumbnail. How do I get a price to show up. I'm using 4.1.8 Thanks

P.S. Anyone get the buy now button?

Re: 3 column layout with thumbnail for Related Products
 

Hi Keystone, I don't know if my code will work in 4.1.8 (I have 4.1.0) but here's what I'm using: some of it won't apply (the divs) because I'm using some CSS to create round cornered boxes for the background, but the rest of the code gives me the product thumbnail, the product title, and the price in pounds.

Here it is, just take what you want!

{* $Id: related_products.tpl,v 1.15 2005/12/07 14:07:32 max Exp $ *}

{if $product_links ne ""}
{capture name=dialog}
{assign var="tmp" value="0"}
{section name=cat_num loop=$product_links}

{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if}

{/section}

{section name=cat_num loop=$product_links}
{ if %cat_num.first% }

<table border="0" cellspacing="0" width="100%">
<tr>
{/if}
{if $smarty.section.cat_num.index is div by 3}
</tr><tr>
{/if}

<td align="center">

<div class="relatedsidebox">
<div class="relatedboxhead"><p>

&nbsp;

</p></div>
<div class="relatedboxbody">

<a style="text-decoration: none;" href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_x=$config.Appearance.thumbnail_width product=$product_links[cat_num].product type="T"}</a>
<br>

<a style="color: #FFFFFF" href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
<b>{ $product_links[cat_num].product}</b>
</a>
<br>

<font class="ProductPriceRelated">{include file="currency.tpl" value=$product_links[cat_num].taxed_price}</font>
{if $product.taxes}<font class="ProductPriceVatRelated">
{include file="customer/main/taxed_price.tpl"
taxes=$product.taxes}</font>
{/if}
</div>
</div>

</td>

{ if %cat_num.last% }
</tr></table>
{/if}
{/section}
{/capture}
{include file="dialog.tpl" title="Related products" content=$smarty.capture.dialog extra="width=100%"}
{/if}


I'm afraid I don't know how to put the Buy Now button in there, but personally I don't think it's necessary, as there is only a thumbnail and title, most customers are going to want to see the full product page before using Buy Now. (Well, I would at least!)

Re: 3 column layout with thumbnail for Related Products
 

Good point on the buy now button. I have your code in there without the div's. I have my currency set to dollars as I am in the U.S. I still am not sure why it isn't pulling the price in and only the currency symbol. Any ideas, I'm pretty new to smarty and php. I can find my way around ok and basically know what things mean but I'm not sure what I can and cannot change yet. Which part of

<font class="ProductPrice">{include file="currency.tpl" value=$product_links[cat_num].taxed_price}</font>
{if $product.taxes}<font class="ProductPriceVat">
{include file="customer/main/taxed_price.tpl"
taxes=$product.taxes}</font>

actually pulls in the price value?

Re: 3 column layout with thumbnail for Related Products
 

I think the part that actually pulls the price is this bit:

{if $product.taxes}<font class="ProductPriceVat">
{include file="customer/main/taxed_price.tpl"
taxes=$product.taxes}</font>


It's the taxed_price.tpl file, which is this little gem of architecture:


{* $Id: taxed_price.tpl,v 1.10 2005/11/17 06:55:38 max Exp $ *}
{if $taxes}
{foreach key=tax_name item=tax from=$taxes}
{if $tax.tax_value gt 0 or $tax.tax_value eq ""}
{if $tax.display_including_tax eq "Y"}
{if $display_info eq ""}{assign var="display_info" value=$tax.display_info}{/if}
{$lng.lbl_including_tax|substitute:"tax":$tax.tax_ display_name}{if $display_info eq "V" or ($display_info eq "A" and $tax.rate_type eq "$")} {if $is_subtax ne 'Y'}<span id="tax_{$tax.taxid}">{/if}<b>{include file="currency.tpl" value=$tax.tax_value}</b>{if $is_subtax ne 'Y'}</span>{/if}{elseif $display_info eq "R"} {if $tax.rate_type eq "$"}{include file="currency.tpl" value=$tax.rate_value}{else}{$tax.rate_value|forma tprice}%{/if}{elseif $display_info eq "A"} {if $tax.rate_type eq "%"}{$tax.rate_value|formatprice}% ({if $is_subtax ne 'Y'}<span id="tax_{$tax.taxid}">{/if}{include file="currency.tpl" value=$tax.tax_value}{if $is_subtax ne 'Y'}</span>{/if}){/if}{/if}
{* <br /> *}
{/if}
{/if}
{/foreach}
{/if}


It's not as bad as it looks though, basically it's lots of {if} tags, which then decide what to display, depending on whether you've selected to display prices including tax, etc.

I would comment out the first part (not in the taxed_price.tpl file, in the related_products.tpl file)

{* <font class="ProductPrice">{include file="currency.tpl" value=$product_links[cat_num].taxed_price}</font> *}

and leave this part (below), and see what you get.


{if $product.taxes}<font class="ProductPriceVat">
{include file="customer/main/taxed_price.tpl"
taxes=$product.taxes}</font>

Then do this:

{if $product.taxes}<font class="ProductPriceVat">TEST TEST TEST
{include file="customer/main/taxed_price.tpl"
taxes=$product.taxes}</font>

to see if the words "TEST TEST TEST" display. If they do, you know that the rest of the code is creating (or trying to create!) the text after the TEST words.

That's how I find out lots of things when editing the appearance of my cart - very often I'm not sure which piece of code is producing what, so I just bung in "TEST TEST TEST" somewhere in the template I'm editing, and see where it turns up.

So basically just feel free to comment out anything you want using {* *}, then you can see what code is doing what, without any risk of mucking the template up. You just delete the {* *} comment tags when you want to bring that piece of code back into action.

Let me know how you get on.

Re: 3 column layout with thumbnail for Related Products
 

I did what you said and the TEST check did not show up at all so I think the {if $product.taxes} statement is the issue. Not sure what to do from here.

Here is the code I have now:

{* $Id: related_products.tpl,v 1.15.2.1 2007/05/02 06:05:39 max Exp $ *}
{if $product_links ne ""}
{capture name=dialog}
{assign var="tmp" value="0"}

{section name=cat_num loop=$product_links}
{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if}
{/section}
{section name=cat_num loop=$product_links}
{ if %cat_num.first% }
<table border="0" cellspacing="0" width="100%">
{/if}

{if $smarty.section.cat_num.index is div by 3}
</tr><tr>
<tr>
<td><img src="{$ImagesDir}/spacer.gif"></td>
</tr>
<tr valign="top">
{/if}

<td width="33%" align="center">
<a style="text-decoration: none;" href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_x=$config.Appearance.thumbnail_width product=$product_links[cat_num].product tmbn_url=$product_links[cat_num].tmbn_url}</a>
<br>

<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
<b>{ $product_links[cat_num].product}</b>
</a>
<br>


{* <font class="ProductPrice">{include file="currency.tpl" value=$product_links[cat_num].taxed_price}</font> *}
{if $product.taxes}
{include file="customer/main/taxed_price.tpl"
taxes=$product.taxes}
{/if}


</td>
{ if %cat_num.last% }
</tr></table>
{/if}
{/section}
{/capture}
{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra='width="100%"'}
{/if}

Re: 3 column layout with thumbnail for Related Products
 

Well, from that we can deduce that the second part isn't producing anything at all on screen, so it must be the first part which produces the dollar sign:

<font class="ProductPrice">{include file="currency.tpl" value=$product_links[cat_num].taxed_price}</font>

The value of the price comes from
$product_links[cat_num].taxed_price
and this is fed into currency.tpl, which produces the dollar sign (presumably).

I'm not too sure how exactly $product_links[cat_num].taxed_price pulls the product price through, but somebody else here is sure to have much more experience than I with this - can anybody else help?