Display main product images until a variant is selected

  • Posts: 22
  • Thank you received: 5
  • Hikashop Business
1 year 2 months ago #355226

-- HikaShop version -- : 5.0.0
-- Joomla version -- : 4.3.4
-- PHP version -- : 8.1.23

Hi, I need to display the main product image in category list until the user opens the product details page and selects a variant.
As far as I can see, with "Replace main product images" option selected as "Variant images behavior", in category list is shown the image of default variant.
How can I modify this behavior?
Thank you very much.
Kind regards

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

  • Posts: 4753
  • Thank you received: 644
  • MODERATOR
1 year 2 months ago #355234

Hello,

We see 2 solutions :
1. Try to define your "Variant images behavior" option on "Display after main product images"
2. Other solutions, define in your default variant (in Variant tab), the main product image AS the default Variant

Hope that one of this solutions will help you to achieve your needs.
Regards

Last edit: 1 year 2 months ago by Philip.

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

  • Posts: 22
  • Thank you received: 5
  • Hikashop Business
1 year 2 months ago #355238

Hi, thank you for your reply.
I'd like to show main product's image in the category list but the variant's images ONLY in the variant display.

I've already tried the solutions you proposed but they have some problems:

- Solution 1: variants images are ALWAYS displayed together with the main product's images, even after a variant has been choosen while I'd like to show only variants' images when a choice is done.

- Solution 2: similary, when in variant's page also the main product image is shown and I don't like this because visitor has to see ONLY what is going to buy.

For example, if I have different texts printed on 4 cards, I'd like to show a phoho of all cards together in the main product's page but a photo of single card after a text has been choosen otherwise the visitor could think he will receive 4 cards with different texts + 1 more card with text he selected.

Hope this helps.
Thank you!
Regards

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

  • Posts: 4753
  • Thank you received: 644
  • MODERATOR
1 year 2 months ago #355240

Hello,

We will need to see your current configuration and context, the most simple is to provide these elements :
- Url link to your backend (administrator)
- Backend user references (with maxim ACL)

Note: use our Contact us form to provide these elements and add an Url link to this topic.
Regards

Last edit: 1 year 2 months ago by Philip.
The following user(s) said Thank You: bellaidea

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

  • Posts: 22
  • Thank you received: 5
  • Hikashop Business
1 year 2 months ago #355262

Hi, I've sent you a message with all the details.
Thank you!

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

  • Posts: 22
  • Thank you received: 5
  • Hikashop Business
1 year 2 months ago #355266

Hi again, I forgot to tell you the url of a product we are testing: testdomain.i.sent.to.you/catalogo/prod/cuore-in-gesso-con-frase/category_pathway-20

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

  • Posts: 82911
  • Thank you received: 13388
  • MODERATOR
1 year 2 months ago #355267

Hi,

There is no option to do what you want. However, I think it should be possible with a small customization.
Edit the view file show_block_img via the menu Display>Views.
There, add this code at the beginning:

<?php if(empty($this->variant_name)) { $this->element->images = $this->element->main->images; } ?>
I think it should do it (not tested though).

The following user(s) said Thank You: ssnobben, bellaidea

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

  • Posts: 22
  • Thank you received: 5
  • Hikashop Business
1 year 2 months ago #355311

Hi,
I've created the override as you suggested and it seems to be ok.
We'll keep testing during the next week and I'll keep you informed about the results.
Meanwhile, thank you for your kind help and, please, ask the developing team to add this feature to the standard options because it is important that customers see on the screen exactly what they are going to buy, nothing else ;)

The following user(s) said Thank You: nicolas, ssnobben

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

  • Posts: 22
  • Thank you received: 5
  • Hikashop Business
1 year 1 month ago #355689

nicolas wrote: Hi,

There is no option to do what you want. However, I think it should be possible with a small customization.
Edit the view file show_block_img via the menu Display>Views.
There, add this code at the beginning:

<?php if(empty($this->variant_name)) { $this->element->images = $this->element->main->images; } ?>
I think it should do it (not tested though).


