Сегодня существуют несколько вариантов сделать на основе VirtueMart обзор товара с вращением на 360 градусов. Все они в основном используют скрипты последовательно вращающие серию снимков, обычно сделанных на поворотном столике. Либо второй вариант - вставка фрейма со стороннего сервиса типа Мегавизор (megavisor.com). При варианте Flash swf ролик также позволяет вращать товар, при этом в сам ролик можно "вшить" защиту от копирования, т.е. он будет показываться только на одном определенном домене.
Сегодня мы закончили внедрение модификации в код VirtueMart 2.6.0 и теперь он поддерживает swf. При этом стандартные jpg/png можно не добавлять.
Карточка категории
http://www.tovar-3d.ru/shop-store/kholodilnikiКарточка товара
http://www.tovar-3d.ru/shop-store/melkaya-bytovaya-tekhnika/bosch-tda5660-cardПримеры на нашем сайте Товар в 3D по ссылке
http://www.tovar-3d.ru/.
Итак по порядку, как все реализовать
1. Отредактируем administrator\components\com_virtuemart\views\product\tmpl\product_edit_information.php.
Добавим в код, отвечающий за вывод поля с артикулом в карточке товара поле для ввода названия файла swf.
Это еще один столбец. Название нашего поля product_swf. Рядом с текстовым блоков в админ панели выведется надпись «3D модель».
В нашем случае после строки 59 вставим код
<!--=========Код нашего поля для вставки ссылки на swf===-->
<td width="21%" >
<div style="text-align:right;font-weight:bold;">
<?php echo "3D модель " ?></div></td><td width="79%" height="2">
<input type="text" class="inputbox" name="product_swf" id="product_swf" value="<?php echo $this->product->product_swf; ?>" size="32" maxlength="64" /></td>
<!--================================!--->
Получился блок
<td>
<input type="text" class="inputbox" name="product_sku" id="product_sku" value="<?php echo $this->product->product_sku; ?>" size="32" maxlength="64" />
</td>
<!--=========Код нашего поля для вставки ссылки на swf===-->
<td width="21%" >
<div style="text-align:right;font-weight:bold;">
<?php echo "3D модель" ?></div></td><td width="79%" height="2">
<input type="text" class="inputbox" name="product_swf" id="product_swf" value="<?php echo $this->product->product_swf; ?>" size="32" maxlength="64" /></td>
<!--================================!--->
<td width="130px">
<span class="hastip" title="<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_FORM_GTIN_TIP')?>"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_FORM_GTIN')?></span>
</td>
2. Добавим наше новое поле в базу данных.
Зайдем в phpMyAdmin, выберем нашу базу, выберем таблицу virtuemart_products и добавим новое поле product_swf.
3. Редактируем файл administrator\components\com_virtuemart\helpers\shopfunctions.php.
В данном файле ищем строку
$filterArray = array('product_name',
После '`p`.product_sku'
Вставляем данные с нашим новым полем.
$filterArray = array('product_name', '`p`.created_on', '`p`.product_sku', '`p`.product_swf', 'product_s_desc', 'product_desc',
4. Редактируем файл administrator/components/com_virtuemart/tables/products.php
после строчки var $product_sku= ''; нужно дописать var $product_swf= '';
Собственно все. Осталось вывести Flash swf вместо стандартного фото формата jpg/png. В нашем случае в карточке товара мы не добавляем фото товара во вкладке «Изображения», т.е VirtueMart выдает стандартную заглушку no-image.
5. Для вывода флешки на странице категории отредактируем файл вывода default.php который находится в папке шаблона my_template/html/com_virtuemart/category/. Находим строчку <div class="product-image">
Исходный код
<div class="product-image">
<a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link; ?>">
<?php echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false); ?>
</a>
После правки код выглядит следующим образом:
<div class="product-image">
<a >
<div >
<object width="265" height="259" type="application/x-shockwave-flash" data="images/stories/virtuemart/product/<?php echo $product->product_swf?>">
<param name="wmode" value="transparent" />
</object>
</div>
</a>
6. Выведем флешку в карточке товара default_images.php который находится в папке шаблона my_template/html/com_virtuemart/productdetails/.
Находим строчку <div class="main-image">
Исходный код
<div class="tab-content">
<?php foreach($this->product->images as $image) {
$i++; ?>
<div id="tab_<?php echo $i; ?>" class="tab-pane<?php echo $i==1?' active':''; ?>">
<?php
// echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
echo $image->displayMediaThumb("",true,"rel='vm-additional-images'");
?>
</div>
<?php } ?>
</div>
После правки код выглядит следующим образом:
<div class="tab-content">
<object width="340" height="333" type="application/x-shockwave-flash" data="images/stories/virtuemart/product/<?php echo $this->product->product_sku2; ?>">
<param name="wmode" value="transparent" />
</object>
</div>
Ну на этом все. Осталось заполнить базу товаров. Flash файлы залиты по ftp в папку images/stories/virtuemart/product/
Будем признательны за объективную оценку и предложения.
08.08.2022, 15:09:59