Создание табов (вкладок) в JoomShopping 4

Создание табов (вкладок) в JoomShopping 4

В интернет-магазине часто можно видеть вывод описания, отзывов, характеристик и т.д. в отдельных вкладках. Такой способ подачи информации существенно улучшает ее восприятие.

С включением фреймворка Bootstrap в Joomla! 3 создавать табы стало довольно просто просто.

И так, первым делом, если вы еще не сделали, необходимо подготовить ваш компонент JoomShopping к обновлениям, как это описано здесь. Если вы этого не сделаете, то после обновления все изменения будут утеряны.

Для создания табов необходимо отредактировать файл product_default.php, находящийся в папке по адресу: ваш_сайт/components/com_jshopping/templates/ваш_шаблон/product/ следующим образом:

И так, поскольку видео о товаре будет располагаться тоже во вкладке, то первое, что надо сделать, это удалить код вывода видео в месте изображения товара.

Находим в файле product_default.php следующий код и удаляем его:

<?php if (count($this->videos)){?>
      <?php foreach($this->videos as $k=>$video) { ?>
            <?php if ($video->video_code) { ?>
                  <div style="display:none" class="video_full" id="hide_video_<?php print $k?>"><?php echo $video->video_code?></div>
             <?php } else { ?>
                   <a style="display:none" class="video_full" id="hide_video_<?php print $k?>" href=""></a>
             <?php } ?>
       <?php } ?>
<?php }?>

далее находим следующий кусок кода и также удаляем его:

