Вверх

Блог
RSS лента

Как добавить вкладки (табы) в описание товара для VirtueMart 1.1.8

Vape Shop Эко Заправка

Расскажу вам как сделать закладки (Табы) в VirtueMart, которые вы можете добавлять в описание товара и будет отображаться в карточке товара.
Значит так, сначала вам нужно скачать два плагина "Magic Tabs" и "Scriptgrator" с официального сайта http://www.greatjoomla.com/ Либо от сюда Magic Tabs и Scriptgrator.
Потом зайти в "Расширения" далее "Менеджер плагинов" и там опубликовать (активировать) эти два плагина. В настройках Scriptgrator рядом с "Load jQuery to" выбираем "both".
Замечу что последние версии уже называются "Content - Core Design Magic Tabs plugin" и "System - Core Design Scriptegrator plugin".

Дальше в общих настройках VirtueMart нужно разрешить использование "мамботы / плагины" в описании товара и категории.
Теперь нужно немножко подправить шаблон flypage.tpl.php. Для этого вам нужно перейти по адресу components\com_virtuemart\themes\default\templates\product_details\ через ФТП, и открыть файлик flypage.tpl.php
В этом файле после строки <?php echo $addtocart ?> Вам необходимо вставить ниже следующий код:

  1. <?php
  2. $template = '{magictabs style=darkblue_rounded, tabwidth=131px}';
  3. $template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE');
  4. $template .= '::';
  5. $template .= $product_description;
  6. $template .= '||||';
  7. $template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
  8. $template .= '::';
  9. /**$template .= '<table><tr><td>';*/
  10. $template .= $this->vmlistAdditionalImages( $product_id, $images );
  11. /**$template .= '</td></tr></table>';*/
  12. $template .= '||||';
  13. $template .= $VM_LANG->_('PHPSHOP_REVIEWS');
  14. $template .= '::';
  15. /**$template .= '<table><tr><td>';*/
  16. $template .= $product_reviews;
  17. $template .= $product_reviewform;
  18. /**$template .= '</td></tr></table>';*/
  19. $template .= '{/magictabs}';
  20. ?>

А вот эту строку нужно вставить туда где бы вы хотели что бы выводились ваши табы (в этом же файле):

<?php echo JHTML::_('content.prepare', $template); ?>

Так же еще нужно закомментировать или удалить строку:

<?php echo $product_description ?>

Иначе у вас будут выводиться и ваши табы и просто содержимое описания товара.

Еще я удалил строки:

  1. <?php if( !empty($images)) { ?>
  2.  <div class="thumbnailListContainer">
  3.   <h5><?php echo $VM_LANG->_('PHPSHOP_MORE_IMAGES') ?></h5>
  4.   <?php echo $this->vmListAdditionalImages( $product_id, $images );?>
  5.  </div>
  6. ?php }  ?>
  7. <ul id="gk_product_tabs">
  8.  <li class="gk_product_tab_active"><span><?php echo $VM_LANG->_('PHPSHOP_FLYPAGE_LBL') ?></span></li>
  9.  <li><span><?php echo $VM_LANG->_('VM_PRODUCT_ENQUIRY_LBL') ?></span></li>
  10.  <li><span><?php echo $VM_LANG->_('PHPSHOP_REVIEWS') ?></span></li>
  11. </ul>

Так как эти строки отвечают за вывод дополнительных изображений, комментариев и еще какой то хрени, которую я и так вывожу в своих закладках и повторно их выводить не нужно.

И еще удалить нужно:

  1. <div id="gk_product_tab_3" class="gk_product_tab gk_unvisible">
  2.  <div> <?php echo $product_reviews ?> </div>
  3.  <div> <?php echo $product_reviewform ?> </div>
  4. </div>

А то иначе у вас будет две формы отправки мнений или по два ряда смайликов, в общем элементы будут задваиватся.

