0 Пользователей и 1 Гость просматривают эту тему.
  • 229 Ответов
  • 64294 Просмотров
*

Sergio

  • Захожу иногда
  • 54
  • 22 / 0
Реализовал на своем сайте, решил поделиться.
Предупреждаю сразу, что в кодировании полный ноль, поэтому если у кого-то не заработает, не спрашивайте почему.

1.Качаем бесплатный плагин Tabs&Slides v2.4 с сайта joomlaworks.gr
http://joomlaworks.googlecode.com/files/plugin_jw_ts-v2.4_j1.5.zip
2.Устанавливаем его и включаем через Расширения--Менеджер плагинов.
3.Находим в файле shop.product_details.php из administrator/components/com_virtuemart/html
строку (в моей версии 1.1.4 она была 451)
 
echo $tpl->fetch( '/product_details/'.$flypage . '.php' );

и заменяем на

/*Custom mod to alow plugin to scan yout product detail template*/
$template = $tpl->fetch( '/product_details/'.$flypage . '.php' );
$template = vmCommonHTML::ParseContentByPlugins( $template );
echo $template;
/*end custom mod*/

4.Разрешаем выполнение плагинов в описании товаров VirtueMart (Компоненты--Virtuemart--Настройки--Общие настройки, Параметр "Разрешить использование мамботов/плагинов в описании товаров").

5.Далее в описании товара вставляем
{tab=Название вашей вкладки 1}
Текст для вкладки1
{tab=Название вашей вкладки 2}
Текст для вкладки 2
{/tabs}
Общий текст для всех вкладок

Все!

Результат можно посмотреть здесь:
http://www.ascentis.ru/cat?page=shop.product_details&flypage=flypage.tpl&product_id=16&category_id=18

Автор решения ben01544, смотреть здесь:
http://forum.joomlaworks.gr/index.php?topic=1112.msg21565
*

yrygvay

  • Завсегдатай
  • 1293
  • 36 / 3
Огромное спасибо!
Смотрю....
*

remix8080

  • Захожу иногда
  • 340
  • 39 / 0
Sergio, спасибо за решение. Не так давно интересовался этим вопросом.
Тоже использовал плагин plugin_jw_ts-v2.4_j1.5, но как не крутил - табы не отображались :-(
Как выяснилось, проблема была в:
Код
$template = $tpl->fetch( '/product_details/'.$flypage . '.php' );
$template = vmCommonHTML::ParseContentByPlugins( $template );
echo $template;
(не делал такой замены)
*

yrygvay

  • Завсегдатай
  • 1293
  • 36 / 3
а как убрать точки между табами?
Смотрю....
*

Perla

  • Новичок
  • 8
  • 1 / 0
Если кому интересно, есть еще один способ сделать симпатичные табы на flypage.

1. Скачиваете и устанавливаете 2 плагина: Magic Tabs и Scriptgrator. Качаем последние версии с официального сайта http://www.greatjoomla.com/.
2. Активируем плагины в админке сайта в менеджере модулей. В настройках Scriptgrator рядом с Load jQuery to выбираем both.
3. Разрешаем VirtueMart использовать мамботы / плагины в описании товара и категории. (это в общих настройках Virtuemart).
4. Далее идем в flypage.tpl.php - components\com_virtuemart\themes\default\templates\product_details и вставляем туда код условного шаблона для табов (где вам будет удобнее выводить их определите сами):

<?php
$template = '{magictabs style=darkblue_rounded, tabwidth=131px}';
$template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE');
$template .= '::';
$template .= $product_description;
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $this->vmlistAdditionalImages( $product_id, $images );
/**$template .= '</td></tr></table>';*/
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_REVIEWS');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $product_reviews;
$template .= $product_reviewform;
/**$template .= '</td></tr></table>';*/
$template .= '{/magictabs}';
?>

5. Далее нужно в описании товара добавить код, чтобы сделать табы видимыми. Если вам, например, нужно информацию о товаре разделить на три закладки: О товаре, Условия доставки и Условия возврата. Идем в админку, открываем нужный товар и в поле "описание товара" вписываем следующее:

{magictabs mode=manually}
О товаре:: Товар в наличии. Сервисное обслуживание год. ...........................................
||||
Условия доставки:: 5 дней. Стоимость 200 руб. в пределах МКАД.
||||
Условия возврата:: Товар можно вернуть в течении 14 дней с момента покупки.
{/magictabs}

Все, теперь сохраняем и идем смотреть, что получилось на сайте в карточке этого товара.

Удачи.
*

wildweasel

  • Захожу иногда
  • 109
  • 29 / 5
Слишком много возни.
Достаточно маленького плагинчика к Jquery(можно пихать в код страницы):

Код
(function($) {
$(function() {

  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current');
        var p = $(this).parents('div.section');
        p.find('div.box').hide();
        p.find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });

})
})(jQuery)


