Кастомизация шаблонов JBZoo на примере демо-сайта (часть 1)

10.0/10 оценка (5 голосов)

Как вы наверное уже знаете, в JBZoo есть демо-сайт, на котором можно посмотреть несколько примеров, сделанных с помощью конструктора корзины. Один из них это интернет магазин смартфонов. Но не многие знают, как его можно настроить. В этой статье мы подробно разберем, как это сделать. Первая часть будет посвящена общим настройкам страницы.

Внимание! Данное руководство исключительно для новой версии JBZoo 220.

Подготовка к настройке сайта

Первым делом вам необходимо установить последние версии Joomla, Zoo и JBZoo. А также для удобства можете их русифицировать.

После этого создаем новый каталог. Даем название по своему усмотрению. У вас автоматически появится псевдоним, который в будущем будет использоваться при настройке стилей. В этой статье мы не будем говорить о стилях. Также выберите один из шаблонов:

Шаблоны каталога

  • Catalog — от разработчиков JBZoo;

  • UIkit — от разработчиков YooTheme.

Они отличаются между собой внешним оформлением на сайте. Каталог телефонов на JBZoo создан на шаблоне UIkit и чистом шаблоне Master 2. Поэтому выберем именно его.

Активация лицензииТак как JBZoo установили чистый, то следующая страница, которую вы увидите, это активация лицензии. Введите логин и пароль, которые вы получили по почте после покупки приложения.

Создаем новый тип материалаТеперь создаем новый тип материала. У него также появится псевдоним, который будет использоваться при настройке стилей. Желательно не называть каталог и тип материала одинаково, чтобы у них не совпадали псевдонимы. В противном случае, при дальнейшей настройке сайта вы можете запутаться какой и за что отвечает.

Создание шаблонов для JBPrice

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

/media/zoo/applications/jbuniversal/templates/uikit/renderer/item

и создайте там папку с таким же названием, как псевдоним вашего типа материала. В нее добавьте 8 файлов, которые вы видите на картинке.

Скопируйте файлы в папку

Их вы можете скопировать из демо-сайта в папке

/media/zoo/applications/jbuniversal/templates/uikit/renderer/item/phone

предварительно скачав его с вашего личного кабинета на компьютер.

Теперь зайдите в

/media/zoo/applications/jbuniversal/templates/uikit/templates-system/renderer

и создайте в ней папку с названием jbprice. В ней будет находится несколько файлов.

Создайте два шаблона для цены. Первый файл это buttons.php

