Вы сейчас на демо сайтеЭто пример шаблона Auto DriveДругие »

Руководство

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

Что такое шаблон? - спросите вы.

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

И вы конечно нашли?

Не мы, а инициативные пользователи движка классными идеями подтолкнули вебмастеров к разработке удивительной методики, по ней и была создана данная сборка магазина автозапчастей как проверка предложенной технологии. Результат превзошёл ожидания. Методика привлекла лёгкостью разработки макета, минимальным синтаксисом на уровне однословных команд, плюс достаточным набором таких инструкций. Эти команды реализованы как библиотека ShortCodes Helper, подключаемая в шаблон сайта. Она разработана действующими мастерами Рунета для пользователей движка Impera CMS, бесплатна для этих пользователей, будет развиваться дальше, и вполне имеет шансы стать палочкой-выручалочкой всем, кто хочет использовать в своём шаблоне прикольные фишки без знания тонкостей кодинга.

Чем понравилась методика?

В первую очередь простым синтаксисом, так называемыми short-кодами. И второе - поддержкой абстрактных html-страниц в шаблоне. То есть можно положить в папку абстракций шаблона некую статику, например свёрстанный дизайнером лендинг:

  • допустим example/landing.htm
  • и он появится по адресу http://demo.imperacms.ru/example/landing
  • причём в статике позволено использовать short-коды

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

А как работают short-коды?

Просто записываете нужную команду в шаблоне, на том месте страницы сайта появится соответствующая информация. Например в подвале сайта в строке копирайта обычно выводят название магазина, указанное в настройках админпанели. Для этого вписываем в интересующее место шаблона инструкцию {siteName} и получаем такой результат:

Демонстрационный интернет-магазин

Ещё один примитивный пример - впишем инструкцию {company} и получим название фирмы из тех же настроек админпанели:

Демо Компани

И так далее, каждый такой short-код выводит некий параметр сайта. Набор кодов большой и зависит от версии библиотеки, которую будете использовать. К тому же позволяется порезать библиотеку от неиспользуемых вами команд или добавить туда собственные, то есть разработанные вами для своего проекта. Предполагаем, пользователи смогут обмениваться такими short-кодами на правах дарения в общую копилку.

Где узнать список функций?