К нему примерно такой CSS:

Код
/* tabs--------------------------------------------------------- */
.section {
width: auto;
margin: 0 0 30px;
}
ul.tabs {
height: 21px;
line-height: 21px;
list-style: none;
border-bottom: 1px solid #DDD;
background: #FFF;
margin:0;
}
.tabs li {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 0px;
cursor: pointer;
background: #E6E6FA;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
padding: 0 13px;
background: #FFFFDF;
}
.tabs li.current {
color: #444;
padding: 0 13px 0px;
height:21px;
  background: #FFFFFF;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #FFFFFF;
}
.box {
display: none;
border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
padding: 0 12px;
}
.box.visible {
display: block;
}

И в собственно флайпейдже:

Код
<div class="section">
<ul class="tabs">
<li class="current">Заголовок таба 1</li>
<li>Заголовок таба 2</li>
</ul>
<div class="box visible">
Содержимое таба 1
</div>
<div class="box">
Содержимое таба 2
</div>
</div>

ЗЫ: естественно, надо загружать Jquery. Можно через тот же Scriptegrator.
Летайте самолетами и сами по себе.
*

zzz

  • Новичок
  • 8
  • 0 / 0
как в такую вкладку засунуть JComments  ?
*

chezarre

  • Новичок
  • 9
  • 1 / 0
как в такую вкладку засунуть JComments  ?
Если кому интересно, есть еще один способ сделать симпатичные табы на flypage.

1. Скачиваете и устанавливаете 2 плагина: Magic Tabs и Scriptgrator. Качаем последние версии с официального сайта http://www.greatjoomla.com/.
2. Активируем плагины в админке сайта в менеджере модулей. В настройках Scriptgrator рядом с Load jQuery to выбираем both.
3. Разрешаем VirtueMart использовать мамботы / плагины в описании товара и категории. (это в общих настройках Virtuemart).
4. Далее идем в flypage.tpl.php - components\com_virtuemart\themes\default\templates\product_details и вставляем туда код условного шаблона для табов (где вам будет удобнее выводить их определите сами):

<?php
$template = '{magictabs style=darkblue_rounded, tabwidth=131px}';
$template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE');
$template .= '::';
$template .= $product_description;
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $this->vmlistAdditionalImages( $product_id, $images );
/**$template .= '</td></tr></table>';*/
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_REVIEWS');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $product_reviews;
$template .= $product_reviewform;
/**$template .= '</td></tr></table>';*/
$template .= '{/magictabs}';
?>

5. Далее нужно в описании товара добавить код, чтобы сделать табы видимыми. Если вам, например, нужно информацию о товаре разделить на три закладки: О товаре, Условия доставки и Условия возврата. Идем в админку, открываем нужный товар и в поле "описание товара" вписываем следующее:

{magictabs mode=manually}
О товаре:: Товар в наличии. Сервисное обслуживание год. ...........................................
||||
Условия доставки:: 5 дней. Стоимость 200 руб. в пределах МКАД.
||||
Условия возврата:: Товар можно вернуть в течении 14 дней с момента покупки.
{/magictabs}

Все, теперь сохраняем и идем смотреть, что получилось на сайте в карточке этого товара.

*

hardstep

  • Захожу иногда
  • 76
  • 5 / 0
где вам будет удобнее выводить их определите сами
и как их выводить?
если во flypage вставить
<?php echo $template ?>
то ничего не получается. плагин похоже не отрабатывает.


