Делаем витрину (список товаров) для virtuemart, часть 2

Добрый день, читатели моего блога. Здесь вы найдете ответы на некоторые вопросы, которые мучают вебмастеров. Сегодня речь пойдет о бесплатном компоненте (virtuemart 1.1.5-9) для joomla 1.5-2.5, а конкретно о витрине виртуемарта. Для начинающего вебмастера, фрилансера, для того кто решил связать свою деятельность со сборкой магазинов на virtuemart данная статья будет полезна.

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

header

Как поменять шаблон витрины в админке virtuemart. Управление шаблонами виртуемарта.


В предыдущей статье из рубрики virtuemart мы рассмотрели, как сверстать макет каталога будущего интернет-магазина на компоненте virtuemart. Макет витрины выглядит следующим образом.

Для начала нам необходимо настроить параметры отображения каталога. Заходим в админку joomla (_http://вашсайт/administrator), далее в компонентах выбираем virtuemart. Слева в панели открываем вкладку настройки и выбираем пункт настройки. На вновь открывшейся странице справа на вкладке "сайт" в группе настроек "Вид" указываем необходимые параметры.

05.09
Для нашего случая нужно выбрать: шаблон отображения товара в списке - browse_3; Количество товаров в строке - 3. Такие параметры требует макет, у нас 3 товара в строке.
Кроме этого параметры отображения можно задавать для каждой категории отдельно.

Около списка шаблонов нажмите на ссылку "настройки" откроется страница, где можно выбрать шаблон отображения списка товаров.

05.09_2

Для вновь созданных категорий параметры отображения каталога принимаются как в главных настройках. Если вам нужно настройки сделать отличными от основных, тогда выберете в компоненте виртуемарт слева вкладку "товары" -> "список категорий". На вновь открывшейся странице выбираем нужную категорию, далее на вкладке "Информация о категории" внизу выбираем нужные параметры.

05.09_1

Файлы, которые имеют отношение к отображению списка товаров в 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;}

На закуску мувик про курьезы муай-тая. Мордобой по тайски.



Похожие статьи:
↑ Наверх ↑
  • Комментарии
  • Фёдор (09/02/2013 - 19:32):

    Здравствуйте! Вопрос немного не по теме наверное, но может Вы знаете как изменить отображение строки в которой отображается поле «итого» и сумма напротив него в корзине. Для того что бы понять чего я от Вас хочу гляньте на картинку http://blacksoft.ucoz.com/skrin_korziny.png

  • TakProstoTak.ru (10/02/2013 - 10:17):

    Попробуй поменять высоту для нужных тебе ячеек. как то так tr.sectiontableentry1 td{height:30px;}

  • Фёдор (10/02/2013 - 16:59):

    Да я то знаю что так. Через браузер гугл хром менял, а вот в каком файле это менять не могу найти.
    tr.sectiontableentry1 есть в файле default_pricelist.php(помоему так этот файл называется) – вот туда я и вставлял {height:30px;}, но это ни какого результата не дает почему-то

  • TakProstoTak.ru (10/02/2013 - 17:25):

    Внимательнее смотри в хроме стили для интересующей тебя ячейки таблицы. В файле /templates/gk_esport/css/joomla.css есть стиль

    td {
    font-size: 100%;
    padding: 8px;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    }

    в нем нужно поменять свойство padding.

  • Игорь (20/02/2013 - 14:25):

    А в виртуемарт 2 куда все эти файлы переехали?
    Меня путь интересует, найти не могу

  • Vasily (20/03/2013 - 14:47):

    В Вирте 2 структура шаблона изменилась, можно стандартный поменять, но при очередном обновлении всё слетит. Лучше сделать новый шаблон или же всё запихнуть в шаблон Joomlы

  • Гульмира (16/09/2013 - 11:13):

    А сколько наименований в магазин можно загрузить максимум?

  • Михаил (16/11/2013 - 9:01):

    Здравствуйте, а вот где найти эту переменную – $product_flypage? Я перенес виртуемарт на другой домен и у меня перестала открываться flypage когда переходишь на страницу товара, открывается какая-то другая просто пустая страница /components/com_virtuemart/shop_image/product/

  • TakProstoTak.ru (16/11/2013 - 9:10):

    @Михаил, #8: Какая связь между переменной $product_flypage и тем что у вас страница стоваром не окрывается? У вас проблема связанна с переносом на другой хостинг, до этого ведь все работало. Включите режим отладки, может какие ошибки проявяться.

  • Михаил (16/11/2013 - 9:57):

    Ни чего не нашел, а вообще где можно поискать переменные? Как могло такое произойти, куда делись карточки товаров.

  • TakProstoTak.ru (16/11/2013 - 10:10):

    @Михаил, #10: Вариантов масса. При переносе навернулась часть файлов. Хостинг не настроен под ваш сайт. Вообще в комментариях не совсем удобно обсуждать частные проблемы. Для этого лучше форум подойдет. Похоже надо будет прикрутить форум к блогу.

  • Александр (16/08/2014 - 13:01):

    Здравствуйте! Вы не могли бы сделать такой же урок по верстке витрины товаров, только для wirtuemart 2. Я думаю многим бы пригодилось.

Прокомментировать

Подписаться, не комментируя