X-Cart forums

[bluesunomi]

Hi,

Here's a really simple but rather effective mod for guiding customers to your much prized detailed images if they're always hiding out of sight at the bottom of your detailed product descritpion pages.

I came up with a slight issue where detailed product descriptions exactly filled the page and some users testing the site were not scrolling down to see the detailed images that were out of site at the bottom of the page! I thought this was a bit dorky to begin with, but it kind of made sense after talking to people new to the internet and shopping baskets etc.

I could have put in a screen pop, but the simplest things are usually the best so I used anchor(jump) tags to linking the thumbnail and a 'detailed image' link to the actual detailed images at the bottom of the page.

While I was in the product.tpl, I also added a much needed (from feedback) 'Back' link to return customers to where they were browsing to save them from hitting back on the browser (note this does require javascript enabled browsers).

Of course you can add fancy buttons as links for this too as I've just used text links and a link from the thumbnail.

As with all mods, backup any files you change - this mod doesn't have any impact on the database but you should always back this up too should anything go wrong.

You may want to play with the layout to make it look better, especially if you have made any detailed product description layout changes already.

Please note, I have only implemented this on 3.5.4 but you could very easily adapt it to earlier versions.

This mod affects the following 2 files:

skin1/customer/main/product.tpl
skin1/modules/detailed_product_images/product_images.tpl

--------------------
First, in skin1/customer/main/product.tpl within the first <TD> (which is where the product thumbnail is displayed) you will see this:

<td valign=top align=left rowspan=2 width=100>
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url}
</td>

Change the contents of this <TD> cell to read as follows :

<td valign=top align=left rowspan=2 width=100>
<A href="#productdetail">
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url}
</A>



{if $images ne ""}
Detailed Image >>
{/if}


<back
</td>

This creates a thumbnail link and a url text link directly underneath the thumbnail to point to the detailed images section on the same page.
(the text link will only appear if a detailed image exists for the product which is why you need the if $images part)

Also, Underneath this, I've added the Back page link which will take customers back to browsing products

--------------------
Next, edit skin1/modules/detailed_product_images/product_images.tpl - this is where the detailed product images are displayed and where we need to put a jump point

place this line ...

<A name="productdetail"></A>

just above the include dialog.tpl line (this will jump to the detailed images title bar.
Make the last five lines of this file look like this ...

<A name="productdetail"></A>
{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}
{/if}
<div align="right">Back to Description</div>
{/if}

The important thing to note here is "productdetail" this is the name of the jump point that is refferred to in the link put into products.tpl above - these two keywords must match for the link to work!
The last href tag just before the final {/if} gives the customer a link back up to the top of the page.

Allthough a simple approach, it's really quite effective and gets around screen popups which are becoming more frowned apon nowadays if not surpressed completely by addware popup blockers.
I've had some positive feedback so far, it's just a little bit extra to make life easier for the customer - particularly those that aren't that technically savy yet anyway.

Hopefully I've explained it well enough for anyone to apply (it's no big deal for seasoned html coders or x-cart gurus but the effect is interesting)

Cheers for now,

John

[adpboss]

Thank you.

[GM]

Thanks John, nice little mod! I'm going try it out.

UPDATE: I made a few adjustments and it works AWESOME! Better than a popup way faster too.

[bluesunomi]

Looks great! much better than using the scroll bars ....

Also like your scrolling info message box quite effective for lot's of info ...!

[donavichi]

Good Mod!

Thanks for that!

[junaid]

Originally Posted by GM

Thanks John, nice little mod! I'm going try it out.

UPDATE: I made a few adjustments and it works AWESOME! Better than a popup way faster too check it out: http://www.goldmisers.com/customer/product.php?productid=5&cat=0

How did you made this enquire about product thing.

[GM]

If you look through this forum you will find it. It was done by BOOMER, he may also have it up on CART-LAB as freeware.

[junaid]

Originally Posted by GM

If you look through this forum you will find it. It was done by BOOMER, he may also have it up on CART-LAB as freeware.

i did get it from boomers site. thanks for informing me.
regards,