- Posts: 35
- Thank you received: 1
adding product thumbnails to tab display
- curtisbollington
-
Topic Author
- Offline
Less
More
13 years 1 week ago #124671
by curtisbollington
adding product thumbnails to tab display was created by curtisbollington
-- 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
-- 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.
13 years 1 week ago #124722
by Xavier
Replied by Xavier on topic adding product thumbnails to tab display
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.
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.
- curtisbollington
-
Topic Author
- Offline
Less
More
- Posts: 35
- Thank you received: 1
13 years 1 week ago - 13 years 1 week ago #124754
by curtisbollington
Replied by curtisbollington on topic adding product thumbnails to tab display
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:
Thanks, Curtis
Code:
<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>
Last edit: 13 years 1 week ago by Jerome. Reason: impossible to read the code correctly
Please Log in or Create an account to join the conversation.
13 years 1 week ago #124809
by Xavier
Replied by Xavier on topic adding product thumbnails to tab display
Thanks to replace:
By:
The id must be the same value than the value set in the li after the # in the href tag.
Code:
<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div">
Code:
<div id="hikashop_small_image" class="hikashop_small_image_div">
The id must be the same value than the value set in the li after the # in the href tag.
Please Log in or Create an account to join the conversation.
- curtisbollington
-
Topic Author
- Offline
Less
More
- Posts: 35
- Thank you received: 1
12 years 11 months ago - 12 years 11 months ago #126376
by curtisbollington
Replied by curtisbollington on topic adding product thumbnails to tab display
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:
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:
Code:
<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>
Last edit: 12 years 11 months ago by Jerome. Reason: [code] is nice !
Please Log in or Create an account to join the conversation.
12 years 11 months ago - 12 years 11 months ago #126476
by Jerome
Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.
Replied by Jerome on topic adding product thumbnails to tab display
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 :
After that, for the images which are display under the main one. You have to remove the block your copied from the view "show_block_img".
Regards,
PS : Please use the " [ code ] " tags for pasting code. Otherwise it is not readable and it is not possible to understand/read anything at this moment (so we couldn't help you correctly).
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 :
Code:
<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>
Code:
<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>
After that, for the images which are display under the main one. You have to remove the block your copied from the view "show_block_img".
Regards,
PS : Please use the " [ code ] " tags for pasting code. Otherwise it is not readable and it is not possible to understand/read anything at this moment (so we couldn't help you correctly).
Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.
Last edit: 12 years 11 months ago by Jerome.
The following user(s) said Thank You: curtisbollington
Please Log in or Create an account to join the conversation.
- curtisbollington
-
Topic Author
- Offline
Less
More
- Posts: 35
- Thank you received: 1
12 years 11 months ago #126957
by curtisbollington
Replied by curtisbollington on topic adding product thumbnails to tab display
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
Best regards,
Curtis
Please Log in or Create an account to join the conversation.
Time to create page: 0.209 seconds