Design UA

Отримай своє місце в мережі...




Настраиваем страницу категорий(витрину товаров)

В этой статье я постараюсь охватить все вопросы, которые могут возникнуть при настройке страницы категорий (витрины товаров). По умолчанию страница категорий имеет не самый презентабельный вид если конечно вы не используете шаблон для virtuemart. У меня, например, это выглядит так.

страница категорий по умолчанию

 

Изменение количества колонок

Изначально товары выводятся в три колонки. Для каждой категории можно задать свое количество колонок. Для этого нужно зайти в Компоненты->Virtuemart->Товары->Категории. Выбираем нужную категорию и в строке «Товаров в строке по умолчанию» указываем нужное нам количество товаров, которое будет равняться количеству колонок товара на странице категории.

изменение количества колонок

Так же можно изменить количество товаров в строке для всех категорий. Для этого заходим в Virtuemart->Настройки->Шаблоны и в поле «Категорий в строке» вводим нужное нам число.

изменение количества колонок2

Изменение количества товаров на странице

По умолчанию на странице категории выводится не более 10 товаров. Чтобы выводить больше (или меньше) товаров нужно на странице редактирования категории в поле «Вид отчетов категории» указать нужное нам количество. Таким образом, можно вывести все товары на одной странице, что бывает очень удобно для пользователей. Просто указывает число 100 (больше вряд ли будет удобно просматривать).

изменение количества товаров на странице

Изменение последовательности разбиения страниц

По умолчанию последовательность выглядит так: 3, 6, 9 и т.д.

изменение разбиения страниц

Чтобы задать свою последовательность нужно зайти в Virtuemart->Настройки->Шаблоны и через запятую указать нужные нам числа в поле «Укажите последовательность разбиения на страницы для списка».

изменение разбиения страниц2

Убрать рейтинг у товаров

Чтобы убрать у товаров рейтинг нужно зайти в Virtuemart->Настройки->Внешний вид и поставить НЕТ в блоках «Позволить оценивать» и «Оценки других»

убрать рейтинг товаров

Убрать блок «Сортировать по»

убрать сортировать по

Если вам не нужна сортировка, или для этих целей используется сторонний компонент, то убрать ее можно в файле components/com_virtuemart/views/category/tmpl/default.php. За вывод сортировки отвечает код, который можно закомментировать или просто удалить.

1
 

Убрать блок с сортировкой по производителю

убрать сортировку по производителю

За вывод этой сортировки отвечает строка из файла components/com_virtuemart/views/category/tmpl/default.php

1
 

Так же удаляем или комментируем ее.

Убрать постраничную навигацию вверху страницы

убрать навигацию вверху

Она, на мой взгляд просо не нужна, потому что обычно сначала смотрят содержание страницы и только после этого переходят на следующую :)

В том же файле components/com_virtuemart/views/category/tmpl/default.php находим и удаляем кусок кода

1
2
3
4
class="vm-pagination">
 
"float:right">
 

В коде он встречается дважды — где-то в середине и почти в самом конце. Нам нужен тот, что в середине :)

Убрать блок с разбиением на страницы

убрать разбиение на страницы

За вывод данного блока в файле components/com_virtuemart/views/category/tmpl/default.php отвечает код

1
class="width30 floatright display-number">

Его можно просто удалить, но лучше перенести вниз страницы, чтобы пользователи могли просматривать больше товаров.

Убрать блок «Страница одна из n»

убрать страница 1

Данный блок выводится внизу и вверху страницы в блоке с постраничной навигацией. В файле components/com_virtuemart/views/category/tmpl/default.php ищем и удаляем код

1
"float:right">

Изменяем внешний вид товара

По умолчанию в блоке с товаром слева выводится его изображение, а справа — название, цена, краткое описание и кнопка «описание товара». Чтобы сделать изображение крупнее изменим его расположение. Выведем название, картинку, цену и кнопку друг под другом.