Hi!
Unfortunately your suggestion only partially works. In fact, the image of the main product is correctly shown and, when you choose a variant, the image of the variant appears but:
1) canceling the choice of variant does not return the main image
2) in some conditions (it's not yet clear to me which ones, yet), no image is shown and this Warning message appears: "Warning: Undefined property: stdClass::$main in /path_to_site_folder/templates/shaper_helixultimate/html/com_hikashop/product/show_block_img.php on line 27"

I attach the override code from show_block_img.php.
Maybe I put your code (<!-- FD: variant thumbnails -->) in the wrong place or something else is wrong?

Thank you!
Greetings
<?php
/**
 * @package	HikaShop for Joomla!
 * @version	5.0.0
 * @author	hikashop.com
 * @copyright	(C) 2010-2023 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><?php
$variant_name = '';
$variant_main = '_main';
$display_mode = '';
if(!empty($this->variant_name)) {
	$variant_name = $this->variant_name;
	if(substr($variant_name, 0, 1) != '_')
		$variant_name = '_' . $variant_name;
	$variant_main = $variant_name;
	$display_mode = 'display:none;';
}
?>
<div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>">
<!-- MAIN IMAGE -->
	<div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div">

<!-- FD: thumbnails varianti -->
<?php if(empty($this->variant_name)) { $this->element->images = $this->element->main->images; } ?>
<!-- FD: END thumbnails varianti -->
      
<?php

if(!empty ($this->element->images)) {
	$image = reset($this->element->images);
}
$height = (int)$this->config->get('product_image_y');
$width = (int)$this->config->get('product_image_x');
if(empty($height)) $height = (int)$this->config->get('thumbnail_y');
if(empty($width)) $width = (int)$this->config->get('thumbnail_x');
$divWidth = $width;
$divHeight = $height;
$this->image->checkSize($divWidth, $divHeight, $image);
$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));

$imgMode = (int)$this->config->get('image_slide');
$imgMode_class = '';
if (isset($imgMode)) {
	switch ($imgMode) {
		case 0:
			$imgMode_class = ' hikashop_img_mode_classic';
		break;
		case 1:
			$imgMode_class = ' hikashop_img_mode_slider';
		break;
		case 2:
			$imgMode_class = ' hikashop_img_mode_both';
		break;
		default:
			$imgMode_class = ' hikashop_img_mode_classic';
	}
}
if(!$this->config->get('thumbnail')) {
	if(!empty ($this->element->images)) {
		echo '<img itemprop="image" src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
	}
} else {
	$style = '';
	if( !empty($this->element->images) && count($this->element->images) > 1 && !empty($height)) {
		$style = ' style="height:' . ($height + 20) . 'px;"';
	}
	$variant_name = isset($this->variant_name) ? $this->variant_name : '';

	$prev_btn = '';
	$next_btn = '';	
	if( !empty($this->element->images) && count($this->element->images) > 1) {
		$nb_img = count($this->element->images);
		$selected_slide_prev = 'hikashop_slide_prev_active';
		$selected_slide_next = 'hikashop_slide_next_active';	

		foreach($this->element->images as $key => $img) {
			$prev_id = (int)$key - 1;
			$next_id = (int)$key + 1;

			if($key == 0) {
				$prev_id = (int)$nb_img - 1;
			}
			if($key == (int)$nb_img - 1) {
				$next_id = 0;
			}
			if ($key > 0) {
				$selected_slide_prev = '';
				$selected_slide_next = '';
			}
			$prev_btn .= '<a id="hikashop_main_image'.$variant_name.'_prev_'.$key.'" class="hikashop_slide_prev '.$selected_slide_prev.'" onclick="onMouseOverTrigger('.$prev_id.'); return false;">'
				. '<i class="fas fa-chevron-left"></i>'
			. '</a>';
			$next_btn .= '<a id="hikashop_main_image'.$variant_name.'_next_'.$key.'" class="hikashop_slide_next '.$selected_slide_next.'" onclick="onMouseOverTrigger('. $next_id .'); return false;">'
				. '<i class="fas fa-chevron-right"></i>'
			. '</a>';
		}
	}
?>
		<div class="hikashop_product_main_image_thumb<?php echo $imgMode_class; ?>" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> >
<?php
	echo $prev_btn;
?>			<div style="<?php if(!empty($divHeight) && !$this->config->get('image_force_size',true)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image">
				<div style="position:relative;text-align:center;clear:both;margin: auto;" class="hikashop_product_main_image_subdiv">
<?php
	if($this->image->override) {
		echo $this->image->display(@$image->file_path, true, @$image->file_name, 'id="hikashop_main_image'.$variant_name.'" itemprop="image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $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) {
			$attributes = 'style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"';
			if($img->external && $img->req_width && $img->req_height)
				$attributes .= ' width="'.$img->req_width.'" height="'.$img->req_height.'"';
			$html = '<img id="hikashop_main_image'.$variant_name.'" '.$attributes.' title="'.$this->escape((string)@$image->file_description).'" alt="'.$this->escape((string)@$image->file_name).'" src="'.$img->url.'"/>';
			if($this->config->get('add_webp_images', 1) && function_exists('imagewebp') && !empty($img->webpurl)) {
				$html = '
				<picture>
					<source id="hikashop_main_image'.$variant_name.'_webp" srcset="'.$img->webpurl.'" type="image/webp">
					<source id="hikashop_main_image'.$variant_name.'_src" srcset="'.$img->url.'" type="image/'.$img->ext.'">
					'.$html.'
				</picture>
				';
			}

			if(!empty($this->element->badges))
				$html .= $this->classbadge->placeBadges($this->image, $this->element->badges, array('vertical' => 0, 'horizontal' => 0, 'thumbnail' => $img, 'echo' => false));

			$attr = 'title="'.$this->escape((string)@$image->file_description).'"';
			if (!empty ($this->element->images) && count($this->element->images) > 1)
				$attr .= ' onclick="return window.localPage.openImage(\'hikashop_main_image'.$variant_name.'\', \''.$variant_name.'\', event);"';
			echo $this->popup->image($html, $img->origin_url, null, $attr);
		}
	}
?>	
				</div>
			</div>
<?php
	echo $next_btn;
?>		</div>
<?php	
	if(empty($this->variant_name) && !empty($img->origin_url)) {
		if(strpos($img->origin_url, 'http://') === false && strpos($img->origin_url, 'https://') === false) {
			$url = HIKASHOP_LIVE;
			$pieces = parse_url(HIKASHOP_LIVE);
			if(!empty($pieces['path']))
				$url = substr(HIKASHOP_LIVE,0,strrpos(HIKASHOP_LIVE,$pieces['path']));
			$img->origin_url = $url.$img->origin_url;
		}
?>
		<meta itemprop="image" content="<?php echo $img->origin_url; ?>"/>
<?php
	}
}
?>
	</div>
<!-- EO MAIN IMAGE -->
<!-- THUMBNAILS -->
	<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;
		$i = 0;
		foreach($this->element->images as $key => $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);
				continue;
			}

			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(empty($img->success))
				continue;

			$id = null;
			$classname = 'hikashop_child_image';
			$thumbnail_class = 'hikashop_thumbnail_'.$key;
			if($firstThunb) {
				$id = 'hikashop_first_thumbnail'.$variant_name;
				$firstThunb = false;
				$classname .= ' hikashop_child_image_active';
				$thumbnail_class .= ' hikashop_active_thumbnail';
			}
			$thumbnail_class = 'class="'.$thumbnail_class.'"';

			$main_image_size = $img->width.', '.$img->height;
			if($img->external && $img->req_width && $img->req_height)
				$main_image_size = $img->req_width.', '.$img->req_height;

			$attr = $thumbnail_class.' title="'.$this->escape((string)@$image->file_description).'" onmouseover="return window.localPage.changeImage('
				. 'this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$main_image_size.', \''.str_replace(array("'", '"'),
				array("\'", '&quot;'),@$image->file_description).'\', \''.str_replace(array("'", '"'),array("\'", '&quot;'),@$image->file_name).'\', '.$key.');"';
			$html = '<img class="'.$classname.'" title="'.$this->escape((string)@$image->file_description).'" alt="'.$this->escape((string)@$image->file_name).'" src="'.$img->url.'"/>';
			if($this->config->get('add_webp_images', 1) && function_exists('imagewebp') && !empty($img->webpurl)) {
				$html = '
				<picture>
					<source srcset="'.$img->webpurl.'" type="image/webp">
					<source srcset="'.$img->url.'" type="image/'.$img->ext.'">
					'.$html.'
				</picture>
				';
			}
			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>
<!-- EO THUMBNAILS -->
</div>
<?php
if(empty($variant_name)) {
?>
<script type="text/javascript">
if(!window.localPage)
	window.localPage = {};
if(!window.localPage.images)
	window.localPage.images = {};
window.localPage.changeImage = function(el, id, url, width, height, title, alt, ref) {
	var d = document, target = d.getElementById(id), w = window, o = window.Oby;
	if(!target) return false;
	target.src = url;
	target.width = width;
	target.height = height;
	target.title = title;
	target.alt = alt;

	var target_src = d.getElementById(id+'_src');
	if(target_src) {
		target_src.srcset = url;
	}
	var target_webp = d.getElementById(id+'_webp');
	if(el.firstChild.tagName == 'picture') {
		if(target_webp) {
			target_webp.srcset = url.substr(0, url.lastIndexOf(".")) + '.webp';
		}
	} else if(target_webp) {
		target_webp.remove();
	}

	var thumb_img = null, thumbs_div = d.getElementById('hikashop_small_image_div');
	if(thumbs_div) {
		thumbs_img = thumbs_div.getElementsByTagName('img');
		if(thumbs_img) {
			for(var i = thumbs_img.length - 1; i >= 0; i--) {
				o.removeClass(thumbs_img[i], 'hikashop_child_image_active');
			}
		}
	}
	thumb_img = el.getElementsByTagName('img');
	if(thumb_img) {
		for(var i = thumb_img.length - 1; i >= 0; i--) {
			o.addClass(thumb_img[i], 'hikashop_child_image_active');
		}
	}

	window.localPage.images[id] = el;

	var active_thumb = document.querySelector('.hikashop_active_thumbnail');

	var curr_prev = document.querySelector('.hikashop_slide_prev_active');
	var curr_next = document.querySelector('.hikashop_slide_next_active');
	var next_prev = document.querySelector('#'+id+'_prev_'+ref);
	var next_next = document.querySelector('#'+id+'_next_'+ref);

	curr_prev.classList.remove('hikashop_slide_prev_active');
	curr_next.classList.remove('hikashop_slide_next_active');
	next_prev.classList.add('hikashop_slide_prev_active');
	next_next.classList.add('hikashop_slide_next_active');

	active_thumb.classList.remove("hikashop_active_thumbnail");
	el.classList.add("hikashop_active_thumbnail");

		return false;
};
window.localPage.openImage = function(id, variant_name, e) {
	if(!variant_name) variant_name = '';
	if(!window.localPage.images[id])
		window.localPage.images[id] = document.getElementById('hikashop_first_thumbnail' + variant_name);

	e = e || window.event;
	e.stopPropagation();
	e.cancelBubble = true;
	window.Oby.cancelEvent(e);
	window.localPage.images[id].click();
	return false;
};
function onMouseOverTrigger(a) {
	var element = document.querySelector('.hikashop_thumbnail_'+a);
	element.onmouseover();
}


document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
	return evt.touches || evt.originalEvent.touches;
}
function handleTouchStart(evt) {
	const firstTouch = getTouches(evt)[0];
	xDown = firstTouch.clientX;
	yDown = firstTouch.clientY;
}
function handleTouchMove(evt) {
	if ( ! xDown || ! yDown ) {
		return;
	}
	var xUp = evt.touches[0].clientX;
	var yUp = evt.touches[0].clientY;
	var xDiff = xDown - xUp;
	var yDiff = yDown - yUp;
	if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
		if ( xDiff > 0 ) {

			var next = document.querySelector('.hikashop_slide_next_active');
			if (next) {
				next.onclick();
			}
		} else {

			var prev = document.querySelector('.hikashop_slide_prev_active');
			if (prev) {
				prev.onclick();
			}
		}
	}

	xDown = null;
	yDown = null;
}
</script>
<?php
}

The following user(s) said Thank You: ssnobben

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

  • Posts: 67
  • Thank you received: 4
1 year 1 month ago #355691

Did you sort this out?

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

  • Posts: 82911
  • Thank you received: 13388
  • MODERATOR
1 year 1 month ago #355704

Hi,

1. Indeed. In dynamic display, the characteristics have a "please select a value" choice by default. If you return to this value after selecting a variant, no change is made to the current page and you're still seeing the data of the previously selected variant.
I don't see a way to change the way it works without a big overhaul of the characteristics switching system.

2. Try changing the code to:

<?php if(empty($this->variant_name) && !empty($this->element->main)) { $this->element->images = $this->element->main->images; } ?>
That should avoid the warning and fix the problem.

The following user(s) said Thank You: bellaidea

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

Time to create page: 0.088 seconds
Powered by Kunena Forum