HIKASHOP ESSENTIAL 60€The basic version. With the main features for a little shop.
HIKAMARKETAdd-on Create a multivendor platform. Enable many vendors on your website.
HIKASERIALAdd-on Sale e-tickets, vouchers, gift certificates, serial numbers and more!
MARKETPLACEPlugins, modules and other kinds of integrations for HikaShop
-- url of the page with the problem -- :
www.juicybike.info/electric-bikes/produc...-step-through-e-bike
-- HikaShop version -- : 2.2.1
-- Joomla version -- : 3.1.5
-- PHP version -- : 5.4.14
I'd like to add the product thumbnails to a new tab in tabular display, rather than having them displayed under the main image. I think I've worked out how to add a tab to the existing display, but how do I add the thumbnails to it. Also I how do I then stop the thumbnails from being displayed under the main image?
Regards, Curtis
Please Log in or Create an account to join the conversation.
Hi,
You have to edit the view "product / show_block_img" and take the part in the div with the class "hikashop_small_image_div" to add it directly in the view "product / show_tabular".
Some variables will probably have to be changed.
Please Log in or Create an account to join the conversation.
OK, I'm not too knowledgeable about coding, but I get the idea. I've managed to create a new tab, called, 'Gallery', using the ID 'hikashop_small_image'. I then tried to paste the corresponding div into the page. I can get the images to display, but they appear on every tab. Any idea what I might be doing wrong? I've pasted the code below, the bits I've added are highlighted:
<ul>
<li><a href="#hikashop_show_tabular_description"><?php echo JText::_('PRODUCT_DESCRIPTION');?></a></li>
<?php if($hide_specs == 0){ ?>
<li><a href="#hikashop_show_tabular_specification"><?php echo JText::_('SPECIFICATIONS');?></a></li>
<?php }
if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){
?>
// ------------------------------------------
<li><a href="#hikashop_small_image"><?php echo JText::_('Gallery');?></a></li>
// ------------------------------------------
<li><a href="#hikashop_show_tabular_comment"><?php echo JText::_('PRODUCT_COMMENT');?></a></li>
<li><a href="#hikashop_show_tabular_new_comment"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></a></li>
<?php } ?>
</ul>
<?php
if(!empty($this->element->extraData->bottomBegin))
echo implode("\r\n",$this->element->extraData->bottomBegin);
?>
<div id="hikashop_show_tabular_description">
<div id="hikashop_product_description_main" class="hikashop_product_description_main">
<?php
echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
?>
</div>
<span id="hikashop_product_url_main" class="hikashop_product_url_main">
<?php
if (!empty ($this->element->product_url)) {
echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
}
?>
</span>
</div>
<?php if($hide_specs == 0){ ?>
<div id="hikashop_show_tabular_specification">
<?php
$this->setLayout('show_block_dimensions');
echo $this->loadTemplate();
if(!empty($this->fields)){
$this->setLayout('show_block_custom_main');
echo $this->loadTemplate();
}
?>
</div>
// ------------------------------------------
<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) {
foreach ($this->element->images as $image) {
echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width, $height);
}
}
?>
</div>
// ------------------------------------------
<?php }
if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){ ?>
<form action="<?php echo hikashop_currentURL() ?>" method="post" name="hikashop_comment_form" id="hikashop_comment_form">
<?php
if(!empty($this->element->extraData->bottomMiddle))
echo implode("\r\n",$this->element->extraData->bottomMiddle);
?>
<div id="hikashop_show_tabular_comment">
<div id="hikashop_product_vote_listing" class="hikashop_product_vote_listing">
<?php
echo $layout_vote_listing;
?>
</div>
</div>
<div id="hikashop_show_tabular_new_comment">
<div id="hikashop_product_vote_form" class="hikashop_product_vote_form">
<?php
echo $layout_vote_form;
?>
</div>
</div>
</form>
<?php } ?>
<?php
if(!empty($this->element->extraData->bottomEnd))
echo implode("\r\n",$this->element->extraData->bottomEnd);
?>
</div>
</div>Please Log in or Create an account to join the conversation.
Thanks to replace:
<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div"><div id="hikashop_small_image" class="hikashop_small_image_div">Please Log in or Create an account to join the conversation.
I've more or less achieved what I want, but I have one or two problems which I'm not experienced enough to solve without direction.
I've added the new tab, and taken the part in the div with the class "hikashop_small_image_div" to add it directly in the view "product / show_tabular", and it works, but there's no bottom or side border on the new tab.
When I take out the edit relevant part from the view "product / show_block_img" it moves the options dropdowns and price information to below the main image. How do I remove the thumbnails under the main image and keep the options and prices as they are?
reference page:
www.juicybike.info/electric-bikes/produc...-step-through-e-bike
Here's the section of code I changed in the "product / show_tabular", with the bits I've changed marked:
<ul>
<li id="hikashop_show_tabular_description_li" class="ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_description');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_DESCRIPTION');?></a></li>
<?php if($hide_specs == 0){ ?>
<li id="hikashop_show_tabular_specification_li" class="ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_specification');" href="javascript:void(0);"><?php echo JText::_('SPECIFICATIONS');?></a></li>
<?php }
if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){
?>
----------------------------
<li id="hikashop_show_tabular_gallery_li" class="ui-corner-top"><a onclick="displayTab('hikashop_small_image');" href="javascript:void(0);"><?php echo JText::_('Gallery');?></a></li>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<li id="hikashop_show_tabular_comment_li" class="ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_comment');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_COMMENT');?></a></li>
<li id="hikashop_show_tabular_new_comment_li" class="ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_new_comment');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></a></li>
<?php } ?>
</ul>
<?php
if(!empty($this->element->extraData->bottomBegin))
echo implode("\r\n",$this->element->extraData->bottomBegin);
?>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_description">
<div id="hikashop_product_description_main" class="hikashop_product_description_main">
<?php
echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
?>
</div>
<span id="hikashop_product_url_main" class="hikashop_product_url_main">
<?php
if (!empty ($this->element->product_url)) {
echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
}
?>
</span>
</div>
<?php if($hide_specs == 0){ ?>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_specification">
<?php
$this->setLayout('show_block_dimensions');
echo $this->loadTemplate();
if(!empty($this->fields)){
$this->setLayout('show_block_custom_main');
echo $this->loadTemplate();
}
?>
</div>
--------------------------
<div id="hikashop_small_image" 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 {
$img = $this->image->getThumbnail(@$image->file_path, array($height, $width), $image_options);
if($img->success) {
$id = null;
if($firstThunb) {
$id = 'hikashop_first_thumbnail';
$firstThunb = false;
}
$attr = 'onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image\', \''.$img->url.'\', '.$img->width.', '.$img->height.');"';
$html = '<img class="hikashop_child_image" title="" src="'.$img->url.'"/>';
echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'.$variant_name));
}
}
}
}
?>
</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<?php }
if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){ ?>
<form action="<?php echo hikashop_currentURL() ?>" method="post" name="hikashop_comment_form" id="hikashop_comment_form">
<?php
if(!empty($this->element->extraData->bottomMiddle))
echo implode("\r\n",$this->element->extraData->bottomMiddle);
?>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_comment">
<div id="hikashop_product_vote_listing" class="hikashop_product_vote_listing">
<?php
echo $layout_vote_listing;
?>
</div>
</div>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_new_comment">
<div id="hikashop_product_vote_form" class="hikashop_product_vote_form">
<?php
echo $layout_vote_form;
?>
</div>
</div>
</form>Please Log in or Create an account to join the conversation.
Hi,
I just look at your code and I see that the tab content could not work properly.
"hikashop_small_image" is too generic (is already used by HikaShop). More than that, the div does not have the class "hikashop_tab_content".
I will recommend you something like that :
<li id="hikashop_show_tabular_gallery_li" class="ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_small_image');" href="javascript:void(0);"><?php echo JText::_('Gallery');?></a></li><div class="hikashop_tabs_content" id="hikashop_show_tabular_small_image">
<div id="hikashop_small_image_in_tabs" class="hikashop_small_image_div">
<?php
// ....
?>
</div>
</div>Please Log in or Create an account to join the conversation.
That's great, thanks. I don't know really know anything about coding, so I'm not exactly sure what I've done or how it works, apart from a vague idea. But it works fine now so thanks for your help.
Best regards,
Curtis
Please Log in or Create an account to join the conversation.
