Настройки демо-версии

Оглавление


Вступление

Многие покупатели proStore после покупки хотят, чтобы тема выглядела также как и на демо-сайте.
Некоторые настройки в свежеустановленной версии отличаются от настроек в демо-версии.

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


  • Я буду идти по сайту сверху вниз.
  • Будут затронуты только те настройки, которые отличаются от настроек по-умолчанию.
  • Все настройки смотрим в приложении Магазин –> витрина –> proStore –> оформление.

Поехали!

Верхний продающий баннер

Если вы хотите включить вот такой жёлтый баннер сверху сайта, то это можно сделать здесь:

Там вы можете выставить цвет фона и текста баннера, текстуру и контент.
Если вы собираетесь использовать один и тот же контент баннера, то имеет смысл продублировать контент в блоке prostore.header_tb_content. Через блок удобнее редактировать + контент блока не слетит при сбросе настроек темы.
Код по умолчанию для баннера такой: 

<span><b>[date] cпециальное предложение!</b> Новым покупателям <b>скидка 20%</b>!</span> <a href="#ссылка" class="button">Кнопка</a>

На скриншоте в кнопке вставлены иконки emoji.
Код баннера со скриншота такой: 

<span><b>C 15 по 30 сентября скидка – <i class="nowrap" style="font-style: normal;"        >2 200 рублей!</i></b> Покупайте тему за <b>4 999 <i class="ruble" style="font-style: normal;">Р</i></b> вместо <del>7 199 <i class="ruble" style="font-style: normal;">Р</i></del> <a href="#ссылка кнопки" target="_blank" class="button">Купить тему <i class="em em-sunglasses" style="font-size:16px;"></i><i class="em em---1" style="font-size:16px;"></i></a></span>

За иконки emoji отвечает этот код: 

<i class="em em-sunglasses"></i>

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

Наверх

Особенности шапки

В демо-версии шапка ничуть не изменена. Но стоит рассказать о том, где можно поменять информацию в ней.

В демо-версии используется текстовый логотип. Текст логотипа можно изменить в настройках темы.

Там можно настроить иконку логотипа, текст, шрифт, размеры и т.д.
Если у вас графический логотип, то вы можете загрузить его чуть ниже в настройках темы.

По умолчанию, ширина логотипа ограничивается 100 пикселями.
Вы можете изменить это значение, если логотип кажется слишком маленьким.

Чуть ниже настроек графического логотипа можно указать слоган магазина. По умолчанию и в демо-версии слогана нет.
Если он вам необходим, просто впишите текст слогана в поле Слоган под логотипом.

Наверх

Schema org

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

Наверх

Над поиском можно увидеть примеры поисковых запросов. Это не просто текст, а ссылки.
Названия ссылок формируются из заданного в настройках списка товаров. Иными словами, примеры – это заголовки товаров из заданного списка. Длину примера запроса можно регулировать, чтобы не всё название товара отображалось.
Можно выбрать куда ведёт ссылка: на страницу поиска по данному слову, либо же на страницу самого товара. Также включена опция рандомного появления поисковых примеров.

Если хотите отключить ссылки в примерах, и написать примеры просто текстом, то оставьте поле Идентификатор списка товаров, которые попадают в примеры пустым. А сам текст примеров запишите в поле Заголовок для поисковых примеров. Например: iPhone


Пройдёмся по подчёркиваниям на скриншоте выше.
<i class="fa fa-clock-o"></i> – это иконка. Вы можете указать там другую иконку. Подробнее об иконках можно прочитать здесь.

class="nowrap" – запрещает переносить строку. Чтобы часы работы отображались в одну строку.

<a href="/site/address/" class="popuplink">Как нас найти</a>
Здесь первое, что вам надо сделать – это создать страницу в любом приложении (Сайт или Магазин), которое работает на теме proStore.
Затем открыть эту страницу и скопировать часть ссылки после названия домена из адресной строки.
Например если ваша ссылка выглядит так: http://site.ru/site/contacts/, то вы копируете жирную часть, а остальное не трогаете, чтобы получилось вот так: /site/contacts/. И вставляете эту ссылку в атрибут href.

