Делаем витрину (список товаров) для virtuemart, часть 2
Добрый день, читатели моего блога. Здесь вы найдете ответы на некоторые вопросы, которые мучают вебмастеров. Сегодня речь пойдет о бесплатном компоненте (virtuemart 1.1.5-9) для joomla 1.5-2.5, а конкретно о витрине виртуемарта. Для начинающего вебмастера, фрилансера, для того кто решил связать свою деятельность со сборкой магазинов на virtuemart данная статья будет полезна.
Основными элементами любого современного интернет магазина, являются: 1) витрина - список товаров 2) Карточка товара - описание товара (цена, производитель и т.д.) 3) список категорий товаров магазина, производителей 4) Корзина. Сегодня мы будем разбираться с витриной. Эта статья является логическим продолжением, того о чем я писал ранее. В предыдущей статье (верстка витрины для virtuemart) было рассмотрено, как можно из макета витрины нарисованного в фотошопе получить готовую верстку. В статье по шагам было рассмотрено создание html документа и оформление его CSS стилями, проще говоря, верстка макета витрины (списка товаров) магазина. В этой статье мы будем "натягивать" верстку витрины на движок магазина, формировать шаблон витрины.
Как поменять шаблон витрины в админке virtuemart. Управление шаблонами виртуемарта.
В предыдущей статье из рубрики virtuemart мы рассмотрели, как сверстать макет каталога будущего интернет-магазина на компоненте virtuemart. Макет витрины выглядит следующим образом.