<?php print $this->_tmp_product_html_after_image_thumb;?>
      <?php if (count($this->videos)) { ?>
            <?php foreach($this->videos as $k=>$video) { ?>
                  <?php if ($video->video_code) { ?>
                        <a href="#" id="video_<?php print $k?>" onclick="showVideoCode(this.id);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 } 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 }?>
<?php print $this->_tmp_product_html_after_video;?>

теперь ищем эту строку:

<?php if ( (count($this->images)>1) || (count($this->videos) && count($this->images)) ) {?>

и меняем ее на эту:

<?php if (count($this->images)>1) { ?>

Также мы будем выносить в табы описание и характеристики товара. Для этого удалим этот код:

<div class="jshop_prod_description">
      <?php print $this->product->description; ?>
</div>

затем этот:

<?php if ($this->config->product_show_weight && $this->product->product_weight > 0){?>
      <div class="productweight"><?php print _JSHOP_WEIGHT?>: <span id="block_weight"><?php print formatweight($this->product->getWeight())?></span></div>
<?php } ?>

потом этот:

<?php if (is_array($this->product->extra_field)){?>
      <div class="extra_fields">
            <?php foreach($this->product->extra_field as $extra_field){?>
                  <?php if ($extra_field['grshow']){?>
                        <div class='block_efg'>
                              <div class='extra_fields_group'><?php print $extra_field['groupname']?></div>
                  <?php }?>
 
                        <div class="extra_fields_el">
                              <span class="extra_fields_name"><?php print $extra_field['name'];?></span><?php if ($extra_field['description']){?> 
                              <span class="extra_fields_description">
                                    <?php print $extra_field['description'];?>
                              </span>
                  <?php } ?>:
                  <span class="extra_fields_value">
                        <?php print $extra_field['value'];?>
                  </span>
            </div>
 
            <?php if ($extra_field['grshowclose']){?>
                  </div>
            <?php }?>
      <?php }?>
      </div>
<?php }?>
 
<?php print $this->_tmp_product_html_after_ef;?>

и, наконец, этот:

print $this->_tmp_product_html_before_review;
include(dirname(__FILE__)."/review.php");

Теперь, сразу после строки:

</form>

вставляем этот код:

<ul class="nav nav-tabs">
      <li class="active"><a href="#desc" data-toggle="tab"><h3><?php echo _JSHOP_DESCRIPTION ?></h3></a></li>
      <?php if (($this->config->product_show_weight && $this->product->product_weight > 0) or (is_array($this->product->extra_field))) { ?>
            <li><a href="#params" data-toggle="tab"><h3><?php echo _JSHOP_PANEL_PRODUCT_EXTRA_FIELDS?></h3></a></li>
      <?php } 
      if (count ($this->demofiles)) { ?>
            <li><a href="#demofiles" data-toggle="tab"><h3><?php echo _JSHOP_PANEL_PRODUCT_DEMO_FIELDS?></h3></a></li>
      <?php }
      if (count($this->videos)) { ?>
            <li><a href="#video" data-toggle="tab"><h3><?php echo _JSHOP_PANEL_PRODUCT_VIDEO_FIELDS?></h3></a></li>
      <?php } ?>
      <li><a href="#review" data-toggle="tab"><h3><?php echo _JSHOP_ADD_REVIEW_PRODUCT ?></h3></a></li>
</ul>
<div class="tab-content">
      <div class="tab-pane active" id="desc">
            <div class="jshop_prod_description">
                  <?php print $this->product->description; ?>
            </div>
      </div>
      <?php if (($this->config->product_show_weight && $this->product->product_weight > 0) or (is_array($this->product->extra_field))) { ?>
            <div class="tab-pane" id="params">
                  <div class="productweight">
                        <?php print _JSHOP_WEIGHT ?>: <span id="block_weight"><?php print formatweight($this->product->getWeight())?></span>
                  </div>
                  <div class="extra_fields">
                        <?php foreach($this->product->extra_field as $extra_field) { ?>
                              <?php if ($extra_field['grshow']) { ?>
                                    <div class='block_efg'>
                                          <div class='extra_fields_group'><?php print $extra_field['groupname']?></div>
                              <?php }?>
                              <div class="extra_fields_el">
                                    <span class="extra_fields_name"><?php print $extra_field['name'];?></span>
                                    <?php if ($extra_field['description']) { ?> 
                                          <span class="extra_fields_description"><?php print $extra_field['description'];?></span>
                                    <?php } ?>:
                                    <span class="extra_fields_value"><?php print $extra_field['value'];?></span>
                              </div> 
                              <?php if ($extra_field['grshowclose']) { ?>
                                    </div>
                              <?php } ?>
                        <?php } ?>
                  </div>
            </div>
      <?php }
      if (count ($this->demofiles)) { ?>
            <div class="tab-pane" id="demofiles">
                  <div id="list_product_demofiles">
                        <?php include(dirname(__FILE__)."/demofiles.php"); ?>
                  </div>
            </div>
      <?php }?>
      <?php if (count($this->videos)) { ?>
            <div class="tab-pane" id="video">
                  <?php foreach($this->videos as $k=>$video) { ?>
                        <?php if ($video->video_code) { ?>
                              <div class="video_full" id="hide_video_<?php echo $k?>"><?php echo $video->video_code?></div>
                        <?php } else { ?>
                              <a href="<?php echo $this->video_product_path?>/<?php echo $video->video_name?>" id="video_<?php echo $k?>" onclick="jQuery(this).media( { width: <?php echo $this->config->video_product_width;?>, height: <?php echo $this->config->video_product_height;?>} ); return false;">
                                    <img class="jshop_video_thumb" src="<?php echo $this->video_image_preview_path."/"; if ($video->video_preview) echo $video->video_preview; else echo 'video.gif'?>" alt="video" />
                              </a>
                        <?php } ?>
                  <?php } ?>
            </div>
      <?php } ?>
      <div class="tab-pane" id="review">
            <?php print $this->_tmp_product_html_before_review;
            include(dirname(__FILE__)."/review.php"); ?>
      </div>
</div>

ВНИМАНИЕ!
Если вы НЕ используете компонент JComments для управления комментариями, используйте этот код:

<ul class="nav nav-tabs">
      <li class="active"><a href="#desc" data-toggle="tab"><h3><?php echo _JSHOP_DESCRIPTION ?></h3></a></li>
      <?php if (($this->config->product_show_weight && $this->product->product_weight > 0) or (is_array($this->product->extra_field))) { ?>
            <li><a href="#params" data-toggle="tab"><h3><?php echo _JSHOP_PANEL_PRODUCT_EXTRA_FIELDS?></h3></a></li>
      <?php } 
      if (count ($this->demofiles)) { ?>
            <li><a href="#demofiles" data-toggle="tab"><h3><?php echo _JSHOP_PANEL_PRODUCT_DEMO_FIELDS?></h3></a></li>
      <?php }
      if (count($this->videos)) { ?>
            <li><a href="#video" data-toggle="tab"><h3><?php echo _JSHOP_PANEL_PRODUCT_VIDEO_FIELDS?></h3></a></li>
      <?php }
      if ($this->allow_review) { ?>
            <li><a href="#review" data-toggle="tab"><h3><?php echo _JSHOP_ADD_REVIEW_PRODUCT ?></h3></a></li>
      <?php } ?>
</ul>
<div class="tab-content">
      <div class="tab-pane active" id="desc">
            <div class="jshop_prod_description">
                  <?php print $this->product->description; ?>
            </div>
      </div>
      <?php if (($this->config->product_show_weight && $this->product->product_weight > 0) or (is_array($this->product->extra_field))) { ?>
            <div class="tab-pane" id="params">
                  <div class="productweight">
                        <?php print _JSHOP_WEIGHT ?>: <span id="block_weight"><?php print formatweight($this->product->getWeight())?></span>
                  </div>
            <div class="extra_fields">
                  <?php foreach($this->product->extra_field as $extra_field) { ?>
                        <?php if ($extra_field['grshow']) { ?>
                              <div class='block_efg'>
                                    <div class='extra_fields_group'><?php print $extra_field['groupname']?></div>
                        <?php }?>
                        <div class="extra_fields_el">
                              <span class="extra_fields_name"><?php print $extra_field['name'];?></span>
                              <?php if ($extra_field['description']) { ?> 
                                    <span class="extra_fields_description"><?php print $extra_field['description'];?></span>
                              <?php } ?>:
                              <span class="extra_fields_value"><?php print $extra_field['value'];?></span>
                         </div> 
                         <?php if ($extra_field['grshowclose']) { ?>
                               </div>
                         <?php } ?>
                   <?php } ?>
                   </div>
             </div>
             <?php }
             if (count ($this->demofiles)) { ?>
                   <div class="tab-pane" id="demofiles">
                         <div id="list_product_demofiles"><?php include(dirname(__FILE__)."/demofiles.php"); ?></div>
                   </div>
             <?php }?>
             <?php if (count($this->videos)) { ?>
                   <div class="tab-pane" id="video">
                         <?php foreach($this->videos as $k=>$video) { ?>
                                <?php if ($video->video_code) { ?>
                                     <div class="video_full" id="hide_video_<?php echo $k?>"><?php echo $video->video_code?></div>
                                <?php } else { ?>
                                      <a href="<?php echo $this->video_product_path?>/<?php echo $video->video_name?>" id="video_<?php echo $k?>" onclick="jQuery(this).media( { width: <?php echo $this->config->video_product_width;?>, height: <?php echo $this->config->video_product_height;?>} ); return false;">
                                            <img class="jshop_video_thumb" src="<?php echo $this->video_image_preview_path."/"; if ($video->video_preview) echo $video->video_preview; else echo 'video.gif'?>" alt="video" />
                                      </a>
                                <?php } ?>
                         <?php } ?>
                   </div>
             <?php } ?>
             <?php if ($this->allow_review){ ?>
                   <div class="tab-pane" id="review">
                         <?php print $this->_tmp_product_html_before_review;
                         include(dirname(__FILE__)."/review.php"); ?>
                   </div>
             <?php }?>
</div>

Теперь в папке ваш_сайт/components/com_jshopping/lang/override создадим файл ru-RU.php со следующим содержимым:

<?php

defined('_JEXEC') or die();

define('_JSHOP_PANEL_PRODUCT_EXTRA_FIELDS', 'Характеристики');
define('_JSHOP_PANEL_PRODUCT_DEMO_FIELDS', 'Инструкции');
define('_JSHOP_PANEL_PRODUCT_VIDEO_FIELDS', 'Видео');
?>

На этом все, если возникли вопросы, задавайте их в комментариях или на нашем форуме

Один комментарий на Создание табов (вкладок) в JoomShopping 4

Комментировать