Ещё когда вы открываете созданную страницу из админки, Webasyst очень любит прибавлять к ссылке "хвост" типа /?preview023981033
Вот этот "хвост" тоже нужно удалить из ссылки.

class="popuplink" повзоляет открывать ссылку во всплывающем окне. Подробнее про всплывающие окна.

Наверх

Особенности верхних меню

Выделение произвольного пункт особым цветом

Читайте в отдельной теме: Как изменить цвет категории в меню?

Иконки в меню

Читайте в отдельной теме: icon – иконка меню.
icon – это дополнительный параметр.
Если вы не знаете, что это такое, то рекомендую прочитать эту статью: Для чего нужны доп. параметры и как их добавлять

Изображение в меню
Читаем в отдельной теме: menu_img – промо изображение в меню товаров. Это тоже доп. параметр.

Другие доп. параметры меню
Также по меню есть отдельная статья о том, какие именно для меню в теме существуют доп. параметры – Дополнительные параметры для меню. Благодаря этой статье вы сможете построить меню даже лучше, чем в демо-версии.

Всплывающие окна
Данная функция относится только к меню со страницами.
Чтобы открыть страницу из меню во сплывающем окне, нужно добавить этой странице доп. параметр popup_top=1 (для открытия страницы верхнего меню) и/или popup_side=1 (для открытия страницы бокового меню).
Подробнее о настройке всплывающих окон можно прочитать в этой статье: Как открывать страницы во всплывающем окне.

Наверх

Главный слайдер

В демо-версии используется слайдер в режиме "сначала промо-карточки, потом товары". В свежеустановленной версии также используется этот режим. Единственное отличие в том, что в демо-версии выводятся 3 промо-карточки, а в покупной версии 1.
Затем идут товары из списка c id promo.
Подробнее про работу со списками товаров можно прочитать здесь: Работа со списками товаров.

В демо-версии под главным слайдером выводятся промо-карточки начиная с 4 по счёту. А в покупной начиная со второй.
Подробнее о том, как настраивать промо-карточки можно прочитать в этой статье: Настройка промо-карточек.
А для продвинутой настройки товаров в главном слайдере можете ознакомиться со этой статьёй: Настройка товаров в главном слайдере.

Наверх

Шрифты

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

Так, например, шрифт Roboto Slab используется для заголовков на главной странице (.home-sets .h2),

в заголовке приветствия на главной странице (.well h1) и в заголовках инфо-блоков (.bullet-heading)

и в заголовках промо-карточек под слайдером (.promo-content .h3)

Таким образом, код для вставки в поле Селекторы, к которым применять шрифт выглядит так: 

.home-sets .h2, .well h1, .bullet-heading, .promo-content .h3

Наглядно ознакомиться со всеми доступными шрифтами можно на этой странице.

Для верхнего слайдера используется шрифт Appetite.
Вы можете выбрать его шрифтом 2 и в поле Селекторы, к которым применять шрифт 2 указать следующие селекторы: 

.top-slider .h1, .top-slider h1, .top-slider .slider-title, .top-slider .h2

В настройках демо-версии этот шрифт выбран в третьем слоте, но это не имеет значения.

Наверх

Категории товаров под промо-карточками

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

Настройка плагина Картинки для категорий (categoryimage)

Но данный плагин требует настройки. Нужно создать все, используемые в теме размеры эскизов:


  • 14x14
  • 18x18
  • 28x28
  • 36x36
  • 0x80
  • 0x160

Заходите в приложение магазин - плагины - Картинки для категорий. Далее по скриншотам.

После сохранения нужно добавить эскизы других размеров, только нажать на "добавить" 4 раза.

Сохраниться.

Эскизы готовы!
Не забудьте загрузить изображения для категорий. Это делается в настройках каждой категории.

Подключаем плагин в настройках темы

Теперь можно подключать плагин в настройках темы.
В демо-версии плагин картинок категорий подключен только на главной странице.