вид товара по умолчанию

Блок с товаров состоит из двух вложенных блоков:

    -блок с картинкой, которая занимаем 30% ширины блока

    -блок названием, ценой, кнопкой, которые занимают оставшиеся 70%

Поэтому, чтобы выводить их друг под другом достаточно назначить каждому из блоков ширину 100%.

Меняем ширину блока с изображением (width30 — ширина 30%). Вместо

1
2
3
4
5
// Show Products
?>
class="product floatleft
"
>
class="spacer">
class="width30 floatleft center">

Вставляем

1
2
3
4
5
// Show Products
?>
class="product floatleft
"
>
class="spacer">
class="width100 floatleft center">

Меняем ширину блока с ценой, описанием и кнопкой «описание товара»(width70 — ширина 70%). Вместо

1
2
class="width70 floatright">

 

Вставляем

1
2
class="width100 floatright">

 

Теперь изображение переместилось вверх блока.

перемещение изображения

Чтобы вывести изображение под названием товара нужно переместить строку

1

 

И вставить ее перед

Получится что-то вроде этого

картинка под названием

А дальше с помощью css настраиваем внешний вид так, как нужно.

Добавить кнопку «Добавить в корзину» на страницу категорий

Кроме кнопки «описание товара» во многих интернет-магазинах на странице категорий выводится кнопка «купить». Лично я считаю, что никто не будет ничего покупать, пока не прочитает подробное описание товара, поэтому нет смысла выводить ее на странице категорий, но некоторые так не считают, поэтому разберемся как это реализовать :)

1. Скопируем файл components/com_virtuemart/views/productdetails/tmpl/default_addtocart.php в папку components/com_virtuemart/views/category/tmpl.

2. В файле components/com_virtuemart/views/category/tmpl/default.php сразу после