если в описании ввожу
Цитировать
{magictabs mode=manually}
О товаре:: Товар в наличии. Сервисное обслуживание год. ...........................................
||||
Условия доставки:: 5 дней. Стоимость 200 руб. в пределах МКАД.
||||
Условия возврата:: Товар можно вернуть в течении 14 дней с момента покупки.
{/magictabs}
то вижу 3 эти маленькие вкладки.
а как вывести основные вкладки?


Слишком много возни.
Достаточно маленького плагинчика к Jquery(можно пихать в код страницы):
в какой файл и в какое место вставлять этот код?

Цитировать
К нему примерно такой CSS:
а этот код куда вставлять?

« Последнее редактирование: 08.07.2010, 06:40:29 от hardstep »
*

hardstep

  • Захожу иногда
  • 76
  • 5 / 0
основные табы вставлять кодом
Код
<?php echo JHTML::_('content.prepare', $template); ?>
*

klara7

  • Захожу иногда
  • 304
  • 4 / 1
основные табы вставлять кодом
Код
<?php echo JHTML::_('content.prepare', $template); ?>
Уважаемый! А можно ли поподробнее?
*

hardstep

  • Захожу иногда
  • 76
  • 5 / 0
Уважаемый! А можно ли поподробнее?
делаете первые 4 пункта, которые написал Perla, а 5-ым пунктом будет следующее.
5. в файл components\com_virtuemart\themes\default\templates\product_details\flypage.tpl.php
после стоки
Код
<td colspan="2"><br /><?php echo $addtocart ?></td>
</tr>
добавляем строку
Код
<tr><td><?php echo JHTML::_('content.prepare', $template); ?></td><tr>
можно добавить и в любое другое место, где будет удобно. но прежде, чем вставлять в другое место, надо хотя бы знать HTML теги для таблиц.


*

nepowloe

  • Новичок
  • 4
  • 0 / 0
Если кому интересно, есть еще один способ сделать симпатичные табы на flypage.

Спасибо огромное! Идеальное решения для моем случая. Но с jcomment_овским аяксом какой-то казус случился: раздвижной край поля для комментария задвоился, у вас такой проблемы не было? Подскажите, как поправить?
*

nepowloe

  • Новичок
  • 4
  • 0 / 0
Цитировать
раздвижной край поля для комментария задвоился
Вопрос решен. Моя ошибка была, не нужно было два раза в одну страницу форму отправки комментария вставлять.

*

Aviva

  • Захожу иногда
  • 89
  • 0 / 0
Мне нужно в табы поместить Описание, Характеристики и Комплектацию. Кто знает как это делается?
Характеристики и Комплектация относятся к типам товаров.
« Последнее редактирование: 10.08.2010, 23:11:21 от Aviva »
*

skiv86

  • Осваиваюсь на форуме
  • 46
  • 0 / 0
с первым способом отказываются увеличиваться картики товара - у меня правда увеличение через yootheme'овский плагин
*

Sergio

  • Захожу иногда
  • 54
  • 22 / 0
с первым способом отказываются увеличиваться картики товара - у меня правда увеличение через yootheme'овский плагин
У VirtueMart часто бывают проблемы с lightbox в некоторых шаблонах из-за конфликта mootools. К плагину это может не иметь отношение. Лечится отключением mootools в шаблоне или в Виртумарте. Смотрите например, эту ветку http://joomlaforum.ru/index.php/topic,89544.0.html

У меня на всех шаблонах, где делал, табы работают и картинки открываются.
« Последнее редактирование: 30.08.2010, 09:22:38 от Sergio »
*

Dimir

  • Захожу иногда
  • 426
  • 13 / 1
Реализовал на своем сайте, решил поделиться.
Предупреждаю сразу, что в кодировании полный ноль, поэтому если у кого-то не заработает, не спрашивайте почему.

1.Качаем бесплатный плагин Tabs&Slides v2.4 с сайта joomlaworks.gr
http://joomlaworks.googlecode.com/files/plugin_jw_ts-v2.4_j1.5.zip
2.Устанавливаем его и включаем через Расширения--Менеджер плагинов.
3.Находим в файле shop.product_details.php из administrator/components/com_virtuemart/html
строку (в моей версии 1.1.4 она была 451)
 
echo $tpl->fetch( '/product_details/'.$flypage . '.php' );

и заменяем на