Дело в том, что этот список зависит от используемой библиотеки, то есть того файла helper.php, что подключен в настоящий момент в шаблон сайта. Например, давайте с помощью соответствующих short-команд запросим и распечатаем список, который сейчас содержит библиотека данной сборки магазина автозапчастей:

  • {version} = вывести номер версии движка
  • {versionYMD} = вывести ДАТА-номер версии
  • {header200} = отправить серверный заголовок 200 OK
  • {headerLastModified} = отправить серверный заголовок Last-Modified
  • {headerExpires} = отправить серверный заголовок Expires
  • {searchTitle} = вывести заголовок страницы поиска
  • {searchKeyword} = вывести искомую фразу поиска
  • {metaDescription} = вывести мета описание страницы
  • {metaKeywords} = вывести мета ключевые слова страницы
  • {otherMeta} = вывести остальные мета
  • {otherJS} = вывести остальные скрипты
  • {seoText} = вывести SEO-текст
  • {siteName} = вывести название сайта
  • {company} = вывести название компании
  • {themeName} = вывести название текущего дизайна
  • {setConfigParam} = установить конфигурационный параметр
  • {setSettingsParam} = установить параметр настройки сайта
  • {phone} = вывести телефон, указанный в конфиге
  • {email} = вывести емейл, указанный в конфиге
  • {address} = вывести адрес, указанный в конфиге сайта
  • {facebook} = вывести адрес страницы Facebook из конфига
  • {vkontakte} = вывести адрес страницы ВКонтакте из конфига
  • {twitter} = вывести адрес страницы Twitter из конфига
  • {google} = вывести адрес страницы Google+ из конфига
  • {youtube} = вывести адрес страницы YouTube из конфига
  • {error} = вывести сообщение об ошибке
  • {message} = вывести сообщение об успехе
  • {year} = вывести текущий год
  • {counters} = вывести коды счетчиков
  • {pagination} = вывести html-контент пагинации страниц
  • {lastTemplate} = признать файл шаблона самостоятельной страницей
  • {centralTemplate} = признать файл шаблона не самостоятельной страницей
  • {date} = вывести дату записи
  • {id} = вывести ИД записи
  • {idSection} = вывести ИД записи специальной страницы
  • {idCategory} = вывести ИД записи категории
  • {idBrand} = вывести ИД записи бренда
  • {idProduct} = вывести ИД записи товара
  • {idVariant} = вывести ИД записи варианта товара
  • {idProperty} = вывести ИД записи свойства
  • {idNews} = вывести ИД записи новости
  • {idArticle} = вывести ИД записи статьи
  • {idCurrency} = вывести ИД записи валюты
  • {idComment} = вывести ИД записи комментария
  • {idOrder} = вывести ИД записи заказа
  • {idDelivery} = вывести ИД записи способа доставки
  • {idPayment} = вывести ИД записи способа оплаты
  • {activeSection} = вывести атрибут активной специальной страницы
  • {activeCategory} = вывести атрибут активной категории
  • {activeBrand} = вывести атрибут активного бренда
  • {activeSort} = вывести атрибут активной сортировки
  • {activeSortDesc} = вывести атрибут активной сортировки наоборот
  • {activeOption} = вывести атрибут активного значения свойства
  • {actualOption} = вывести атрибут действующего значения свойства
  • {activeSize} = вывести атрибут активного размера страницы
  • {activePage} = вывести атрибут активного номера страницы
  • {activeCurrency} = вывести атрибут активной валюты
  • {activeDelivery} = вывести атрибут активного способа доставки
  • {activePayment} = вывести атрибут активного способа оплаты
  • {highlighted} = вывести атрибут флага Выделен
  • {hit} = вывести атрибут флага Хит
  • {newest} = вывести атрибут флага Новинка
  • {actional} = вывести атрибут флага Акционный
  • {awaited} = вывести атрибут флага Скоро в продаже
  • {commented} = вывести атрибут флага Обсуждаемый
  • {withhold} = вывести атрибут флага Не может быть продан
  • {exhibit} = вывести атрибут флага Экспонат
  • {itemTitle} = вывести мета тайтл записи
  • {itemCategory} = вывести категорию записи
  • {itemBrand} = вывести бренд записи
  • {itemBrandOrCategory} = вывести бренд или категорию записи
  • {itemPCode} = вывести код товара
  • {pcode} = ....... синоним функции itemPCode
  • {itemSku} = вывести артикул варианта товара
  • {sku} = ....... синоним функции itemSku
  • {itemVariant} = вывести вариант товара
  • {itemProps} = вывести отобранные свойства товара
  • {itemCount} = вывести количество товаров в записи
  • {browsed} = вывести количество просмотров записи
  • {nameSection} = вывести название специальной страницы
  • {nameCategory} = вывести название категории
  • {category} = ....... синоним функции nameCategory
  • {nameBrand} = вывести название бренда
  • {brand} = ....... синоним функции nameBrand
  • {nameProduct} = вывести название товара
  • {product} = ....... синоним функции nameProduct
  • {nameVariant} = вывести название варианта товара
  • {variant} = ....... синоним функции nameVariant
  • {nameNews} = вывести название новости
  • {nameArticle} = вывести название статьи
  • {article} = ....... синоним функции nameArticle
  • {specification} = вывести название свойства товара
  • {specie} = вывести значение свойства товара
  • {option} = вывести значение свойства фильтра
  • {item} = вывести текст переменной
  • {bodySection} = вывести описание специальной страницы
  • {bodyCategory} = вывести описание категории
  • {bodyBrand} = вывести описание бренда
  • {bodyProduct} = вывести описание товара
  • {bodyNews} = вывести описание новости
  • {bodyArticle} = вывести описание статьи
  • {thumb} = вывести URL миниатюры записи
  • {thumbSection} = вывести URL миниатюры специальной страницы
  • {thumbCategory} = вывести URL миниатюры категории
  • {thumbBrand} = вывести URL миниатюры бренда
  • {thumbProduct} = вывести URL миниатюры товара
  • {thumbNews} = вывести URL миниатюры новости
  • {thumbArticle} = вывести URL миниатюры статьи
  • {photo} = вывести URL фотографии записи
  • {photoSection} = вывести URL фотографии специальной страницы
  • {photoCategory} = вывести URL фотографии категории
  • {photoBrand} = вывести URL фотографии бренда
  • {photoProduct} = вывести URL фотографии товара
  • {photoNews} = вывести URL фотографии новости
  • {photoArticle} = вывести URL фотографии статьи
  • {price} = вывести цену текущего варианта товара
  • {amount} = вывести количество товарной позиции в корзине
  • {sum} = вывести стоимость товарной позиции в корзине
  • {found} = вывести количество найденных записей
  • {idx} = вывести текущий индекс enum-функции
  • {num} = вывести номер итерации enum-функции
  • {out} = прокрутить за конец итераций enum-функции
  • {cartTotal} = вывести итоговую сумму корзины
  • {cartQuantity} = вывести количество товаров в корзине
  • {valueSurname} = вывести значение поля ввода ФАМИЛИЯ
  • {valueName} = вывести значение поля ввода ИМЯ
  • {valuePatronymic} = вывести значение поля ввода ОТЧЕСТВО
  • {valueEmail} = вывести значение поля ввода ЕМЕЙЛ
  • {valueEmail2} = вывести значение поля ввода ЕМЕЙЛ 2
  • {valuePhone} = вывести значение поля ввода ТЕЛЕФОН
  • {valuePhone2} = вывести значение поля ввода ТЕЛЕФОН 2
  • {valueAddress} = вывести значение поля ввода АДРЕС
  • {valueCountry} = вывести значение поля ввода АДРЕС-СТРАНА
  • {valueRegion} = вывести значение поля ввода АДРЕС-ОБЛАСТЬ
  • {valueTown} = вывести значение поля ввода АДРЕС-ГОРОД
  • {valueStreet} = вывести значение поля ввода АДРЕС-УЛИЦА
  • {valueHouse} = вывести значение поля ввода АДРЕС-ДОМ
  • {valueRoom} = вывести значение поля ввода АДРЕС-КВАРТИРА
  • {valueZipcode} = вывести значение поля ввода АДРЕС-ИНДЕКС
  • {valueMessage} = вывести значение поля ввода СООБЩЕНИЕ
  • {valueCopystop} = вывести значение поля ввода КОНТРОЛЬ РЕПОСТИНГА
  • {getTopMenu} = получить массив специальных страниц верхнего меню
  • {getSearchHistory} = получить массив истории поиска
  • {getCategories} = получить дерево категорий
  • {getFeatureds} = получить массив особых товаров
  • {getSlides} = получить адреса картинок папки шаблона
  • {getRandoms} = получить массив случайных товаров
  • {getLasts} = получить массив последних поступивших товаров
  • {redirectToFirst} = редирект на начало списка, если мы не там
  • {modCheck404} = подключить модуль Check404
  • {modError404} = подключить модуль Error404
  • {modCanonizator} = подключить модуль Canonizator
  • {modProduct} = подключить модуль МиниКарточкаТовара
  • {modAbstract} = подключить модуль АбстрактнаяСтраница
  • {modDemoRemark} = подключить модуль Remark
  • {modDemoThemes} = подключить модуль Themes
  • {----- ЭТО БЛОЧНЫЕ ФУНКЦИИ -----} = они открываются и закрываются таким же тегом, действуя на весь блок между тегами
  • {enum} = перечислить элементы массива
  • {enumSections} = перечислить элементы массива специальных страниц
  • {enumCategories} = перечислить элементы массива категорий
  • {enumPath} = перечислить элементы массива хлебных крошек
  • {enumSubcats} = перечислить элементы массива подкатегорий текущей категории
  • {enumProperties} = перечислить элементы массива свойств
  • {enumOptions} = перечислить элементы массива значений свойства
  • {enumBrands} = перечислить элементы массива брендов
  • {enumCatalog} = перечислить элементы массива каталога
  • {enumProducts} = перечислить элементы массива товаров
  • {enumAssortment} = перечислить элементы массива прикрепленных товаров
  • {enumVariants} = перечислить элементы массива вариантов товара
  • {enumPhotos} = перечислить элементы массива фотографий товара
  • {enumSpecifications} = перечислить элементы массива свойств товара
  • {enumSpecies} = перечислить элементы массива значений свойства товара
  • {enumRelateds} = перечислить элементы массива связанных товаров
  • {enumAccessories} = перечислить элементы массива аксессуаров
  • {enumFeatureds} = перечислить элементы массивов особых товаров
  • {enumNewest} = перечислить элементы массива новинок
  • {enumHits} = перечислить элементы массива хитов продаж
  • {enumActions} = перечислить элементы массива акционных товаров
  • {enumCommenteds} = перечислить элементы массива недавно обсуждавшихся товаров
  • {enumOrdereds} = перечислить элементы массива недавно покупавшихся товаров
  • {enumAwaiteds} = перечислить элементы массива ожидаемых товаров
  • {enumAnnounces} = перечислить элементы массивов анонсовых публикаций
  • {enumRecents} = перечислить элементы массива недавно просмотренных товаров
  • {enumSearch} = перечислить элементы массива поиска
  • {enumNews} = перечислить элементы массива новостей
  • {enumArticles} = перечислить элементы массива статей
  • {enumDeliveries} = перечислить элементы массива способов доставки
  • {enumPayments} = перечислить элементы массива способов оплаты
  • {enumCurrencies} = перечислить элементы массива валют
  • {enumCart} = перечислить элементы массива корзины
  • {enumPages} = перечислить элементы массива пагинации
  • {enumSorts} = перечислить элементы массива сортировок
  • {enumSizes} = перечислить элементы массива размеров страницы
  • {enumThemes} = перечислить элементы массива дизайнов
  • {enumFunctions} = перечислить имена функций хелпера
  • {ifDemo} = если находимся в демо режиме
  • {ifActual} = если категорию/бренд или свойство/значение можно показывать
  • {ifItems} = если доступны записи
  • {ifCategories} = если доступны категории
  • {ifBrands} = если доступны бренды
  • {ifProducts} = если доступны товары
  • {ifPhoto} = если доступна хотя бы 1 фотография товара
  • {ifPhotos} = если доступно более 1 фотографии товара
  • {ifVariants} = если доступно более 1 варианта товара
  • {ifPrice} = если указана не нулевая цена варианта товара
  • {ifNews} = если доступны новости
  • {ifArticles} = если доступны статьи
  • {ifProperties} = если доступны свойства фильтра
  • {ifDeliveries} = если доступны способы доставки
  • {ifActiveDelivery} = если способ доставки активный
  • {ifPayments} = если доступны способы оплаты
  • {ifActivePayment} = если способ оплаты активный
  • {ifCurrencies} = если доступно более 1 валюты
  • {ifCart} = если доступны товары корзины
  • {ifHasBranch} = если категория/бренд имеет вложенные
  • {ifShowAll} = если выбран показ всех товаров списка
  • {ifPage404} = если на странице 404
  • {ifPageAbstract} = если на абстрактной странице
  • {ifPageOff} = если на отключенной странице
  • {ifAccepted} = если форма ввода принята
  • {ifCaptcha} = если капча включена

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

