Пятница, 23 Декабрь 2011 18:03

Расширяем функциональность Virtuemart. Часть 3. Фотогалерея для товара.

Оцените материал
(6 голосов)

Закроем еще один популярный среди новичков вопрос: как сделать фотогалерею для товара Virtuemart? Я тоже согласен с тем, что девственная страница flypage выглядит убого, а представление изображений товара — и того хуже. Исправим положение. В этом посте я опишу процесс создания фотогалереи для изображений товаров во flypage-странице Virtuemart. У нас получится вот такая красивая галерея:

Фотогалерея для товаров Virtuemart

При нажатии на миниатюры ничго не выползает в лайтбоксе. Меняется большой слайд. Неограниченное количество картинок. Используется плагин YooGallery. Поехали!

Внедрение фотогалереи YooGallery в товар Virtuemart дело непростое. Однако, оно стоящее и вполне осуществимое. В первую очередь, нам нужно где-нибудь скачать плагин YooGallery. Поскольку он платный, на своем сайте я его не вывешивал, но, думаю, для вас найти способ его получить проблемы не составит. Например, можно накинуть цену заказчику и купить... продолжать не буду. Плагин YooGallery работает при вводе в контент специального кода, в котором указывается путь до папки с картинками и другие параметры. Допустим, размер больших фотографий в ширину будет 400 пикселей с максимальным количеством миниатюр — 9 штук. В этом случае, лучше всего нам подойдет такой код галереи: {yoogallery src=[/путь_к_папке_с_картинками/] width=[125] count=[9]}

Еще можно поиграться с настройками плагина YooGallery. Вот какие поставил я:

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

Показать/скрыть html4strict код

Посмотреть код
  1. <tr class="row1">
  2. <td width="29%" valign="top">
  3. <div style="text-align:right;font-weight:bold;">Папка картинок:</div>
  4. </td>
  5. <td width="71%" >
  6. <input type="text" class="inputbox" name="product_img_folder" size="30" value="/images/vmgallery/заменить/" /><br />(Сейчас — &quot;<?php echo $db->sf("product_img_folder"); ?>&quot;)
  7. </td>
  8. </tr>

Выглядит это на странице вот так:

1561815151

Поле уже заполнено. Нужно только заменить слово (угадайте какое) на название папки. Рекомендую папки называть без пробелов, только английскими строчными буквами и цифрами. Регистр имеет значение, пробелы будут приводить к ошибке.

Следующий этап — внедряем галерею в flypage-страницу (components/com_virtuemart/themes/default/templates/product_details)

{yoogallery src=[<?php echo $product_img_folder ?>] width=[125] count=[9]}

Затем заходим в настройки магазина, ставим галочку напротив Разрешить использование мамботов / плагинов в описании товара и категории? Сохраняем изменения.

Наша следующая задача заставить галерею работать вне материала. Для этого открываем свою страницу flypage, ищем mm_showMyFileName(__FILE__); (вторая строка), под ней вставляем ob_start ();

Стускаемся в самый низ файла, вставляем туда вот это:

Показать/скрыть php код

Посмотреть код
  1. <?php
  2. $contenthtml=ob_get_contents();
  3. ob_end_clean();
  4. echo JHTML::_('content.prepare',$contenthtml);
  5. ?>

Следующий этап — заводим новый товар, создаем папку с любым названием в images/vmgallery, загружаем туда несколько картинок шириной 400 пикселей, вписываем в поле название папки с картинками вместо слова заменить. Сохраняем товар.

Наслаждаемся галереей.

Прочитано 7366 раз
Твитнуть

Комментарии   

 
Артем
0 #4 Артем 11.04.2012 15:36
Сорри. На мой взгляд, симпл галлери — говно.
Цитировать
 
 
Алексей Владимирович
+2 #3 Алексей Владимирович 02.04.2012 03:49
Кстати можно не модифицировать код
Рецепт такой:
1.Включить поддержку мамбоботов / плагинов в VM
2.Установить Плагин Simple Image Gallery (есть и платная Про) а есть бесплатная.
http://extensions.joomla.org/extensions/photos-a-images/photo-gallery/1468
В настройках указать корневую папку где он будет искать папки для фото-галерей
3.Установить редактор JCE 2
http://extensions.joomla.org/extensions/edition/editors/88
4. Сам редактор позволит писать довольно приличное описание товару с возможностью вставки всего чего угодно а красивая удобная фото галерея {gallery}имя папки относительно коневой указанной в настройках плагина SIG{/gallery}
PS Аналогично можно подключат и видео с Ютьба и т.п. с помощью бесплатного плагина AllVideo
(C) (тут была ссылка на какой-то некрасивый сайт) — исправлено автором блога, ибо нефиг спамить
Цитировать
 
 
Артем
0 #2 Артем 24.01.2012 00:57
Жду выхода JComments под джумлу 1.7. Пока ничего приличного нет. Только эти. Спасибо.
Цитировать
 
 
Денис
0 #1 Денис 21.01.2012 23:53
Спасибо большое! Интересные посты, всё понятно, сам давно работаю с этим компонентом, но не всё ещё изучил! Буду постоянно читать:-)
З.Ы. капча эта блин надоела уже) попроще нету))
Цитировать
 

Добавить комментарий

Защитный код
Обновить

joomla 1.7

Не получаются доработки?

Становитесь партнером студии Millor! Быстро и недорого эти ребята помогут решить практически любую проблему.

Хотите подзаработать?

Если да, то вам сюда! Партнерская программа студии MyWebSite. Получи 20% за каждого клиента! Работаем по всей России и СНГ!

Рекламное место свободно.