X-Cart forums - Improved Related Products for 4.3.2

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Improved Related Products for 4.3.2 (https://forum.x-cart.com/showthread.php?t=54649)

Improved Related Products for 4.3.2

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.

Re: Improved Related Products for 4.3.2

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.

Re: Improved Related Products for 4.3.2

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.

Re: Improved Related Products for 4.3.2

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 ""}

Re: Improved Related Products for 4.3.2

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

Re: Improved Related Products for 4.3.2

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

Re: Improved Related Products for 4.3.2

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

Works now - thanks!

Re: Improved Related Products for 4.3.2

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.

Re: Improved Related Products for 4.3.2

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

Re: Improved Related Products for 4.3.2

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.

Re: Improved Related Products for 4.3.2

This are 2 different modules. Upselling products is what you define for every product as an upsell products, recommended products are random.

Re: Improved Related Products for 4.3.2

I'm glad it works fine for you Vacman - I think Qualiteam should make it look like this as standard.

Re: Improved Related Products for 4.3.2

Yep - Thanks for the help as well.

Re: Improved Related Products for 4.3.2

Thanks! This works great for me. :D

Re: Improved Related Products for 4.3.2

I've updated the code a little - I've edited the first post so the new code is in there. I've added two more <a href> elements, to go around the product title and price. Before I did this, there were problems with Internet Explorer underlining them both, and I couldn't target them properly using CSS (as the image, product title and price were all contained within one <a> element.)

Just copy and paste it over your current related_products.tpl, everything else should be the same.

Re: Improved Related Products for 4.3.2

Great. Maybe flip these two lines around so the open/close tags line up nicer:

PHP Code:


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

Re: Improved Related Products for 4.3.2

Thanks for that Torres, I've fixed it now.

Re: Improved Related Products for 4.3.2

Hi Sisom,

Nice mod. Unrelated to this, on your product thumbnails, you have "See Details" link added. How did you do this?

Re: Improved Related Products for 4.3.2

I think the 'See Details' link was already there, in 4.3.2?

This is my code for
/customer/main/products_list.tpl

Code:

{*

$Id: products_list.tpl,v 1.18 2009/07/23 11:12:33 igoryan Exp $

vim: set ts=2 sw=2 sts=2 et:

*}

<div class="products products-list">

  {foreach from=$products item=product name=products}

<script type="text/javascript">

<!--

products_data[{$product.productid}] = {ldelim}{rdelim};

-->

</script>

    {if $active_modules.Product_Configurator and $is_pconf and $current_product}

      {assign var="url" value="product.php?productid=`$product.productid`&amp;pconf=`$current_product.productid`&amp;slot=`$slot`"}

    {else}

      {assign var="url" value="product.php?productid=`$product.productid`&amp;cat=`$cat`&amp;page=`$navigation_page`"}

      {if $featured eq 'Y'}

        {assign var="url" value=$url|cat:"&amp;featured=Y"}

      {/if}

    {/if}

    <div{interline name=products additional_class=item}>

      <div class="image"{if $config.Appearance.thumbnail_width gt 0 || $product.tmbn_x gt 0} style="width: {$max_images_width|default:$config.Appearance.thumbnail_width|default:$product.tmbn_x}px;"{/if}>

        <a href="{$url}">{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.tmbn_x image_y=$product.tmbn_y product=$product.product tmbn_url=$product.tmbn_url}</a>

        {if $active_modules.Special_Offers}

          {include file="modules/Special_Offers/customer/product_offer_thumb.tpl"}

        {/if}

        <a href="{$url}" class="see-details">{$lng.lbl_see_details}</a>

        {if $active_modules.Feature_Comparison}

          {include file="modules/Feature_Comparison/compare_checkbox.tpl"}

        {/if}

      </div>

      <div class="details"{if $config.Appearance.thumbnail_width gt 0 || $product.tmbn_x gt 0} style="margin-left: {$max_images_width|default:$config.Appearance.thumbnail_width|default:$product.tmbn_x}px;"{/if}>

        <a href="{$url}" class="product-title">{$product.product|escape}</a>

        {* MOVING SKU NUMBER LOWER DOWN *}

{*        {if $config.Appearance.display_productcode_in_list eq "Y" && $product.productcode ne ""}

          <div class="sku">{$lng.lbl_sku}: <span class="sku-value">{$product.productcode|escape}</span></div>

        {/if} *}

        <div class="descr">{$product.descr}</div>

        {if $product.rating_data}

          {include file="modules/Customer_Reviews/vote_bar.tpl" rating=$product.rating_data productid=$product.productid}

        {/if}

                {if $config.Appearance.display_productcode_in_list eq "Y" && $product.productcode ne ""}

          <div class="sku">{$lng.lbl_product_code}: <span class="sku-value">{$product.productcode|escape}</span></div>

        {/if}

        

        <hr />

        </div> <!-- END OF DETAILS -->

        

        <div class="details2">

        

        {if $product.product_type eq "C"}

          {include file="customer/buttons/details.tpl" href=$url}

        {else}

          {if $active_modules.Subscriptions ne "" && ($product.catalogprice gt 0 || $product.sub_priceplan gt 0)}

            {include file="modules/Subscriptions/subscription_info_inlist.tpl"}

          {else}

            {if !$product.appearance.is_auction}

              {if $product.appearance.has_price}

                <div class="price-row{if $active_modules.Special_Offers ne "" && $product.use_special_price ne ""} special-price-row{/if}">

                  <span class="price">{$lng.lbl_our_price}:</span> <span class="price-value">{include file="currency.tpl" value=$product.taxed_price}</span>

          {* COMMENTING OUT PRE-VAT PRICE - START *}

         {* <span class="market-price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</span> *}

            {* COMMENTING OUT PRE-VAT PRICE - END *}          

          </div>

                {if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0}

                  <div class="market-price">

                 <p>   {$lng.lbl_market_price}: <span class="market-price-value">{include file="currency.tpl" value=$product.list_price}</span>

                    {if $product.appearance.market_price_discount gt 0}

                      {if $config.General.alter_currency_symbol ne ""}, {/if}

                      <span class="price-save">{$lng.lbl_save_price} {$product.appearance.market_price_discount}%</span>

                    {/if}

</p>

                  </div>

                {/if}

                {if $product.taxes}

                  <div class="taxes">

                    {include file="customer/main/taxed_price.tpl" taxes=$product.taxes is_subtax=true}

                  </div>

                {/if}

              {/if}

              {if $active_modules.Special_Offers ne "" && $product.use_special_price ne ""}

                {include file="modules/Special_Offers/customer/product_special_price.tpl"}

              {/if}

            {else}

              <span class="price">{$lng.lbl_enter_your_price}</span><br />

              {$lng.lbl_enter_your_price_note}

            {/if}

          {/if}

          {if $active_modules.Product_Configurator and $is_pconf and $current_product}

            {include file="modules/Product_Configurator/pconf_add_form.tpl"}

          {elseif $product.appearance.buy_now_enabled and $product.product_type ne "C"}

            {include file="customer/main/buy_now.tpl"}

          {/if}

        {/if}

      </div>

      <div class="clearing"></div>

    </div>

  {/foreach}

</div>

I think if you insert it in the same place in your template, it will work. It's odd that you don't have it, because it was there in 4.1.0!