В описании товара, это уже в админке, нужно прописать ваши закладки код что бы ваши табы были видны, например для закладок "Инструкия", "Системные требования", "Еще какая то закладка", нужно прописать следующий код:

  1. Инструкия::
  2. Текст инструкции...
  3.  
  4. ||||
  5. Системные требования::
  6. Текст системных требований...
  7.  
  8. ||||
  9. Еще какая то закладка::
  10. Текст еще какой то закладки...

Количество и название табов может отличатся. Так же они могут быть различны в разных товарах.

Если сделать так как описано выше то тогда у вас будут выводится и ваши табы которые вы пишете в описании и стандартные табы, такие как "Мнения покупателей", "Просмотр дополнительных изображений". То есть стандартные будут выводится отдельно от ваших, когда вы перейдете например на закладку "Мнения покупателей" то ваши табы не будут видны.

Если же вы хотите что бы у вас в описании товара выводились просто ваши табы которые вы добавляете в админке, то тогда не нужно вставлять код в файл flypage.tpl.php, а просто установить два плагина (Magic Tabs и Scriptgrator) и в каждом товаре пишите следующее:

  1. {magictabs mode=manually}
  2. Закладка 1::
  3. Текст Текст Текст Текст Текст Текст Текст Текст
  4. Текст Текст Текст
  5.  
  6. ||||
  7. Закладка 2::
  8. Текст Текст Текст Текст Текст
  9.  
  10. ||||
  11. Закладка 3::
  12. Текст Текст Текст Текст Текст
  13. {/magictabs}

Вот вроде и всё. Надеюсь что ничего не забыл и помог вам. А главное с экономил время :)

Ваша оценка: Пусто Средняя: 4.8 (17 votes)

Комментарии

Отзывы в табах

Можно ли в один из табов разместить отзывы?
Спасибо.

Плагины установил, а вот

Плагины установил, а вот папки themes нет и файл найти не могу. Может такое быть?

Всякое случается, но вам

Всякое случается, но вам нужно сделать так что бы папка всё была. Может не там смотрите?

Можно, таким же способом как

Можно, таким же способом как описано в статье, только вставьте вывод комментариев в один из блоков.

Немного глючит

Сделал всё по инструкции, всё вродебы работает, табы отлично, шустро переключаются, но тут возникла такая проблема, у меня под товаром выводится ещё мнение покупателей и недавно просмотренные товары, а уже под ними выводится текст с описания товара, только без табов, а про100 обыкновенным текстом, не сталкивались с такой проблемой? Может кто-то может подсказать что закоментировать или куда хоть копать?

Я вам в аське уже рассказал

Я вам в аське уже рассказал вашу ошибку. Просто нужно внимательно читать статью. И нужно было удалить то что я написал в статье.

Этот скрипт выводит в табы,

5

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

Эти табы будут отображаться

4

Эти табы будут отображаться всегда или только когда "опишешь" их в описании?

подскажите плиз, интегрировал

