Virtuemart 2 — листаем изображения пальцем

Работая над мобильной версией интернет-магазина на Virtuemart 2 я натолкнулся на  следующую задачу. Необходимо сделать вывод изображений товара таким образом, чтобы посетители, которые будут заходить на сайт с мобильных устройств, могли листать изображения пальцем.

Готовый скрипт я нашел достаточно быстро — на сайте fotorama.io. Осталось прикрутить это скрипт в карточку товара. В основной версии сайта изображения товаров выводятся при помощи плагина very simple image gallery. Настроено это все таким образом, что плагин берет изображения из папок, имя папки — артикул товара. Собственно, осталось дописать вывод изображений из этих папок в DIV fotoramы. Для этого нам необходимо редактировать файл вашего шаблона карточки товара — он лежит в папке /components/com_virtuemart/views/productdetails/tmpl/. Я сделал это следующим образом — в месте вывода изображений Virtuemart (echo $this->loadTemplate(‘images’);) выводим галерею fotorama, если у товара несколько изображений или стандартное изображение товара, если дополнительных картинок нет:

<?php
$ptf = $_SERVER['DOCUMENT_ROOT'].'/images/product/'.$this->product->product_sku.'/vsig_images/'; //здесь у меня хранятся изображения товаров
if (file_exists($ptf)) {
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link  href="http://fotorama.s3.amazonaws.com/4.6.2/fotorama.css" rel="stylesheet">
<script src="http://fotorama.s3.amazonaws.com/4.6.2/fotorama.js"></script> 
<div class="fotorama">
<?php
 
if ($handle = opendir($ptf)) {
 
    while (false !== ($file = readdir($handle))) { // получаем содержимое соответствующего каталога
        if (substr($file, strrpos($file, '.') + 1) == 'jpg') { // берем из каталога только картинки .jpg
                echo '<img src="http://site.com/images/product/'.$this->product->product_sku.'/vsig_images/'.$file.'">'; //site.com меняем на свой сайт
        }
    }
    closedir($handle); 
}
?> 
</div>
<?php }
else {
echo $this->loadTemplate('images'); //если директории с несколькими изображениями товара не существует - выводим стандартное изображение товара
}
?>

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

Категория: Virtuemart 2
Comments are disabled