Вы можете пройтись поиском по браузеру (MAC: cmd+F, WIN: ctrl+F) по слову categoryimage и посмотреть другие места, где можно подключить плагин:

  • В шапке (в отличии от отображения на главной данный вариант отображает картинки на всех страницах сайта)
  • В качестве иконок для меню
  • В качестве иконки рядом с заголовком категории
  • В качестве иконки в кнопках дочерних категорий

Также в теме поддерживается ещё плагин Иконка, изображение и баннер для категории (wmimageincat).
Этот плагин попроще – его не нужно настраивать, просто подключаете и пользуетесь.
Но на retina-экранах изображения могут выглядеть размытыми.

Начиная с версии 1.4.10 темой также поддерживается плагин Логотип категории (categoryimages).
Данный плагин тоже нужно настроить – включить в настройках плагина средний эскиз.

Важно включить средний эскиз ДО того, как вы начнёте загружать изображения категорий (также в настройках категорий).
Я так и не понял умеет ли это плагин пересоздавать эскизы после того, как подключается новый размер.. =/

Наверх

Списки товаров во вкладках

Списки товаров во вкладках настраиваются здесь:

Про работу с этими списками написана отдельная статья: Работа со списками товаров.

Наверх

Страницы во вкладках

После списков товаров идут страницы во вкладках.

Здесь такой же принцип действия как и для страниц во всплывающем окне в настройках ссылок в шапке.
Вам нужно создать страницы, а затем в специальных полях указать ссылки на эти страницы.

Данные вкладки можно также продублировать на страницах категорий и/или товаров.

За счёт того, что страницы подгружаются по технологии ajax они не попадут в индекс на каждой странице, где есть вкладка со страницей.

Наверх

Текст приветствия

Данный текст можно отредактировать в настройках темы:

В поле можно вставлять HTML-код.

Также данный текст можно продублировать в специальном блоке prostore.welcome.
Данный блок нужно создать в приложении Сайт –> блоки.
В таком случае текст приветствия будет размещаться в этом блоке, и не пропадёт даже если вы сбросите настройки темы.
А текст из настроек темы (см. скриншот выше) будет игнорироваться.
Рекомендую также прочитать статью: Для чего нужны блоки и где их создавать

Наверх

Инфо-блоки

Сразу за текстом приветствия идут инфо-блоки

В настройках темы они идут, также, за настройками текста приветствия.


Инфо-блоки, так же как и текст приветствия можно перенести в блок приложения сайт.
Читайте статью: prostore.bullets – инфо-блоки в обход настроек темы

Наверх

Наши партнёры

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

Наверх

Последние отзывы о товарах

Сразу после брендов с картинками идут последние отзывы о товарах.

Данный функционал доступен сразу "из коробки" без покупки дополнительных плагинов.
Просто его нужно включить в настройках темы:


Наверх

Сайдбар (боковая колонка)

Фильтры на страницах категорий

Фильтры – это стандартная функция Shop-Script.
Их нужно включать в настройках категории товаров, в которой вы хотите их показать.

По включению фильтрации также есть статья на официальном сайте Вебасист: Как создать фильтр для поиска товаров в категории
Внимание! Если товаров с включенной характеристикой фильтрации в категории нет, то данная характеристика отображаться в фильтрах не будет!

В теме для настройки фильтрации также есть определённые опции.

В данном случае, опции для демо-версии и для свежеустановленной темы идентичны.


Наверх

Бренды

Для отображения брендов в боковой колонке необходимо установить бесплатный плагин бренды и настроить его согласно официальной инструкции Webasyst.

Наверх

Наши новости

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

После этого откройте настройки темы, отметьте галочку отображения последних новостей и укажите этот id в поле Идентификатор блога, из которого брать новости:

Наверх

Наши фото

Для отображения "Наших фото" у вас должно быть установлено приложение Фото и созданный альбом с фотографиями в нём.
После того как создадите альбом, вам нужно узнать его системное имя:

В настройках темы вам нужно включить функционал приложения Фото в сайдбаре (отметить галочку) и указать системное имя альбом в поле Название альбома, из которого брать фото:

Наверх