Для начала нам необходимо настроить параметры отображения каталога. Заходим в админку joomla (_http://вашсайт/administrator), далее в компонентах выбираем virtuemart. Слева в панели открываем вкладку настройки и выбираем пункт настройки. На вновь открывшейся странице справа на вкладке "сайт" в группе настроек "Вид" указываем необходимые параметры.
Для нашего случая нужно выбрать: шаблон отображения товара в списке - browse_3; Количество товаров в строке - 3. Такие параметры требует макет, у нас 3 товара в строке.
Кроме этого параметры отображения можно задавать для каждой категории отдельно.
Около списка шаблонов нажмите на ссылку "настройки" откроется страница, где можно выбрать шаблон отображения списка товаров.
Для вновь созданных категорий параметры отображения каталога принимаются как в главных настройках. Если вам нужно настройки сделать отличными от основных, тогда выберете в компоненте виртуемарт слева вкладку "товары" -> "список категорий". На вновь открывшейся странице выбираем нужную категорию, далее на вкладке "Информация о категории" внизу выбираем нужные параметры.
Файлы, которые имеют отношение к отображению списка товаров в virtuemart.
Внешний вид магазина частично определяется настройками, которые можно изменить через админку, а в основном вид можно менять через шаблоны. Шаблоны это общепринятый способ объектно-ориентированного подхода в программировании. Это очень удобно, поскольку выборка данных из базы и обработка происходит в отдельном файле, а в шаблоне нет ничего лишнего кроме html тэгов и данных, которые нужно вывести. Так, например, шаблон формы добавления в корзину выглядит следующим образом:
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); mm_showMyFileName(__FILE__); $button_lbl = $VM_LANG->_('PHPSHOP_CART_ADD_TO'); $button_cls = 'addtocart_button'; if( CHECK_STOCK == '1' && !$product_in_stock ) { $button_lbl = $VM_LANG->_('VM_CART_NOTIFY'); $button_cls = 'notify_button'; $notify = true; } else { $notify = false; } ?> <form action="<?php echo $mm_action_url ?>index.php" method="post" name="addtocart" id="addtocart<?php echo $i ?>" class="addtocart_form" <?php if( $this->get_cfg( 'useAjaxCartActions', 1 ) && !$notify ) { echo 'onsubmit="handleAddToCart( this.id );return false;"'; } ?>> <?php echo $ps_product_attribute->show_quantity_box($product_id,$product_id); ?><br /> <input type="submit" class="<?php echo $button_cls ?>" value="<?php echo $button_lbl ?>" title="<?php echo $button_lbl ?>" /> <input type="hidden" name="category_id" value="<?php echo @$_REQUEST['category_id'] ?>" /> <input type="hidden" name="product_id" value="<?php echo $product_id ?>" /> <input type="hidden" name="prod_id[]" value="<?php echo $product_id ?>" /> <input type="hidden" name="page" value="shop.cart" /> <input type="hidden" name="func" value="cartadd" /> <input type="hidden" name="Itemid" value="<?php echo $sess->getShopItemid() ?>" /> <input type="hidden" name="option" value="com_virtuemart" /> <input type="hidden" name="set_price[]" value="" /> <input type="hidden" name="adjust_price[]" value="" /> <input type="hidden" name="master_product[]" value="" /> </form>
В первых строках определяется место обращения к шаблону, что исключает непосредственное обращение к файлу шаблона.
В 4-13 строках определяются некоторые переменные. 15-28 непосредственно форма добавления в корзину. Шаблон представляет собой, по сути html документ с добавлением в нужные места php вставок.
- \components\com_virtuemart\themes\default\templates\browse\browse_xxx.php - шаблон отображения товара в общем списке
- \components\com_virtuemart\themes\default\templates\browse\includes\browse_notables.tpl.php - шаблон списка товаров (без таблиц), также есть шаблоны на таблицах (browse_layouttable.tpl.php)
- \components\com_virtuemart\themes\default\templates\browse\includes\addtocart_form.tpl.php - шаблон формирования группы элементов добавления в корзину
Основные переменные, используемые в шаблоне витрины витруемарт. Как вывести цену, полное/краткое описание и т.д.
В шаблоне browse_xxx.php используются следующие переменные.
- $product_flypage - url карточки товара
- $product_name - наименование товара
- $product_price - цена
- $product_thumb_image - ссылка на мини изображение товара
- $product_s_desc - краткое описание товара
- $product_desc - полное описание товара
здесь перечислены некоторые переменные, названия интуитивно понятны.
Прикручиваем верстку к шаблону.
Приступим к формированию шаблона. browse_notables.tpl.php - оставим без изменений. В шаблон browse_3.php просто добавим код верстки, при этом в нужные места добавим переменные:
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); mm_showMyFileName(__FILE__); $db =& JFactory::getDBO(); $query = 'SELECT m.mf_name FROM #__vm_product AS p, #__vm_product_mf_xref AS mfx, #__vm_manufacturer AS m WHERE p.product_id=mfx.product_id AND m.manufacturer_id=mfx.manufacturer_id AND p.product_id='.$product_id.' LIMIT 1'; $db->setQuery($query); $man = $db->loadObjectList(); ?> <table class="product_browse" cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="2"><div class="img"><a href="<?php echo $product_flypage ?>" title="<?php echo $product_name ?>"> <?php echo ps_product::image_tag( urldecode($product_thumb_image), 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?> </a></div></td> </tr> <tr> <td colspan="2" class="descript"> <a style="font-size:16px; font-weight:bold;" href="<?php echo $product_flypage ?>"><?php echo $product_name ?></a><br/>Сила дуг: <?php echo $product_strong_d ?>кг.<br/>Производитель: <?php echo $man[0]->mf_name ?></td> </tr> <tr> <td class="descript"><span class="price" rel="<?php echo $product_id ?>"><?php echo $product_price ?></span></td><td align="right" class="add" rel="<?php echo $product_id ?>" width="115px;"><?php echo $form_addtocart ?></td> </tr> </table>
стилевое оформление обеспечивается следующим CSS кодом, который нужно вставить в css файл шаблона joomla:
.addtocart_form input.quantity_box_button, .addtocart_form label { display:none;} .product_browse .img{ background: url(../img/fon-img.png) no-repeat center top; width:220px; height:156px; padding-top:5px; margin-bottom:5px;} .product_browse .img img{ margin:auto; display:block; border:none;} .product_browse .add_to_cart{ background:url(../img/button-add-to-cart.png) no-repeat right top; width:80px; height:25px;} .product_browse input.addtocart_button{ background:url(../img/button-add-to-cart.png) no-repeat right top; display:block; float:right; width:80px; height:25px; color:#fff; font-weight:100; font: 14px/18px Arial, Helvetica, sans-serif;} .product_browse {font: 14px/18px Arial, Helvetica, sans-serif; color: #4d4c4c; float:left; margin:0 10px 40px 0; width:217px; height:250px;} .product_browse a, .product_browse a:visited{ font: 15px/18px Arial, Helvetica, sans-serif; color: #000; text-decoration:underline;} .product_browse a:hover { font-style:italic;} .product_browse span.price{ color: #a50101;} .product_browse input.inputboxquantity{ width:22px; border:1px solid #b5b5b5; margin-right:5px; display:block; float:right;} .product_browse div.add_to_cart{ color:#fff; padding:2px 10px 0 0; margin-right:5px; float:right; cursor:pointer;} .product_browse td.descript{ padding:0 10px 0 10px;} #product_list{ margin-top:20px;}
На закуску мувик про курьезы муай-тая. Мордобой по тайски.
- Создаем простую HTML страницу
- Разновидности CSS верстки (табличная, блочная), где и как применять
- Регистрация в twitter (твиттер). Твитер говорит на русском языке. Настраиваем twiter, как поменять фон
- Торренты будут блокировать по IP адресам. Конец халяве.
- Как убрать отступы внутри кнопок в Firefox
- Ссылки в таблицах html
Здравствуйте! Вопрос немного не по теме наверное, но может Вы знаете как изменить отображение строки в которой отображается поле «итого» и сумма напротив него в корзине. Для того что бы понять чего я от Вас хочу гляньте на картинкуhttp://blacksoft.ucoz.com/skrin_korziny.png
Попробуй поменять высоту для нужных тебе ячеек. как то так tr.sectiontableentry1 td{height:30px;}
Да я то знаю что так. Через браузер гугл хром менял, а вот в каком файле это менять не могу найти.
tr.sectiontableentry1 есть в файле default_pricelist.php(помоему так этот файл называется) – вот туда я и вставлял {height:30px;}, но это ни какого результата не дает почему-то
Внимательнее смотри в хроме стили для интересующей тебя ячейки таблицы. В файле /templates/gk_esport/css/joomla.css есть стиль
td {
font-size: 100%;
padding: 8px;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
}
в нем нужно поменять свойство padding.
А в виртуемарт 2 куда все эти файлы переехали?
Меня путь интересует, найти не могу
В Вирте 2 структура шаблона изменилась, можно стандартный поменять, но при очередном обновлении всё слетит. Лучше сделать новый шаблон или же всё запихнуть в шаблон Joomlы
А сколько наименований в магазин можно загрузить максимум?
Здравствуйте, а вот где найти эту переменную – $product_flypage? Я перенес виртуемарт на другой домен и у меня перестала открываться flypage когда переходишь на страницу товара, открывается какая-то другая просто пустая страница /components/com_virtuemart/shop_image/product/
@Михаил, #8: Какая связь между переменной $product_flypage и тем что у вас страница стоваром не окрывается? У вас проблема связанна с переносом на другой хостинг, до этого ведь все работало. Включите режим отладки, может какие ошибки проявяться.
Ни чего не нашел, а вообще где можно поискать переменные? Как могло такое произойти, куда делись карточки товаров.
@Михаил, #10: Вариантов масса. При переносе навернулась часть файлов. Хостинг не настроен под ваш сайт. Вообще в комментариях не совсем удобно обсуждать частные проблемы. Для этого лучше форум подойдет. Похоже надо будет прикрутить форум к блогу.
Здравствуйте! Вы не могли бы сделать такой же урок по верстке витрины товаров, только для wirtuemart 2. Я думаю многим бы пригодилось.