<?php
/**
* JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
* @package     jbzoo
* @version     2.x Pro
* @author      JBZoo App http://jbzoo.com
* @copyright   Copyright (C) JBZoo.com,  All rights reserved.
* @license     http://jbzoo.com/license-pro.php JBZoo Licence
* @coder       Alexander Oganov <t_tapak@yahoo.com>;
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


if ($this->checkPosition('buttons')) {
   echo '<div>';
   echo $this->renderPosition('buttons');
   echo '</div>';
}

Второй — price.php

<?php
/**
* JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
* @package     jbzoo
* @version     2.x Pro
* @author      JBZoo App http://jbzoo.com
* @copyright   Copyright (C) JBZoo.com,  All rights reserved.
* @license     http://jbzoo.com/license-pro.php JBZoo Licence
* @coder       Alexander Oganov <t_tapak@yahoo.com>;
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


if ($this->checkPosition('price')) {
   echo '<div>';
   echo $this->renderPosition('price');
   echo '</div>';
}

Чтобы переопределить шаблон, создайте файл — full.php

<?php
/**
* JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
* @package     jbzoo
* @version     2.x Pro
* @author      JBZoo App http://jbzoo.com
* @copyright   Copyright (C) JBZoo.com,  All rights reserved.
* @license     http://jbzoo.com/license-pro.php JBZoo Licence
* @coder       Alexander Oganov <t_tapak@yahoo.com>;
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


if ($this->checkPosition('attributes')) {
   echo '<div>';
   echo $this->renderPosition('attributes');
   echo '</div>';
}

if ($this->checkPosition('price') || $this->checkPosition('buttons')) { ?>
   <div>
       <div>
           <?php echo $this->renderPosition('price'); ?>
       </div>
   </div>

   <div>
       <?php echo $this->renderPosition('buttons'); ?>
   </div>
<?php }

 

А также positions.xml, в котором будут прописаны позиции всех шаблонов в настройках цены.

<?xml version="1.0" encoding="utf-8"?>
<!--
   JBZoo App is universal Joomla CCK, application for YooTheme Zoo component

   @package     jbzoo
   @version     2.x Pro
   @author      JBZoo App http://jbzoo.com
   @copyright   Copyright (C) JBZoo.com,  All rights reserved.
   @license     http://jbzoo.com/license-pro.php JBZoo Licence
-->
<renderer>

   <positions layout="default">
       <position name="list">List</position>
   </positions>

   <positions layout="teaser">
       <position name="list">List</position>
   </positions>

   <positions layout="full">
       <position name="attributes">List</position>
       <position name="price">Price</position>
       <position name="buttons">Buttons</position>
   </positions>

   <positions layout="modal">
       <position name="list">List</position>
   </positions>

   <positions layout="table">
       <position name="list">List</position>
   </positions>

   <positions layout="list">
       <position name="list">List</position>
   </positions>

   <positions layout="buttons">
       <position name="buttons">Buttons</position>
   </positions>

   <positions layout="price">
       <position name="price">Price</position>
   </positions>

</renderer>

Созданные файлы

Настройка шаблонов и элемента цены

Сначала зайдите в тип материала. Добавьте необходимые элементы из Библиотеки. Обязательно добавьте элемент цены. О различиях элементов Plain и Calc вы можете узнать из нашей документации. На демо-сайте установлен элемент JBZoo Price Plain. Также добавьте элемент JBImage. Он будет играть большую роль в настройках материала. Остальные по своему усмотрению.

Наполнение типа материала

После сохранения настройте шаблон teaser, который отвечает за анонс материала. Расставьте элементы в таком порядке, как на картинках и настройте. По нашему макету значения цены и кнопки находятся в совершенно разных контейнерах. Соответственно, с точки зрения шаблона это будут две разные позиции. Именно по этой причине необходимо добавить элемент Price Plain два раза и в одной укажите созданный ранее шаблон price, в другой buttons.

Наполнение шаблона teaserНаполнение шаблона teaser

Перейдите в шаблон full, чтобы настроить детальную страницу товара. Перенесите элементы, настройте, и в цене установите full.

Наполнение шаблона fullНаполнение шаблона full

Цена является одной из важнейших частей интернет магазина. Поэтому в конструкторе корзины ей отведены свои страницы с настройками. Они находятся в оранжевой шестеренке и в Коммерции. Сначала перейдите на страницу Параметры. Вы увидите только один текущий элемент, так как других не создавали. Позиция тоже будет одна. В нее добавьте сам элемент цены, а также дополнительные параметры к нему.

Добавляем параметры для элемента ценыДобавляем параметры для элемента цены

Перейдите на страницу Шаблоны в материале. Выберите шаблон full. Он отвечает за внешний вид цены на детальной странице. Перенесите элементы в позиции и настройте.

Настраиваем шаблон full элемента ценыНастраиваем шаблон full элемента ценыНастраиваем шаблон full элемента цены

В выпадающем списке вы увидите шаблоны buttons и price, которые создали ранее и указали в шаблоне teaser. В buttons перенесите системный элемент Кнопки, а в price — только элемент цены.

Настраиваем шаблон buttons элемента ценыНастраиваем шаблон price элемента цены

Не забывайте сохранять все ваши настройки и изменения.

Создание категории и материалов

После того, как вы настроили все необходимые шаблоны, можно перейти к созданию категорий для материалов.

Создаем новую категорию

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

Наполнение материалаНастраиваем материала

Это связано с тем, что JBImage и JBPrice — это разные элементы, которые никак не влияют друг на друга. В элементе цены картинка указана как параметр и на нее влияет только стоимость, указанная в данной вариации. Поэтому, чтобы при первоначальной загрузке страницы загружалась и изображение товара, необходимо добавить ее в элементе JBImage. А также, если у вас по умолчанию стоят базовые настройки цены, чтобы не возникало конфликтов, рекомендуем там указать такую же картинку.

Кстати, все картинки лежат в папке

images/phone

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

Пример наполнения вариации

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

Чтобы материалы отображались на сайте, вам необходимо вывести ее через пункт меню. Зайдите в Меню, Main menu и нажмите Создать. Дайте название странице, укажите красивый и удобный алиас. В настройке Тип пункта меню выберите Zoo, Главная. Справа также укажите, что она главная. Далее перейдите во вкладку Параметры. Укажите ваш новый каталог.

Создайте пункт менюСоздайте пункт меню

Для того, чтобы в цене на странице отображалась какая-либо валюта, вам необходимо сначала ее добавить. Для этого перейдите в оранжевую шестеренку, Электронную коммерцию и на страницу Курсы валют и их форматы. Добавьте удобный на ваш взгляд сервис и настройте валюту как на картинке слева. Далее перейдите на страницу Основные и укажите новую денежную единицу.

Создайте валютуУкажите новую валюту

И последнее, что вам необходимо сделать, это подредактировать настройки каталога. В новом каталоге перейдите в Настройки и во вкладке Конфигурация выключите рамки и автоматическое выравнивание всех материалов по максимальной высоте. Во вкладке Шаблон отключите подкатегории, так как вы их не настроили. Если оставить опцию включенной, то на сайте подкатегория выведется пустая. А также установите 3 колонки для материалов. Так их будет удобнее просматривать.

Настройки во вкладке КонфигурацияНастройки во вкладке Шаблон

После всех проделанных выше действий на сайте вы увидите товары в 3 колонки. На главной странице появятся элементы, которые настроили в шаблоне teaser.

Главная страница

На детальной странице мы видим более полную информацию о товаре, настроенную в шаблоне full.

Детальная страница

Сайт не очень похож на тот, что на демо. Это потому, что мы не применили к нему стили. В этой статье мы только разобрали, как сделать основные настройки сайта. В следующей части мы расскажем о более тонких настройках.

В следующей статье мы применим стили как на демо-сайте.

Демо, Категория, Корзина, Материал, Цена, Шаблон, Элементы

У меня остались вопросы, где я могу их задать?

Вы можете обратиться на наш специальный форум техподдержки JBZoo. Если у вас нет активного аккаунта со знаком «плюс» в тарифном плане, то вы можете задать свой вопрос в одном из этих разделов или на любой из наших контактов. Форум специально предназначен для JBZoo, приоритет и скорость ответа там выше.