Простые примеры

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

  • каждую новую употреблённую команду будем выводить зелёным цветом
  • а если такая ещё раз появится в следующих примерах, там уже запишем её серым цветом, чтобы акцентировать внимание только на новых short-кодах
  • теги html-разметки покрасим фиолетовым цветом.

Надеемся, такая запись сбережёт вам время на разбор примеров. Начнём с элементарной разметки.

Как вывести бренды? - допустим кнопками.

В первом примере используем три разные short-команды:

  • перечислить бренды
  • для каждого вывести URL (адрес страницы)
  • и название.

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

{enumBrands}
    <a class="btn" href="{url}">
        {name}
    </a>
{/enumBrands}

И вот живой результат:

CentropenBenqPanasonicSonySamsungAppleNokia

Хотелось бы поблагодарить разработчиков методики и библиотеки за то, что мы избавлены от необходимости учить массу подробностей работы движка, например помнить, какой же переменной он оперирует в каждом случае. Это позволило упростить синтаксис до предела.

Как вывести верхнее меню? - допустим в виде UL-списка.

Разметка очень похожа на пример выше, только:

  • сначала получаем верхнее меню одной short-командой
  • затем перечисляем его секции (пункты) с помощью другой команды
  • выводя каждый пункт ссылкой.

Вот как это выглядит в коде шаблона:

