X-Cart forums - HOw to change display thumbnail to this...

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

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - HOw to change display thumbnail to this... (https://forum.x-cart.com/showthread.php?t=13917)

HOw to change display thumbnail to this...

Hi,

I am not very content with the look of the current thumbnails, it is kinda confusing.

Can someone help me out on how to change the display template to this please? http://www.justforbubs.com.au/

Thanks for the help!

Well fer starters you're going to be editing skin1/customer/main/products.tpl or products_t.tpl files.

In there you will see the call to the thumbnails, it's an include statement. You can either manually set the "x" and "y" - width and height - in that include statement or stick with configuring the width in xcart and having it do it proportionally.

It looks to me as if the site you like is using a 120 width thumbnail configured the regular way through the x-cart backend.

As far as the layout, it is upto you to edit the html code appropriately to make the thumbnail show up next to the description, moving the price and "see details" verbiage below that.

Something like <tr><td><img tag></td><td>description</td></tr> blah blah blah....

Re: fer starters...

Quote:

Originally Posted by instinctual

TKS for the response. Mind giving me more details please? :oops:

Shoot me a url to your existing site so I can take a look at the differences between that and the one you like...

Are you famililar with hand-coding html?

Quote:

Originally Posted by instinctual

Shoot me a url to your existing site so I can take a look at the differences between that and the one you like...

Are you famililar with hand-coding html?

http://www.petadorn.com

Any help would be great, thanks! :wink:

Hi, I designed www.justforbubs.com.au so tell me what you are after and I can send you the tpl code, if that helps.

Quote:

Originally Posted by sallyoz

Hi, I designed www.justforbubs.com.au so tell me what you are after and I can send you the tpl code, if that helps.

Hi sallyoz,

I like the display thumbnails that you have...very clean and clear for visiters to view.
My current thumbnail displays are very messy, very confusing, plus it doesn't have the simple text to describe what the products are. It would be very, very nice if you can show me how to change my current thumbnail display similar to yours (with box on each product, except, I want two products per role instead of 3 roles that you currently have).

[-o< Thank you in advance. :D

Code:

{* $Id: products_t.tpl,v 1.10.2.7 2004/12/23 09:11:59 max Exp $ *}

<TABLE border="0" width="100%" cellpadding="0" cellspacing="0"><TR><TD class="TableThumbnailBorder">



<TABLE border="0" width="100%" cellpadding="5" cellspacing="1">



{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}



{section name=product loop=$products}

{assign var="discount" value=0}



{if %product.index% is div by $config.Appearance.products_per_row}

<TR>

{assign var="cell_counter" value=0}

{/if}



{math equation="x+1" x=$cell_counter assign="cell_counter" }



<TD align="center" valign="top" width="{$width}%" class="DialogBox">



<table background="images/top.gif" border="0" cellpadding="0" cellspacing="0" height="5" width="100%">

      <tbody><tr>

        <td align="left" valign="top">[img]images/ctl.gif[/img]</td>

        <td align="right">[img]images/ctr.gif[/img]</td>

      </tr>

    </tbody></table>

   <table class="menutable" align="center" border="0" cellpadding="2" cellspacing="2" width="100%" height="225px">

              <tbody><tr>

                <td align="center" valign="top">{$products[product].product}{*




{$lng.lbl_sku}: {$products[product].productcode}*}




{if $active_modules.Special_Offers ne "" and $products[product].have_offers}

{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}

{else}

<TABLE cellpadding="3" cellspacing="0" border="0"><TR><TD height="100">

{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$config.Appearance.thumbnail_width product=$products[product].product tmbn_url=$products[product].tmbn_url}</td><td>{$products[product].descr|truncate:180:"...":true}



</TD></TR>

</TABLE>

{/if}

{$lng.lbl_see_details}






{if $active_modules.Subscriptions ne "" and $products[product].catalogprice}

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

{else}

{if $products[product].taxed_price ne 0}

{if $products[product].list_price gt 0 and $products[product].taxed_price lt $products[product].list_price}

{math equation="100-(price/lprice)*100" price=$products[product].taxed_price lprice=$products[product].list_price format="%d" assign=discount}

{if $discount gt 0}

<FONT class="MarketPrice">{$lng.lbl_market_price}: <S>

{include file="currency.tpl" value=$products[product].list_price}

</S></FONT>




{/if}

{/if}

<FONT class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</FONT>

<FONT class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</FONT>{if $discount gt 0}, {$lng.lbl_save_price} {$discount}%{/if}

{if $products[product].taxes}

{include file="customer/main/taxed_price.tpl" taxes=$products[product].taxes}{/if}

{else}

<FONT class="ProductPrice">{$lng.lbl_enter_your_price}</FONT>

{/if}

{/if}

</td>

              </tr>

            </tbody></table>

      <table background="images/bottom.gif" border="0" cellpadding="0" cellspacing="0" height="5" width="100%">

        <tbody><tr>

          <td align="left" valign="top">[img]images/cbl.gif[/img]</td>

          <td align="right">[img]images/cbr.gif[/img]</td>

        </tr>

      </tbody></table>

























{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0}






{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}

{/if}

{*** Uncomment it if you need 'Buy Now' button ***

{if $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}

{include file="customer/main/buy_now.tpl" product=$products[product]}

{/if}

*** Uncomment it if you need 'Buy Now' button ***}

</TD>



{capture name=prod_index}

{math equation="index+x+1" index=%product.index% x=$config.Appearance.products_per_row}

{/capture}

{if $smarty.capture.prod_index is div by $config.Appearance.products_per_row }

</TR>

{/if}



{/section}



{if $cell_counter lt $config.Appearance.products_per_row}

{section name=rest_cells loop=$config.Appearance.products_per_row start=$cell_counter}

<TD class="DialogBox"></TD>

{/section}

</TR>

{/if}



</TABLE>

</TD></TR></TABLE>

{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y'}

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




{/if}

/customer/main/products_t.tpl page

To have two columns instead of three you just go to
admin -> General Settings -> Appearance Options

Display products list in multiple columns (1-3) (leave empty to use standard format): 2

Let me know if you need ANYTHING else.

cheers

Quote:

Originally Posted by sallyoz

[code]{* $Id: products_t.tpl,v 1.10.2.7 2004/12/23 09:11:59 max Exp $ *}

Let me know if you need ANYTHING else.

cheers

Thank you sooo much, I have made some changes. Sorry to bother you again, is there anyway I can have the same product border just like yours. The one I have now is square...

:D [-o<

Just do a save as when you're in Internet Explorer on the correct page and save the whole page to your computer. It downloads the images for you.

Is that what you were after?

Quote:

Originally Posted by sallyoz

Just do a save as when you're in Internet Explorer on the correct page and save the whole page to your computer. It downloads the images for you.

Is that what you were after?

Thanks for the hlep again, I've tried to use the code you game me, but the border didn't come up the same as yours. Not sure why... :?