/*Custom mod to alow plugin to scan yout product detail template*/
$template = $tpl->fetch( '/product_details/'.$flypage . '.php' );
$template = vmCommonHTML::ParseContentByPlugins( $template );
echo $template;
/*end custom mod*/

4.Разрешаем выполнение плагинов в описании товаров VirtueMart (Компоненты--Virtuemart--Настройки--Общие настройки, Параметр "Разрешить использование мамботов/плагинов в описании товаров").

5.Далее в описании товара вставляем
{tab=Название вашей вкладки 1}
Текст для вкладки1
{tab=Название вашей вкладки 2}
Текст для вкладки 2
{/tabs}
Общий текст для всех вкладок

Все!

Результат можно посмотреть здесь:
http://www.ascentis.ru/cat?page=shop.product_details&flypage=flypage.tpl&product_id=16&category_id=18

Автор решения ben01544, смотреть здесь:
http://forum.joomlaworks.gr/index.php?topic=1112.msg21565

Скажите пожалуйста у меня в конце табов в самом низу появляется прямоугольник.Откуда он?
-==Dimir==-
*

Sergio

  • Захожу иногда
  • 54
  • 22 / 0
Скажите пожалуйста у меня в конце табов в самом низу появляется прямоугольник.Откуда он?
Мне кажется, стоит дать ссылку на страницу, а то сложно догадаться, о каком прямоугольнике идет речь.
*

Dimir

  • Захожу иногда
  • 426
  • 13 / 1
Мне кажется, стоит дать ссылку на страницу, а то сложно догадаться, о каком прямоугольнике идет речь.
Все исправил,спасибо.Дело было в коде.там почистил и все в норме.Есть еще вопрос как увеличить отступы вкладок.У меня просто много вкладок,и вот проблема,вкладки наезжают друг на друга.Ссылку не могу дать так как пока на локале

[вложение удалено Администратором]
« Последнее редактирование: 07.09.2010, 23:23:10 от Dimir »
-==Dimir==-
*

Dimir

  • Захожу иногда
  • 426
  • 13 / 1
ну что кто подскажет как увеличить промежуток между вкладками?
-==Dimir==-
*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
Отличное решение, все просто  ^-^ возник вопрос, а как в отдельную вкладку добавить фото товара. То есть сделал например вкладку, описание, тех. хар-ки и фото  ^-^
ааа, все увидел, придется выводить табы вторым решением, отличным от решения автора топа
« Последнее редактирование: 25.09.2010, 05:22:19 от Infosakh »
*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
Если кому интересно, есть еще один способ сделать симпатичные табы на flypage.

1. Скачиваете и устанавливаете 2 плагина: Magic Tabs и Scriptgrator. Качаем последние версии с официального сайта http://www.greatjoomla.com/.
2. Активируем плагины в админке сайта в менеджере модулей. В настройках Scriptgrator рядом с Load jQuery to выбираем both.
3. Разрешаем VirtueMart использовать мамботы / плагины в описании товара и категории. (это в общих настройках Virtuemart).
4. Далее идем в flypage.tpl.php - components\com_virtuemart\themes\default\templates\product_details и вставляем туда код условного шаблона для табов (где вам будет удобнее выводить их определите сами):

<?php
$template = '{magictabs style=darkblue_rounded, tabwidth=131px}';
$template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE');
$template .= '::';
$template .= $product_description;
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $this->vmlistAdditionalImages( $product_id, $images );
/**$template .= '</td></tr></table>';*/
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_REVIEWS');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $product_reviews;
$template .= $product_reviewform;
/**$template .= '</td></tr></table>';*/
$template .= '{/magictabs}';
?>

5. Далее нужно в описании товара добавить код, чтобы сделать табы видимыми. Если вам, например, нужно информацию о товаре разделить на три закладки: О товаре, Условия доставки и Условия возврата. Идем в админку, открываем нужный товар и в поле "описание товара" вписываем следующее:

{magictabs mode=manually}
О товаре:: Товар в наличии. Сервисное обслуживание год. ...........................................
||||
Условия доставки:: 5 дней. Стоимость 200 руб. в пределах МКАД.
||||
Условия возврата:: Товар можно вернуть в течении 14 дней с момента покупки.
{/magictabs}

Все, теперь сохраняем и идем смотреть, что получилось на сайте в карточке этого товара.

Удачи.