{getTopMenu}
<ul>
    {enumSections}
        <li>
            <a href="{url}">
                {name}
            </a>
        </li>
    {/enumSections}
</ul>

И теперь смотрим на результат:

Как вывести категории? - допустим UL-списком.

Тут разметка снова похожа на пример выше, только:

  • демонстрируется ещё и объявление локальной функции (допустим назовём её myCategories)
  • а также использована short-команда, которая определяет, имеет ли перечисляемая категория вложенные (ветвь) - и если так, рекурсивно отправляет эту ветвь на отрисовку объявленной нами функцией.

Смотрим код шаблона:

{function myCategories}
    <ul>
        {enumCategories}
            <li>
                <a href="{url}">
                    {name}
                </a>
                {ifHasBranch}
                    {myCategories categories=$item->subcategories}
                {/ifHasBranch}
            </li>
        {/enumCategories}
    </ul>
{/function}
{myCategories}

Смотрим живой результат:

Как вывести картинки? - допустим из папки шаблона.

Предположим, мы создали среди картинок шаблона папку demo/slider2 и загрузили туда несколько слайдов. Чтобы вывести их на странице, мы должны:

  • сначала получить слайды, то есть запросить этот список файлов с помощью одной short-команды
  • перечислить полученные URL-ы файлов (адреса) другой командой
  • и вывести каждый адрес в теге картинки.

