Changing place of thumbnails on product page

skot
Topic Author
Offline

10 years 10 months ago #220750 by skot

Changing place of thumbnails on product page was created by skot

-- url of the page with the problem -- : capsulz.ru/index.php/woman/product/1802-antwerpen
-- HikaShop version -- : 2.6.0
-- Joomla version -- : 3.4.5
-- PHP version -- : 5.6
-- Browser(s) name and version -- : Chrome 46.0.2490.80 m

Hello,

I have two little problems that I just can't resolve...

1. I am trying to change the way the product page displays. Instead of having one main picture and displaying the thumbnails below, I wanted to move the thumbnails to the right. This I succeeded and they stil update the main picture on mouse hoover. However, if I change the variant, then the main pic gets updated but not the thumbnails. I think I did something wrong...

example page: capsulz.ru/index.php/woman/product/1802-antwerpen

2. I have set quite a few products now, with variants, and some of them with no variants (only one main product) but still having a size and a color set. When there are no variants, the drop down menu just don't display even if characteristics are set. Is that normal behaviour (did I not import the products correctly), or is there a way to fix it?
example page: capsulz.ru/index.php/woman/product/2990-...-langck-ru-ru-langck

In advance, many thanks for your help!
Raphael

Please Log in or Create an account to join the conversation.

Xavier
Offline

10 years 10 months ago #220781 by Xavier

Replied by Xavier on topic Changing place of thumbnails on product page

Hi,

1. How do you have done the changes ? You have to edit the view "product / show_block_img" and move the part related on the thumbnails to the "product / show_default" view.

Code:

			<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div">
			<?php
			if (!empty ($this->element->images) && count($this->element->images) > 1) {
				$firstThunb = true;
				foreach ($this->element->images as $image) {
					if($this->image->override) {
						echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width,  $height);
					} else {
						if(empty($this->popup))
							$this->popup = hikashop_get('helper.popup');
						$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
						if(@$img->success) {
							$id = null;
							$classname='hikashop_child_image';
							if($firstThunb) {
								$id = 'hikashop_first_thumbnail'.$variant_name;
								$firstThunb = false;
								$classname.=' hikashop_child_image_active';
							}
							$attr = 'title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.str_replace("'","\'",@$image->file_description).'\', \''.str_replace("'","\'",@$image->file_name).'\');"';
							$html = '<img class="'.$classname.'" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
							if(empty($variant_name)) {
								echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'));
							} else {
								echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image_VARIANT_NAME'));
							}
						}
					}
				}
			}

		?>
	</div>

2. If the products doesn't have variants, so yes it is normal that no dropdowns are displayed. The product only have the selected values. To display dropdown, it will require custom code in the view "product / show_default".

Please Log in or Create an account to join the conversation.

skot
Topic Author
Offline

10 years 10 months ago #220851 by skot

Replied by skot on topic Changing place of thumbnails on product page

Hello Xavier,

Thanks for the quick answer, I'm always impressed by your high level of support.
For the first point, I have made exactly like what you've suggested + adding the defined variables like height and width from show_block_image. If you check this page:
capsulz.ru/index.php/woman/product/1802-antwerpen
and try to select a different color of variants, the main picture will change but not the thumbnail - that's my whole problem.

for point 2 I've sorted it by creating a main product with a single variant.

Many thanks
Raphael

Please Log in or Create an account to join the conversation.

skot
Topic Author
Offline

10 years 10 months ago #221259 by skot

Replied by skot on topic Changing place of thumbnails on product page

Hello,

Sorry to insist but does someone know a way to fix the issue I'm having on the following page (with thumbnails not changing when selecting a different variant)?
capsulz.ru/index.php/woman/product/1802-antwerpen

Many Thanks
Raphael

Please Log in or Create an account to join the conversation.

Philip
Offline

10 years 10 months ago #221293 by Philip

Replied by Philip on topic Changing place of thumbnails on product page

Hello,

Now I think I have your solution, the first answer from Xavier was a good way to custom your product page but change the layout.
This change unable HikaShop to link Main image product with his thumbnails.

So, two points:

- First I suggest to revert change in "product / show_block_img"
- Instead use Css code to display thumbnail below description

And so, thumbnails will be link to main image product, and so link to your characteristics.
Now, if you are unable to do this, I mean create a front-end custom Css and maybe revert "product / show_block_img" file.

Send us, your ftp references AND your administrator access.

Regards,

Please Log in or Create an account to join the conversation.

skot
Topic Author
Offline

10 years 10 months ago #223246 by skot

Replied by skot on topic Changing place of thumbnails on product page

Hello Philp,

thanks for your advices, I've done it through CSS and it kind of work but still, can't display the thumbnail right after the end of the product description, only in a fixed place at the right of the main picture.

Also, my @media queries are buggy on mobile display, so can't get it working on smaller screens

will keep looking into that...

Please Log in or Create an account to join the conversation.

Time to create page: 0.191 seconds