Roll Over Product Listing Image

[kenkja]

Hello All

 

I like to adapt os-commerce so that on the product listing pages, so that users can mouse over the product small image to see a larger image, without having to go to the products page

 

 

 

 

The site is for a motorcycle parts retailer, each bike has aorund 20 categories, and each category has from 3 to 99 parts.

 

 

At present all the parts within a category use the same thumbnail image, which is a copy of the manufacturers parts fiche for that area of the bike, and includes a part reference - Eg (01) in the screenshot

 

 

As each bike uses between 800 and 1300 part numbers, is will take an eternity to replace the existing thumbnail with an image of the individual part, and some individual parts are used within multiple categories of the bike so a pic of it in isolation may misleading as it does not show its exact position within the bike.

 

accordingly I'd like to be allow users to mouse over the "general" image for a category and see the larger image which will help them identify which part number they need without having to click on a specific part number before they can see the larger image

 

 

Any clues how to do this

 

Thanks

 

 

 

Ken.

[kenkja]

Sorry forgot to say, I'm using version 2.3.1

[kenkja]

Okay, so no clues so far, that's okay, this may be something that I have to buy, theres only so much you guys can do for free.

 

bafore I do so can anyone confirm that the appearance of the productListTable is define by includes/modules/product_listing.php

 

thanks

 

ken

[♥kymation]

The table is indeed generated by includes/modules/product_listing.php.

 

Search the Internet for "javascript mouseover popup." There are free scripts available.

 

Regards

Jim

[kenkja]

Thank you Jim

 

Now I know, for sure, which file to amend, I give it go, but am toying with the idea adding a new level to the table which will display the large image in its full size before the product list starts, I get the feeling this may be an easier alteration and probably more user friendly.

 

ken

[kenkja]

Hello All

 

I've been playing with the way the product listing displays and think I can get one large image to display above the product listing table, so decided to amend it so that it does not display the thumb nail images.

 

 

As per the screenshot above, however the table headings include "manufacturer" twice.

 

Can anyone confirm where the table heading is created, is it as a result of the create colum list commands commencing on line 93 of an un-modified index.php file.

 

thanks

 

ken

 

 

 

 

[kenkja]

Have answered my own question, it is in index.php

[kenkja]

Last hurdle to get over is what piece of code do I need to establish the category_id of the current category

 

thanks

 

Ken

 

 

[kenkja]

<?php echo $current_category_id; ?>

 

displays the category id number

 

Ken

[kenkja]

Okay Folks, I finally ran into a brick wall made from a lack of php coding knowledge.

 

My plan was, as follows :-

 

1. Add to includes/modules/products_listing.php an echo statement to display an image from the images folder. Worked fine, but obviously it shows the same image for each category

 

2. Quote out all references to product_image in index.php (including those from year_make_model) and product_listing.php, so that the productlistingtable and its headers do not include the product image thumbnail, again works fine

 

3. Add another field which I've called "cat_bigimage" to the "categories" table - again no problem

 

4. use $current_category_id to find the id of the category for which the productlistingtable relates - again no problem

 

then

 

5. replace 1 above with code which uses $current_category_id to find the content of cat_bigimage and then display it from the images folder - this is where I come to a full stop

 

for example

 

The images folder includes large images "barsdet.jpg" & "forkdet.jpg" and these have been added to the new field "cat_bigimage" within the "categories" table for the appropriate category_id.

 

Hoping for clues

 

Thanks

 

Ken

[♥kymation]

$categories_query = tep_db_query("select categories_image from " . TABLE_CATEGORIES . " where categories_id = '" . (int)$current_category_id . "'");
$categories = tep_db_fetch_array($categories_query)

and use $categories['categories_image'] in place of $listing['products_image'].

 

Regards

Jim

[kenkja]

Hello Jim

 

Thanks for the code, I don't think I'm grasping what your code is trying to do.

 

I understand, or think I do, the 2 lines of code but not using $categories['categories_image'] in place of $listing['products_image']

 

My theory, which may well be flawed, was to add appropriate code in includes/modules/product_listing.php after the first

 

<div class="contentText"> statement on line 16 of a unaltered product_listing.php

 

and before

 

<?php