Код шаблона:

{getSlides folder='demo/slider2'}
<div class="gallery">
    {enum}
        <img src="{item}">
    {/enum}
</div>

Смотрим результат:

Здесь продемонстрирован один момент: у short-кодов могут быть опциональные параметры, чтобы добавить им гибкости.

Как вывести товары? - допустим три случайных.

Снова всё элементарно - используем всего три инструкции:

  • получить список случайных товаров
  • перечислить элементы списка
  • для каждого подключить модуль "товар".

Код шаблона:

{getRandoms count=3}
<div class="products">
    {enum}
        {modProduct}
    {/enum}
</div>

Смотрим живой результат:

Мы продемонстрировали в этом примере ещё одну удивительную особенность библиотеки - поддержка произвольных модулей визуализации. То есть можно разместить в папке модулей шаблона свой фрагмент разметки какого-то блока страницы, предположим мы поместили такой фрагмент в файл product.htm, и затем ссылаться на него простой инструкцией вида {mod...}, где троеточием обозначено имя модуля.

А если без модулей? - допустим выводить товары своей разметкой.

Не проблема. Команду модуля "товар" просто меняем на желаемую разметку. Для примера давайте выведем:

  • 6 последних добавленных товаров, так чтобы в каждой карточке выводилось только:
    • название товара (допустим в теге <b>)
    • его цена (допустим в теге <span>)
    • и ссылка на страницу товара.

Смотрим код в шаблоне:

{getLasts count=6}
<div class="products">
    {enum}
        <div class="item">
            <b>{name}</b>
            {enumVariants}
                <span>
                    {price} {sign}
                </span>
            {/enumVariants}
            <a class="goto" href="{url}"></a>
        </div>
    {/enum}
</div>

Смотрим живой результат:

Чайковский — Танец Феи Драже378 руб
Чайковский — Вальс цветов210 руб
Светодиодные колонки (Звукоактивные, USB Powered)1 134 руб
Лазерная указка (200mW Red laser, 2xCR2 (15270))2 230 руб4 201 руб
The Balloon Lamp4 200 руб
Лазерная указка (150mW Green laser)2 940 руб
+38 (050) 000-00-00+38 050 000-00-02
Пункты выдачиул. Оборонная 56,
ул. Промышленная 8,
с 9:00 до 18:00Воскресенье - выходной
Корзина

В настоящий момент пустая.

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

Скачать

Цените оперативность? Ниже ссылка нашей ленты. Подключите на телефон, ридер RSS маякнёт о новинках.

http://demo.imperacms.ru/rss

Мы в соцсетях Будем рады видеть вас в наших группах. Присоединяйтесь!

Другие дизайны на этом же демо сайте

AliciaJohnsonArtStudioAutoDriveBexamDefaultBikesHDBimagoDropShipmentBookSellerBootstrapBrandingCactusClipHouseDearBrideDoctorDogClubEasyBlogHipHopHummingBirdInCruisesLightBlogMart17MinimalistMobiShopNikitaNutsOfficialOnepageOrganicCosmeticsOrnamentalsPage404v1PetzPhotographerRamayanaRoyalDiamondSantaGoSimpla2SnowSparesDealerSplashMasterStekoDealerSyntheticaTakiePirogiTextileShopToolsVivaToolsTravellerTalesUImaxShopUImaxTemplateVapourVisa2UkraineVitalia2WearStoreWeightLosseCommerceiDeamodules
Impera CMS - лёгкий и быстрый скрипт сайта с потрясающими возможностями.

Нравится? Хотите себе
такой шаблон?

Взять