Small image div does not show

Hi,

I'd basically like my product page to function thus:

The small image div is visible at all times, and when selecting a colour, the image will change to the corresponding colour (or any other characteristic that has a specific image).

Currently, the small image div shows only when i have multiple images added to the MAIN product, but no images associated with the VARIANT.

This would be OK, but I want the image to change colour when a colour is selected.

Please tell me what I need to alter in the code.

Thanks

PS - another thing. When attempting to configure the product page correctly, my Recently Viewed module has suddenly started displaying 12 products instead of 3. It did this before, and I believe it's to do with the changes I made to the pagination, so that it would show 12 by default instead of 20. However, before, I went to the module and made sure it was set to 'All sub elements' and 'Synchronize with currently displayed menu' was set to No. This fixed it. Now, it doesn't fix it, and I don't know which other settings could possibly have affected it. I also can't see how I did anything to affect it with the changes I made to the views. Very confusing

Hi,

1. Can you give me a link to your web site ? it would help me to understand the problem and how to solve it.

2. Can you show me a screenshot of your module ?

Thank you.

Hmm, I just deleted the recently viewed module, as I couldn't get it working properly. I created a new one and I can get it to display as a module, but not under the product page. Here's the link to my site commuter-hub.com/comhub .

As I said, I deleted the module so I can't give you a screenshot, but I can give you a screenshot of the one I just made...

Thanks. I've got it looking right. Now, did you have any advice regarding the first question? I still can't get that small image div to display when i have images linked to variants. Take a look at the Defeet Neon Dura Glove for an example. Many thanks.

The "small image div" which displays the other colour options below the main image on the main product page. When I add multiple images to the main product, I see the small images below. As soon as I add an image to the variant, the small images below disappear. Look at the Defeet Dura Glove (NOT the neon this time) to see what I mean, it has images attached to the main product but not to the variant. I just want to keep that small image div. It's a question of aesthetics, I just think it looks better that way.

I'm not saying it's a bug. I'm saying, how can I make it behave as I want it to? I want to show the small images below EVEN WHEN I have a image attached to the variant. That can't be difficult. It must be a question of changing a small bit of code, I just want to know where this code can be found. Thanks

Yes, that sounds encouraging. Thanks, I look forward to hearing your thoughts

This topic is exactly the issue I am having right now. I need to be able to continue to show the small image thumbnails, while still having an image in the product variants. Was a solution for this? This is a must have for my customers website. Hopefully this gets seen as I didnt want to post a duplicate topic.

From what I can see, if you have multiple images in a main product, the small image thumbnails appear. As soon as you create a variant/characteristic and assign an image to it. you loose the ability to have thumbnails of say something like colors and only see the main product image which changes depending on the selection made.

We could just not assign images to the variants and this would be a quick fix, but this would lead to a red product image showing on checkout when blue was selected. This is the default behavior as red would be the default image for the main product.

I need to be able to display the thumbnails for each variant, as well as the main image for the variant selected. The icing on the cake would be for the images to be tied to the main image like it is with a normal multi-image product with no variants, but to also be linked to the select box so the variant and main image change when a thumbnail is selected.

Cheers!

Hope I made sense

Hi,

As soon as you create a variant/characteristic and assign an image to it. you loose the ability to have thumbnails of say something like colors and only see the main product image which changes depending on the selection made.

Did you tried to attach more that one image through your product variant's configuration page ?

Found the following code in another thread that seams to be doing the trick. I am no php or javascript expert so i need some help getting this to work. Ive placed this code in show_block_img.php in the hikashop_small_image_div. I know need to change the javascript so that when hovered & clicked it updates/changes the main image and the select box for the product variants.



from: www.hikashop.com/forum/4-how-to/69981-ne...-images-at-once.html

<?php
            foreach($this->element->variants as $variant){
            	foreach($variant->characteristics as $k => $characteristic){
            		$char_id = $characteristic->variant_characteristic_id;
            		$cat_id = $k;
            	}
            	foreach($variant->images as $image){
            		echo '<img class="hikashop_child_image" onClick="document.getElementById(\'hikashop_product_characteristic_'.$cat_id.'\').value = '.$char_id.'; document.getElementById(\'hikashop_product_characteristic_'.$cat_id.'\').focus();" style="height:100px;" src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '"  />';
            	}
            }
            echo '<input type="hidden" onFocus="return hikashopUpdateVariant(this);" id="hikashop_product_characteristic_'.$cat_id.'" value="">';
            ?>