Я у себя решил сделать без подключения сторонних плагинов, но в тоже время чтобы было удобно табы добавлять.
Табы добавляются с помощью записи типа {intab title=Название таба}Контент таба{/intab} в полное описание товара
Шаблон сайта и магазина написаны на bootstrap поэтому разметка табов оттуда, подключаемый JavaScript не указываю
Так как в моем случае требовалось вынести в карточку товара одно фото, а остальные поместить в таб, то будет дополнительный код для этого
файл шаблона product_default.php
Вставляем в самый верх
$regex = "#{intab(.*?)}(.*?){/intab}#s";
preg_match_all($regex, $this->product->description, $matches);
$count = count( $matches[0] );
$matches[0]=str_replace(array('<p>{','}</p>','<div>{','}</div>'),array('{','}','{','}'),$matches[0]);
if ( $count ) {
for ( $i=0; $i < $count; $i++ ) {
$intab_titles[] = preg_replace($regex,"\\1",str_replace('title=','',$matches[0][$i]));
$intab_contents[] = preg_replace($regex,"\\2",$matches[0][$i]);
}
$this->product->description = preg_replace( $regex, '', $this->product->description );
}
далее разметка табов в нужном вам месте
<ul class="nav nav-tabs">
<li class="active"><a href="#description" data-toggle="tab">Описание</a></li>
<?php if (count($this->images)>1) {?>
<li><a href="#photo" data-toggle="tab">Фото</a></li>
<?php }?>
<?php if (count($this->videos)){?>
<li><a href="#video" data-toggle="tab">Видео</a></li>
<?php }?>
<?php if ($count){
foreach ($intab_titles as $n=>$intab_title) { ?>
<li><a href="#intab<?php echo $n; ?>" data-toggle="tab"><?php echo $intab_title; ?></a></li>
<?php }
}?>
</ul>
<div class="tab-content">
<div class="tab-pane active fade" id="description"><?php print $this->product->description; ?></div>
<?php if (count($this->images)>1) {?>
<div class="tab-pane fade" id="photo">
<?php print $this->_tmp_product_html_before_image_thumb;?>
<ul class="thumbnails">
<?php array_shift($this->images); foreach($this->images as $k=>$image){?>
<li class="span2">
<a href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" class="colorbox thumbnail">
<img rel="border" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
</a>
</li>
<?php }?>
</ul>
<?php print $this->_tmp_product_html_after_image_thumb;?>
</div>
<?php }?>
<?php if (count($this->videos)){?>
<div class="tab-pane fade" id="video">
<?php foreach($this->videos as $k=>$video) {
if ($video->video_code) { ?>
<a href="<?php echo $video->video_code?>" id="video_<?php print $k?>" onclick="jQuery.colorbox({iframe:true, innerWidth:425, innerHeight:344, href:'<?php echo $video->video_code?>'});return false;">
<img class="border" src="<?php print $this->video_image_preview_path."/"; if ($video->video_preview) print $video->video_preview; else print 'video.gif'?>" alt="video" />
</a>
<?php } else { ?>
<a href="<?php print $this->video_product_path?>/<?php print $video->video_name?>" id="video_<?php print $k?>" onclick="showVideo(this.id, '<?php print $this->config->video_product_width;?>', '<?php print $this->config->video_product_height;?>'); return false;">
<img class="jshop_video_thumb" src="<?php print $this->video_image_preview_path."/"; if ($video->video_preview) print $video->video_preview; else print 'video.gif'?>" alt="video" />
</a>
<?php } ?>
<?php } ?>
<?php print $this->_tmp_product_html_after_video;?>
</div>
<?php }?>
<?php if ($count){
foreach ($intab_contents as $n=>$intab_content) { ?>
<div class="tab-pane fade" id="intab<?php echo $n; ?>">
<?php echo $intab_content; ?>
</div>
<?php }
}?>
</div>
код для вставки только одного фото
<?php if(!count($this->images)){?>
<img class="img-polaroid" id="main_image" src="<?php print $this->image_product_path?>/<?php print $this->noimage?>" alt="<?php print htmlspecialchars($this->product->name)?>" />
<?php }else{?>
<?php $image = $this->images[0];?>
<a class="colorbox" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>">
<img class="img-polaroid" src = "<?php print $this->image_product_path?>/<?php print $image->image_name;?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
<div class="text_zoom">
<i class="icon-zoom-in"></i> <?php echo _JSHOP_ZOOM_IMAGE?>
</div>
</a>
<?php }?>
Если будете использовать это у себя, то скорее всего отображение и Lightbox будут у вас не такими, как вы ожидаете ... у меня много своих классов прописано .. вам нужно будет прописать свои
31.10.2022, 10:05:51