if ( ($listing_split->number_of_rows > 0) && ( (PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3') ) ) {

?> lines 18,19 &20

 

as stand alone bit of code which displays the large image required and the rest of product_listing.php creates the standard product list page but without the thumbnails for each product_id

 

So I added

 

<?php

$categories_query = tep_db_query("select cat_bigimage from " . TABLE_CATEGORIES . " where categories_id = '" . (int)$current_category_id . "'");

$categories = tep_db_fetch_array($categories_query);

?>

which doesn't produce any fatals, but also does not display the image, my un-educated guess is that the code is "fetching" the query but needs something to display its result.

 

this is sort of result i was hoping for

 

 

 

thanks

 

ken

[♥kymation]

Sorry, I misunderstood what you were trying to do. Those two lines of code only retrieve the name of the image from the database. You need more to show the image. To display the image, place this code where you want it to show:

<?php
   $category_query = tep_db_query("select cd.categories_name, c.categories_image from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = '" . (int)$current_category_id . "' and cd.categories_id = '" . (int)$current_category_id . "' and cd.language_id = '" . (int)$languages_id . "'");
   $category = tep_db_fetch_array($category_query);
   echo tep_image( DIR_WS_IMAGES . $category['categories_image'], $category['categories_name'] );
?>

That includes the code I pasted above.

 

Regards

Jim

[kenkja]

Thank you, Jim, you are a star !!

 

Here's the result

 

 

So a user can now see the image from the manufacturers parts fiche, as each categories "products list table" loads, identify the part they require and then click buy now

 

I've tried this on a number of different categories and on the 1/2/3/4 pages of the list of components within a category and it all displays correctly.

 

To make it more website owner friendly, it could probably do with some code which alters the width of "cat_bigimage" to that of the "product list table", at present I just set my images to a width of 630.

 

Further I should probably change the title "Model" to "Part Ref" and in the relevent table field just include the ("left, 4,"product name"), replace the Manufacturer column as the user has already been driven down through a category tree which stops any other manufacturers products being displayed and replace it with "Part Code" at present (right,(len"product_name"-5)) and replace "product_name" with at least part of "product_description"

 

Huge thanks

 

Ken

[peter2233]

I like to adapt os-commerce so that on the product listing pages, so that users can mouse over the product small image to see a larger image, without having to go to the products page

 

Hi Ken

 

i need to do same thing. can you give me any help how to manage it (maybe as a contrib)?

 

greetings

[kenkja]

Hi Ken

 

i need to do same thing. can you give me any help how to manage it (maybe as a contrib)?

 

greetings

 

Hi Peter sorry for the delay in replying, haven't been on forum for a while, bit up to the neck in it at the mo, but will try to post what I did tonight/tomorrow

 

ken

[peter2233]

no worries.

 

i have already found a solution.

 

Website

 

greetings

[kenkja]

Nice one, well done

 

cheers

 

ken

[kenkja]

Hi all, and old post resurfacing here, so just to recap

 

Sometime back I altered product_listing.php to include a large image above the actual product listing, because all of the products in the category use the same picture which may include 10 or up to over 200 different products, so very useful if you are trying to display and exploded diagram of the components of a item of machinery.

 

To this I added a field to the categories table which is a reference to the image require and added the following code to product_listing.php, courtesy of kymation

 

<?php
$category_query = tep_db_query("select cd.categories_name, c.cat_bigimage from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = '" . (int)$current_category_id . "' and cd.categories_id = '" . (int)$current_category_id . "' and cd.language_id = '" . (int)$languages_id . "'");
$category = tep_db_fetch_array($category_query);
echo tep_image( DIR_WS_IMAGES . $category['cat_bigimage'], $category['categories_name'] );
?>

 

Today I've been working on another computer and noticed that the image added to the top is not re-sizing to the display/browser width, has anyone an idea how I can make this image 100% of the main body within which it it is displayed.

 

I have made all of my images 940 pixels wide which is fine on my computer which has 1280 wide screen when the browser is using the full screens width, but it does not adapt to wider or narrower browser windows.

 

I'm using v2.3.1 with a fluid grid layout, - Nb I probably should say the fluid grid is working correctly but the image I added is always 940 pixel wide regardless of the size of the browser window, hope this makes sense

 

thanks

 

ken