Improved Related Products for 4.3.2

Sisom · #1 07-18-2010, 10:23 AM

I've just done a bit of work updating the Related Products in 4.3.2, which originally showed only the title of the product - not very inspiring!

I changed modules\Upselling_Products\related_products.tpl to the following (just back up your original related_products.tpl and install this instead):

Code:

{*
$Id: related_products.tpl,v 1.25 2009/05/01 13:55:35 vvs Exp $
vim: set ts=2 sw=2 sts=2 et:
*}

{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="5" width="100%">
{/if}

{if $smarty.section.cat_num.index is div by 3}
</tr><tr valign="top">
{/if}

<td width="33%" align="center">
<div class="related">
<a 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> 
<p>
<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{$product_links[cat_num].product}
</a>
</p>
<p>
<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{include file="currencyrelated.tpl" value=$product_links[cat_num].taxed_price}
</p>
</a>
</div> {* END OF RELATED *}
</td>
{ if %cat_num.last% }
</tr></table><br>
{/if}
{/section}
{/capture}
  {include file="customer/dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog additional_class="uproducts"}
{/if}

I created a new class called '.related', which I added to the end of altskin.css:
.related {
margin: 0 0 8px 0;
}
This just makes a bigger margin at the bottom of the picture of the product.

I added paragraph tags around the product title, as it then appears in the standard paragraph style I have set for the product description.

I created a new templated called 'currencyrelated.tpl', which I needed to do, to change the size and colour of the price. I just copied currency.tpl to my hard drive, edited it to use the class ".currencyrelated", and then was able to apply CSS to that class, rather than having to rely on the CSS that applies to 'currency.tpl'. (If anybody knows of another way to do this, I would be very interested - because currency.tpl is a complete template, I couldn't apply any CSS to it, without affecting all other prices on the site (i.e. making them all bigger and red! Which I didn't want.)

This is 'currencyrelated.tpl':

Code:

{*
$Id: currencyrelated.tpl,v 1.22 2010/07/18 15:52:55 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{strip}

{if $plain_text_message eq ""}
<span class="currencyrelated">
{/if}

{if $display_sign}

{if $value gte 0}
+
{else}
-
{/if}

{/if}

{assign var="cf_value" value=$value|abs_value|formatprice}

{if $tag_id ne "" && $plain_text_message eq ""}
{assign var="cf_value" value="<span id=\"`$tag_id`\">`$cf_value`</span>"}
{/if}

{$config.General.currency_format|replace:"x":$cf_value|replace:"$":$config.General.currency_symbol}

{if $plain_text_message eq ""}
</span>
{/if}

{/strip}

The only difference is the span at the top, which now uses the style .currencyrelated.

I also added some styles to reduce the size of the gap at the bottom of the Related Products section - in altskin.css I added:

.uproducts {
margin-bottom: 0;
}
.uproducts .content {
padding-bottom: 0;
}
.uproducts img {
border: 1px solid black;
}

(I gave .uproducts a bottom margin of zero to negate the 30px bottom margin which .dialog has, the HTML is
<div class="dialog uproducts">
As .uproducts comes second, it overrides .dialog. But .dialog is used for other parts of the product page, such as Recommended Products, etc. so I didn't want to remove the bottom margin on .dialog, as it looks okay (for me) on those other parts.

I also added the .currencyrelated class to the end of altskin.css, as follows:
.currencyrelated {
font: bold 1.5em Arial, Helvetica, sans-serif;
color: #b00;
}

You can view the results here:
http://www.mrdtrading.co.uk/store/home.php?shopkey=martin

I'm surprised it wasn't done this way as standard - I think that having a photo and price of the product makes customers much more likely to click on them, rather than just having text.

Vacman · #2 07-18-2010, 02:23 PM

Looks promising... Am running 4.3.2 as well, but my \Upselling_Products\related_products.tpl looks different:

Code:

{*
$Id: related_products.tpl,v 1.25 2009/05/01 13:55:35 vvs Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{if $product_links ne "" && $printable ne "Y"}

  {capture name=dialog}

    <ul class="uproducts">

      {foreach from=$product_links item=p name=related}
        <li{interline name=related}><a href="product.php?productid={$p.productid}"{if $config.Upselling_Products.upselling_new_window eq 'Y'} target="_blank"{/if}>{$p.product|amp}</a></li>
      {/foreach}

    </ul>

  {/capture}
  {include file="customer/dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog additional_class="uproducts"}

{/if}

Not sure where your mod what plug in.

Sisom · #3 07-20-2010, 08:54 AM

Hi Vacman, I would recommend making a backup of your related_products.tpl, and installing mine instead - I forgot that I had included a lot of code from a much older site I did three years ago, I'll amend my original post to say that the whole thing should be used to replace related_products.tpl.

Vacman · #4 07-20-2010, 10:31 AM

Did that...

Parse error: syntax error, unexpected T_VARIABLE, expecting '(' in /home/vacsew/public_html/modules/Upselling_Products/related_products.php on line 40

Line 40:

Code:

{if $product_links ne ""}

hooter · #5 07-20-2010, 10:51 AM

Quote:

Originally Posted by Vacman

Did that...

Parse error: syntax error, unexpected T_VARIABLE, expecting '(' in /home/vacsew/public_html/modules/Upselling_Products/related_products.php on line 40

Line 40:

Code:

{if $product_links ne ""}

It is the tpl file you should be replacing, not related_products.php
/skin1/modules/Upselling_Products/related_products.tpl is the file to use

cflsystems · #6 07-20-2010, 10:53 AM

Code goes to related_products.TPL not related_products.PHP - skin1/modules/Upselling_Products

Vacman · #7 07-20-2010, 11:08 AM

Wow.... I am such a noob! I must be getting to screw that one up... lol.

Works now - thanks!

Vacman · #8 07-20-2010, 11:14 AM

Check this out:
http://www.vacsew.com/eureka-dcf-9-filter-74481-genuine-filter-dcf9.html

Notice that there are two Related Products boxes. Obviously I only need the one with the image.

cflsystems · #9 07-20-2010, 01:08 PM

You probably have it listed twice in skin1/customer/main/product.tpl

Vacman · #10 07-20-2010, 01:18 PM

Well - I found it, but not where I thought....

Code:

{if $active_modules.Upselling_Products}
{*  {include file="modules/Upselling_Products/related_products.tpl" } *}
{/if}

{if $active_modules.Recommended_Products}
  {include file="modules/Recommended_Products/recommends.tpl" }
{/if}

By commenting out the Related Products inclusion file... that fixed it.