что то не пойму как вкладки сделать для фото и для комментариев. Вроде как раскоментировал строчки нужные, а что писать в коде?  ^-^
*

Infosakh

  • Завсегдатай
  • 1257
  • 67 / 0
вообщем сам разобрался, могу ведь когда приспичет  ^-^ ;D
*

SolopoV

  • Давно я тут
  • 548
  • 15 / 0
  • зеленею...
Слишком много возни.
Достаточно маленького плагинчика к Jquery(можно пихать в код страницы):

Код
(function($) {
$(function() {

  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current');
        var p = $(this).parents('div.section');
        p.find('div.box').hide();
        p.find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });

})
})(jQuery)


К нему примерно такой CSS:

Код
/* tabs--------------------------------------------------------- */
.section {
width: auto;
margin: 0 0 30px;
}
ul.tabs {
height: 21px;
line-height: 21px;
list-style: none;
border-bottom: 1px solid #DDD;
background: #FFF;
margin:0;
}
.tabs li {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 0px;
cursor: pointer;
background: #E6E6FA;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
padding: 0 13px;
background: #FFFFDF;
}
.tabs li.current {
color: #444;
padding: 0 13px 0px;
height:21px;
  background: #FFFFFF;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #FFFFFF;
}
.box {
display: none;
border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
padding: 0 12px;
}
.box.visible {
display: block;
}

И в собственно флайпейдже:

Код
<div class="section">
<ul class="tabs">
<li class="current">Заголовок таба 1</li>
<li>Заголовок таба 2</li>
</ul>
<div class="box visible">
Содержимое таба 1
</div>
<div class="box">
Содержимое таба 2
</div>
</div>

ЗЫ: естественно, надо загружать Jquery. Можно через тот же Scriptegrator.

Самое простое решение как мне кажется. Спасибо за наводку.
*

flyingspook

  • Moderator
  • 3590
  • 247 / 9
Ну во еще решение, тоже что и здесь только вид сбоку:
Код
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#tabs {margin: 0px auto;overflow: hidden;width: 204px;}
#tabs div {border-left: 1px solid #DDD;overflow: hidden;width: 205px;height: 22px;}
div a {display: block;float: left;width: 48px;border: 1px solid #DDD;border-left: none;text-align: center;text-decoration: none;}
div a:hover {background: #FBFBFB;}
ul {display: block;margin: 0px;padding: 0px;width: auto;height: auto;}
li {border: 1px solid #DDD;border-top: none;display: none;float: left;list-style-type: none;width: 195px;height: 50px;}
.display, .first {background: #EBFAFE;display: block;}
</style>

<script type="text/javascript">
  $(function(){
     $('div a').each(function(i){
        $(this).click(function(){
           $(this).toggleClass('display').siblings().removeClass('display first');
             $('ul').each(function(){
               $(this).find('li:eq('+i+')').toggleClass('display').siblings().removeClass('display first');
           });
       });
    });
});
</script>
<div id="tabs">
   <div>
       <a class="first" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
    </div>
   <ul>
        <li class="first">#text_tab_1</li><li>#text_tab_2</li><li>#text_tab_3</li><li>#text_tab_4</li>
    </ul>
</div>
*

Dimir

  • Захожу иногда
  • 426
  • 13 / 1
помогите мне с моим вопросом
-==Dimir==-
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

VirtueMart не может создать мини-изображение из .jpeg-файла

Автор Nick IntegraLL

Ответов: 12
Просмотров: 4778
Последний ответ 03.04.2019, 03:28:34
от Roki37
Настройки отображения товара

Автор wectra

Ответов: 2
Просмотров: 942
Последний ответ 12.07.2017, 22:12:27
от wectra
Несколько изображений для товара/ Лупа для изображения/ Magic Zoom

Автор antoha333

Ответов: 41
Просмотров: 23717
Последний ответ 13.11.2015, 16:08:16
от sonics
Описание категории опустить под товары

Автор angelo4ek-001

Ответов: 5
Просмотров: 1440
Последний ответ 12.11.2015, 01:53:39
от fsv
Как реализовать на VirtueMart такую карточку товара?

Автор AdmbVlad

Ответов: 0
Просмотров: 942
Последний ответ 14.10.2015, 17:01:55
от AdmbVlad