подскажите плиз, интегрировал табы во флайпейдж, все отлично, но не могу в описание товара вставить видео с ютуба. код обрезает вообще, просто выкидывает с текста весь тег iframe(( что делать?

Элементарно Ватсон, нужно

Элементарно Ватсон, нужно почитать другую статью на моем блоге http://x3m-slider.org.ua/blog/content/vstavlyaem-video-v-opisanie-tovara... и узнаете как сделать так что бы можно было вставлять видео в описание товара :)

Проблема поднятия экрана наверх при переключении вкладок

5

Обалденный ФАК и за оперативность ответа на комментарии автора.Спасибо.
Все предыдущие проблемы решились, осталась одна непонятная: при переключении вкладок экран поднимается на самый верх, как будто нажимается кнопка "top" как в некоторых шаблонах. Не подскажете ли, автор, что за шняжка такая ? :)
Например здесь http://dedal2.a1en.ru/Anviz-D200.html

Я смотрел сайт мозилой, у

Я смотрел сайт мозилой, у меня не подскакивает вверх, всё путем отображается, может быть из-за того что в закладках используется решетка #
А так даже и не догадываюсь чего оно где то скачет.

Еще одна проблема, меню уползает вниз при рабочем плагине

5

Непонятная проблема, на некоторых товарах в виртуамарте при добавлении в код шаблона этих табов,модуль меню, располагавшийся на правой или левой стороне сайта сползает под табы в основное тело магазина. Пока не понял взаимосвязи и как решить, у кого нить было такое ? :(

Если что то куда то уползает

Если что то куда то уползает значит это проблема с верткой. Скорей всего контейнеру с табами или нижнему контейнеру в стилях нужно прописать clear: both;

Лишняя пустая вкладка

5

Всё хорошо, только непонятно откуда берется пустая вкладка без названия, ярлычек от которой наполовину обрезан по горизонтали. В коде ее не вижу, кто нить сталкивался с этим ?

Там по умолчанию идет три

Там по умолчанию идет три вкладки, комменты, описание и изображения, у вас еще четвертая пустая что ли?

Пошло все ок

VirtueMart 1.1.9 stable

1. установил плуги. активировал.(сделал)
2. разрешить использование "мамботы / плагины" в описании товара и категории. (сделал)
3. немножко подправить шаблон flypage.tpl.php (сделал)
4. удалить строки. (сделал)
5. больше ниче не дела, хотя там ишо (В описании товара, это уже в админке, нужно прописать ваши закладки код что бы ваши табы были видны, например для закладок "Инструкия", "Системные требования", "Еще какая то закладка", нужно прописать следующий код:) этого не делал все работает.

VirtueMart 1.1.9

Прочитала комментарии, не у одной меня строки, для замены не нашлись, но перенос вверх не помог.Это флайпейдж.

  1. <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
  2. mm_showMyFileName(__FILE__);
  3.  ?>
  4.  
  5. <?php echo $buttons_header // The PDF, Email and Print buttons ?>
  6.                                 <?php
  7. $template = '{magictabs style=darkblue_rounded, tabwidth=131px}';
  8. $template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE');
  9. $template .= '::';
  10. $template .= $product_description;
  11. $template .= '||||';
  12. $template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
  13. $template .= '::';
  14. /**$template .= '<table><tr><td>';*/
  15. $template .= $this->vmlistAdditionalImages( $product_id, $images );
  16. /**$template .= '</td></tr></table>';*/
  17. $template .= '||||';
  18. $template .= $VM_LANG->_('PHPSHOP_REVIEWS');
  19. $template .= '::';
  20. /**$template .= '<table><tr><td>';*/
  21. $template .= $product_reviews;
  22. $template .= $product_reviewform;
  23. /**$template .= '</td></tr></table>';*/
  24. $template .= '{/magictabs}';
  25. ?>
  26. <?php echo JHTML::_('content.prepare', $template); ?>
  27.  
  28. <?php
  29. if( $this->get_cfg( 'showPathway' )) {
  30.         echo "<div class=\"pathway\">$navigation_pathway</div>";
  31. }
  32. if( $this->get_cfg( 'product_navigation', 1 )) {
  33.         if( !empty( $previous_product )) {
  34.                 echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>';
  35.         }
  36.         if( !empty( $next_product )) {         
  37.                 echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>';
  38.         }
  39. }
  40. ?>
  41. <br style="clear:both;" />
  42. <table border="0" style="width: 100%;">
  43.   <tbody>
  44.         <tr>
  45. <?php  if( $this->get_cfg('showManufacturerLink') ) { $rowspan = 5; } else { $rowspan = 4; } ?>
  46.           <td width="33%" rowspan="<?php echo $rowspan; ?>" valign="top"><br/>
  47.                 <?php echo urldecode( $product_image ) ?><br/><br/><?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?></td>
  48.           <td rowspan="1" colspan="2">
  49.           <h1><?php echo $product_name ?> <?php echo $edit_link ?></h1>{socbuttons}
  50.           </td>
  51.         </tr>
  52.         <?php if( $this->get_cfg('showManufacturerLink')) { ?>
  53.                 <tr>
  54.                   <td rowspan="1" colspan="2"><?php echo $manufacturer_link ?><br /></td>
  55.                 </tr>
  56.         <?php } ?>
  57.         <tr>
  58.       <td width="33%" valign="top" align="left">
  59.         <?php echo $product_price_lbl ?>
  60.         <?php echo $product_price ?><br /></td>
  61.       <td valign="top"><?php echo $product_packaging ?><br /></td>
  62.         </tr>
  63.         <tr>
  64.           <td colspan="2"><?php echo $ask_seller ?></td>
  65.         </tr>
  66.         <tr>
  67.           <td rowspan="1" colspan="2"><hr />
  68.                 <?php echo $product_description ?><br/>
  69.                 <span style="font-style: italic;"><?php echo $file_list ?></span>
  70.           </td>
  71.         </tr>
  72.         <tr>
  73.           <td><?php
  74.                         if( $this->get_cfg( 'showAvailability' )) {
  75.                                 echo $product_availability;
  76.                         }
  77.                         ?><br />
  78.           </td>
  79.           <td colspan="2"><br /><?php echo $addtocart ?></td>
  80.         </tr>
  81.  
  82.        
  83.         <tr>
  84.           <td colspan="3"><?php echo $product_type ?></td>
  85.         </tr>
  86.         <tr>
  87.           <td colspan="3"><hr /><?php echo $product_reviews ?></td>
  88.         </tr>
  89.         <tr>
  90.           <td colspan="3"><?php echo $product_reviewform ?><br /></td>
  91.         </tr>
  92.         <tr>
  93.           <td colspan="3"><?php echo $related_products ?><br />
  94.            </td>
  95.         </tr>
  96.        
  97.        
  98.        
  99.         <?php if( $this->get_cfg('showVendorLink')) { ?>
  100.                 <tr>
  101.                   <td colspan="3"><div style="text-align: center;"><?php echo $vendor_link ?><br /></div><br /></td>
  102.                 </tr>
  103.         <?php  } ?>
  104.         <?php if( isset($paypalLogo)) : ?>
  105.                 <tr>
  106.                         <td colspan="3" align="center">
  107.                                 <?php echo $paypalLogo ?>
  108.                         </td>
  109.                 </tr>
  110.         <?php endif;?>
  111.   </tbody>
  112. </table>
  113. <?php
  114. if( !empty( $recent_products )) { ?>
  115.         <div class="vmRecent">
  116.         <?php echo $recent_products; ?>
  117.         </div>
  118. <?php
  119. }
  120. if( !empty( $navigation_childlist )) { ?>
  121.         <?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br />
  122.         <?php echo $navigation_childlist ?><br style="clear:both"/>
  123. <?php
  124. } ?>

Как мне сделать, чтобы в табах выводились и стандартные вкладки и кастомные? После кнопки "добавить в корзину".

Для начала вопрос. Какие вы

Для начала вопрос. Какие вы строки искали для замены? Я про замену вообще ничего не писал.
Строка "Добавить в корзину" у вас есть <td colspan="2"><br /><?php echo $addtocart ?></td>
Вот после этого и нужно вставить тот код который я написал в статье.
Вообще внимательно читайте и в точности повторяйте и будет вам счастье!!!

Если еще вкладки не

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

Нужна помощь!!!!

5

Возникла нужда создания 3 вкладок в магазине JoomShopping (описание, характеристики, отзывы) , подскажите плиз как это сделать. Все что нахожу в нете - только под VirtueMart . А из-за большого количества инфы - описание к товару выглядит весьма устрашающе. На джумлу кинул два плагина Magic Tabs и Scriptgrator. Но настроить пока не догоню как. Сам я не программер, и догнать как это сделать пока не могу. Заранее вам благодарен.

К сожалению помочь с

К сожалению помочь с JoomShopping я не смогу, так как не когда с этим компонентом не сталкивался.

А чем он лучше VirtueMart-а?

Кое-что не получается.

Во первых хочу вас поблагодарить за столь подробную инструкцию на русском языке, мне помогло. И хочу попросить помощи...

Не получился у меня первый способ. - там где мы обходимся без "{magictabs mode=manually}"

Дело в том, что я не могу закоментировать и удалить следующее, тк в моём flypage просто напросто нет этих вот букв ->

  1. "
  2. ?php if( !empty($images)) { ?>
  3.  <div class="thumbnailListContainer">
  4.   <h5><?php echo $VM_LANG->_('PHPSHOP_MORE_IMAGES') ?></h5>
  5.   <?php echo $this->vmListAdditionalImages( $product_id, $images );?>
  6.  </div>
  7. ?php }  ?>
  8. <ul id="gk_product_tabs">
  9.  <li class="gk_product_tab_active"><span><?php echo $VM_LANG->_('PHPSHOP_FLYPAGE_LBL') ?></span></li>
  10.  <li><span><?php echo $VM_LANG->_('VM_PRODUCT_ENQUIRY_LBL') ?></span></li>
  11.  <li><span><?php echo $VM_LANG->_('PHPSHOP_REVIEWS') ?></span></li>
  12. </ul>
  13.  
  14. <div id="gk_product_tab_3" class="gk_product_tab gk_unvisible">
  15.  <div> <?php echo $product_reviews ?> </div>
  16.  <div> <?php echo $product_reviewform ?> </div>
  17. </div>
  18. "

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

вот прикладываю ссылку на то что получилось:
http://s001.radikal.ru/i195/1107/ab/79e609f0a787.jpg
и свой flypage:
http://zalil.ru/31491312

Скорей всего у вас не та

Скорей всего у вас не та версия виртуал марта, а еще вероятней всего что у вас не такой шаблон

Попробуйте:

  1.                                 <?php
  2. $template = '{magictabs style=darkblue_rounded, tabwidth=131px}';
  3. $template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE');
  4. $template .= '::';
  5. $template .= $product_description;
  6. $template .= '||||';
  7. $template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
  8. $template .= '::';
  9. /**$template .= '<table><tr><td>';*/
  10. $template .= $this->vmlistAdditionalImages( $product_id, $images );
  11. /**$template .= '</td></tr></table>';*/
  12. $template .= '||||';
  13. $template .= $VM_LANG->_('PHPSHOP_REVIEWS');
  14. $template .= '::';
  15. /**$template .= '<table><tr><td>';*/
  16. $template .= $product_reviews;
  17. $template .= $product_reviewform;
  18. /**$template .= '</td></tr></table>';*/
  19. $template .= '{/magictabs}';
  20. ?>

Перенести выше например под <?php echo $buttons_header // The PDF, Email and Print buttons ?>
У вас почему адд_кард идет после вывода описания, изображения итд.
Все те коды которые я писал за комментировать у вас есть только в других местах. Если после переноса кода выше ничего не получится то нужно копать дальше. тяжело удаленно разбираться.
Если получиться то найдете в своем коде <?php echo $product_description ?> и тд и за комментируете его.

проблема с отображением...

Здраствуйте, у меня проблема с отображением первого варианта закладок. Проделал его на локальном компе все работает.Установил на сервер проделал тоже самое...Ничего не отображается....Помогите плиз....В чем может быть косяк???

Версии виртуал марта те же

Версии виртуал марта те же самые что и на локале?
Ставили по новой или просто перенесли на сервер?
Повторите все шаги сначала только на чистой джумле и только испеченом вирталмарте.
А то так гадать можно долго, причин может быть много

Главная | Портфолио | Услуги | Контакты | Блог