1
2
// Start the Output
foreach ($this->products as $product) {

Вставляем

1
$this->product = $product;

Получается

1
2
// Start the Output
foreach ($this->products as $product) { $this->product = $product;

3. Для вывода кнопки вставляем в понравившееся место в файле components/com_virtuemart/views/category/tmpl/default.php код

1
2
3
 

Я, например, вставил его сразу кода, который выводит кнопку «описание товара»

1
2
3
4
5

 

 
 

Получилось так

кнопка купить на странице категорий

Переход в карточку товара при клике на его изображение

По умолчанию при клике на картинку товара в лайтбоксе открывается ее полная версия. Что бы при клике на картинку пользователь переходил на страницу товара нужно в файле components/com_virtuemart/views/category/tmpl/default.php заменить

1
echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');

На

1
echo JHTML::link($product->link, $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',false));

Вывод артикула товара на странице категорий

Для вывода артикула нужно вставить строку в файл шаблона категории components/com_virtuemart/views/category/tmpl/default.php

1
 

Я для примера вставил его сразу после краткого описания.

1
2
3
4

class="product_s_desc">

 
 
 

Получилось так

артикул на странице категории

Настраиваем описание категорий

Как правило все товары в интернет-магазинах разделяются по категориям (например: часы для бега, часы для плавания и т.д.).  Чтобы проще продвинуть страницу категорий кроме самой витрины товаров полезно будет разместить еще и текст, описывающий данную категорию. Это будет полезно и для пользователей, которые захотят ознакомится с тем, что же за товар можно купить в данной категории. В этой статье я расскажу как вывести описание категории на странице, как расположить его в нужном месте и как настроить отображение только на первой странице.

Как вывести описание категории на странице

Для того, чтобы вывести описание категории сначала нужно ее создать. В админке виртуемарт заходим в Товары->Категории. В правом верхнем углу нажимаем кнопку создать, после чего попадаем на страницу редактирования категории. Там довольно много полей, но нас интересуем только 2 основных — это поле Название категории и Описание. 

alt

После этого по умолчанию текст описания будет выводится в категории над ее названием и списком товаров. Примерно так:

alt

Такой вывод описания категории virtuemart многих не устроит, поэтому попробуем переместить описание на другие места страницы категорий.

Настройка расположения описания категории на странице

За вид страницы категорий отвечает файл components/com_virtuemart/views/category/tmpl/default.php,  его и будем редактировать.

За вывод описания отвечает код:

1
2
3
class="category_description">
echo $this->category->category_description ; ?>

В virtuemart 2.0.10 он начинается с 52-й строки сразу после кода:

1
2
if ( empty($this->keyword) ) {
?>

Итак, что бы вывести описание категории товаров виртуемарт между заголовком категории и списком товаров вырежем код:

1
2
3
class="category_description">
echo $this->category->category_description ; ?>

И разместим его сразу под строкой (отвечает за вывод заголовка категории):

1

echo $this->category->category_name; ?>

В результате получим что-то вроде такого.

alt

Уже лучше, но этот вариант будет не совсем удобен если у Вас большое описание категории, поскольку товары уедут далеко вниз и чтобы их увидеть, пользователю нужно будет прокручивать страницу. В интернет магазине товар должен быть сразу виден покупателю, поэтому в этом случае лучше перенести описание категории под список товаров.

Для этого вырезаем наш код:

1
2
3
class="category_description">
echo $this->category->category_description ; ?>

И вставляем в самый низ страницы перед закрывающим тегом div .В результате описание категории будет выводится под списком товаров и панелью навигации.

alt

Настройка вывода описания категории только на первой странице списка товаров

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

Для этого нужно заменить код вывода описания категории по умолчанию:

1
2
3
class="category_description">
echo $this->category->category_description ; ?>

На такой код:

1
2
3
class="category_description">
$start = JRequest::getInt('limitstart',0);  $option = JRequest::getVar('option',''); If (!$start && $option == 'com_virtuemart'){ ?>
"width:100%;float:left;"> echo $this->category->category_description ; ?>

После этого при переходе на вторую и последующие страницы описание категории будет скрываться.

Надеюсь, что статья была полезна. Буду рад вопросам и дополнениям в комментариях.

Останні новини фото індустрії

Журнал о цифровой фотографии Fotoexperts
Новости фотоиндустрии от журнала о цифровой фотографии Fotoexperts
Журнал о цифровой фотографии Fotoexperts
  • Мастер-класс по FASHION-съёмке

    26 июня 2019 г. Мастер-класс по FASHION-съёмке по заказу бутика модной одежды. Ждём всех фотографов с фотиками и хорошим настроением в студии «Полигон» (Санкт-Петербург, ул. Михайлова, 21) в зале «Цех». Начало в 20:00. У вас будет возможность и время поснимать, задавать интересные вопросы, познакомиться и потусоваться!
  • Nik Collection 2 – вторая версия набора плагинов от DxO

    Компания DxO объявила о выпуске Nik Collection 2 от DxO, серьезного обновления знаменитого пакета плагинов для Adobe Photoshop, LightroomClassic и Elements. После выпуска Nik Collection на рынок с первой стабильной версией программного обеспечения с поддержкой клиентов в июне 2018 года, DxO расширяет набор плагинов с более чем 40 новыми творческими пресетами и поддержкой мониторов высокого разрешения для Windows. Кроме того, Nik Collection 2 теперь поставляется с DxO PhotoLab 2.3 ESSENTIAL Edition, недавно выпущенным передовым программным обеспечением для редактирования фотографий RAW.
  • Affinity Designer и Affinity Photo версии 1.7

    Программы Affinity Designer и Affinity Photo версии 1.7 получили масштабные обновления, в них внедрили лидирующие на рынке улучшения производительности, обеспечили им наилучшее удобство использования и разработали для них обширный список новых функций. Последние версии демонстрируют приверженность компании Serif к расширению пределов производительности, которую пользователи могут ожидать от своего оборудования.