- Posts: 34
- Thank you received: 6
Display main product images until a variant is selected
3 years 1 month ago #355226
by bellaidea
Display main product images until a variant is selected was created by bellaidea
-- 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
-- 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.
3 years 1 month ago - 3 years 1 month ago #355234
by Philip
Replied by Philip on topic Display main product images until a variant is selected
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
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: 3 years 1 month ago by Philip.
Please Log in or Create an account to join the conversation.
3 years 1 month ago #355238
by bellaidea
Replied by bellaidea on topic Display main product images until a variant is selected
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
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.
3 years 1 month ago - 3 years 1 month ago #355240
by Philip
Replied by Philip on topic Display main product images until a variant is selected
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
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: 3 years 1 month ago by Philip.
The following user(s) said Thank You: bellaidea
Please Log in or Create an account to join the conversation.
3 years 1 month ago #355262
by bellaidea
Replied by bellaidea on topic Display main product images until a variant is selected
Hi, I've sent you a message with all the details.
Thank you!
Thank you!
Please Log in or Create an account to join the conversation.
3 years 1 month ago #355266
by bellaidea
Replied by bellaidea on topic Display main product images until a variant is selected
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.
3 years 1 month ago #355267
by nicolas
Replied by nicolas on topic Display main product images until a variant is selected
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:
I think it should do it (not tested though).
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:
Code:
<?php if(empty($this->variant_name)) { $this->element->images = $this->element->main->images; } ?>
Please Log in or Create an account to join the conversation.
3 years 1 month ago #355311
by bellaidea
Replied by bellaidea on topic Display main product images until a variant is selected
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
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
Please Log in or Create an account to join the conversation.
3 years 3 weeks ago #355689
by bellaidea
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
Replied by bellaidea on topic Display main product images until a variant is selected
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:I think it should do it (not tested though).Code:<?php if(empty($this->variant_name)) { $this->element->images = $this->element->main->images; } ?>
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
Code:
<?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("\'", '"'),@$image->file_description).'\', \''.str_replace(array("'", '"'),array("\'", '"'),@$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.
3 years 3 weeks ago #355691
by ssnobben
Replied by ssnobben on topic Display main product images until a variant is selected
Did you sort this out?
Please Log in or Create an account to join the conversation.
3 years 3 weeks ago #355704
by nicolas
Replied by nicolas on topic Display main product images until a variant is selected
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:
That should avoid the warning and fix the problem.
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:
Code:
<?php if(empty($this->variant_name) && !empty($this->element->main)) { $this->element->images = $this->element->main->images; } ?>
The following user(s) said Thank You: bellaidea
Please Log in or Create an account to join the conversation.
Time to create page: 0.104 seconds