Виджеты соц. сетей


Виджеты включают в себя следующие соц. сети:

  • ВКонтакте,
  • Facebook,
  • Instagram,
  • Twitter,
  • и Одноклассники

Виджеты по умолчанию отключены.
Их можно включить в настройках темы:

Наверх

Настройка виджета ВКонтакте

В настройках виджета нужно указать номер сообщества ВКонтакте.

У вас могут возникнуть сложности, если вы выбрали для сообщества короткую ссылку.
Например vk.com/weberia, в данном примере нет номера сообщества.
Чтобы узнать номер сообщества откройте любую фотографии в сообществе и загляните в адресную строку:

Номер сообщества будет после фрагмента адреса: photo- и заканчивается _нижним подчёркиванием.

Наверх

Настройка виджета Facebook

Просто укажите ссылку на своё сообщество в Facebook в соответствующем поле настроек темы.

Наверх

Настройка виджета Instagram

Это, пожалуй, самая сложная часть настройки виджетов.
Строго следуйте инструкциям!

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

  • Instagram client ID
  • Instagram Access Token
  • и имя пользователя для которого вы получали первые два параметра.

Получаем client ID

Чтобы получить client ID войдите в свой профиль Instagram.

Затем пройдите по этой ссылке.
Если ваш аккаунт для виджета ещё не активирован, вам нужно заполнить три поля и принять условия использования.
В поле Ваш сайт укажите: localhost
В поле Phone number укажите: любые цифры или свой номер телефона
В поле What do you want to build with the API? укажите: widget
Затем отметьте галочку "I accept the API Terms..." и нажмите на кнопку Sing Up.

Затем нажмите на "Register a New Client".
Во всех полях, кроме "contact email" введите http://localhost
В "contact email" укажите свой email.
Затем нажмите на Register.

После успешной регистрации вы увидите client info. Там будет виден ваш client ID.

ВАЖНЫЙ ШАГ!
Затем нажмите на "Edit" и выберите вкладку "Security".
В ней снимите галочку с опции "Disable implicit OAuth".

Теперь можете ввести Client ID в поле настроек темы Instagram client id.


Второй шаг – получаем instagram access token
Самое сложное уже позади.
После того как вы ввели первое значение Instagram client id, откройте главную страницу вашего сайта, работающего на теме дизайна proStore. На месте, где должен быть виджет Instagram, будет ссылка. Пройдите по ней.


После перехода по данной ссылке, вы попадёте на страницу подтверждения. Нажмите на кнопку Authorize.

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

Введите полученный Access Token в соответствующее поле в настройках темы.

Последний шаг – укажите имя пользователя инстаграм.

Наверх

Настройка виджета Twitter

Укажите ссылку на свой профиль в Twitter.

Наверх

Настройка виджета Одноклассников

  • Вы должны быть администратором группы.
  • Зайдите в свою группу.
  • Слева под аватаркой группы в меню есть опция "изменить настройки". Выберите ее.
  • Внизу открывшейся страницы, найдите надпись "ID этой группы на Одноклассниках:".

Введите этот номер в поле настроек темы:

Наверх

Фильтры в категориях товаров

Фильтры в категориях товаров это стандартная функция Shop-Script. О включении данной функции можно почитать пару статей на официальном сайте Webasyst:

Здесь, в базе знаний про фильтры тоже можно почитать ответы на вопросы.
Их можно найти по тегу Фильтры.

Наверх

Включение сортировки подкатегорий без перезагрузки

Об этом функционале написана отдельная статья: Сортировка категорий без перезагрузки

Наверх

Работа с описанием категории

Наверх

Всплывающая корзина и быстрое редактирование заказа

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


Аналогичная галочка есть для включения быстрого редактирования заказа на странице оформления:


На этом всё!
Если я что-то упустил о настройках демо-версии, вы можете задать вопрос об этом прямо в комментариях ниже!

Владимир Сергеев
Разработчик
Последнее обновление: 23 июля 2019
настройки темы демо-версия
Эта статья была полезна?ДаНет

22 комментария

Добавить комментарий
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!