Модуль Супер хук

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

и , которые в свою очередь имеют свой идентификатор (id) и класс(class). Предназначены они для визуального оформления(стилизации) страницы сайта с помощью технологии CSS, где их называют селектор id и селектор класса.

Для того чтобы различать в CSS их обозначают с помощью знаков. Для id это решетка #, а для class точка. Например, в нашем примере id=’cena’ будет обозначаться как

А class=’nazvanie_tovara’ будет обозначаться как

Nazvanie_tovara.

Так же эти селекторы используются в JavaScript и jQuery для того, чтобы привязать работу скрипта к определенному блоку.

Кроме этого в CSS используют селекторы типа. Это части тега. В нашем случае это селектор типа div и селектор типа span.

Определение селектора с помощью браузера Mozilla FireFox

Самый простой способ определить селектор с помощью Мозилы. Покажу как это делается. Открываем страницу с товаром и на этот раз перенесем , который сейчас находиться под кнопкой в корзину, выше ценника товара. То есть нам нужно определить селектор блока с ценой товара как родительского блока и селектор модуля, как дочернего блока. Открытие дополнительной панели в FireFox такое же как и в Хроме, сочетание клавиш Ctrl+Shift+I. Затем в меню дополнительного поля слева находим стрелочку(выбрать элемент страницы) и нажимаем её. Теперь проводя курсором по странице сайта мы видим выделения блоков. Наводим курсор на блок с ценником и при выделении этого блока кликаем на него. Теперь в дополнительном поле выделиться начало html блока

Кликаем по нему правой кнопкой мыши и в появившемся окошке выбираем пункт «копировать уникальный селектор».

Тоже самое проделываем модулем Дополнительная информация

в поле настроек модуля Селектор модуля или HTML код заносим дочерний селектор.block_wnd

Позицию по отношению к блоку выбираем «Внутри блока снизу» И сохраняем результат.

Было Стало

Видео инструкция: https://www.youtube.com/watch?v=xTSXTj0QM5E

Определение селекторов с помощью браузера Google Chrome

В модуле Супер хук требуется указать селектор блока(родительский блок), к которому мы хотим привязать блок модуля (дочерний блок). Эти селекторы очень легко определить с помощью браузера Google Chrome(Гугл Хром). Для этого нужно открыть инструмент разработчика в браузере с помощью комбинации клавиш Ctrl+Shift+I или просто навести курсор мыши на страницу сайта и нажать правую кнопку мыши. И в выпадающем меню выбрать Просмотр кода элемента. Откроется дополнительное окно с отображением html кода и небольшого окошка справа с CSS кодом. Окно имеет меню с изображением лупы мобильного телефона и название вкладок начиная с Elements.

Внизу выделенного поля мы видим сноску с необходимыми нам селекторами для настройки модуля. На картинке указан селектор типа div, id селектор

#short_description_content

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

#short_description_content

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

И я покажу второй способ определения. Переключим в нижнем окне в меню инструментов разработчика в положение Elements. И наведем курсор мышки на модуль логотипов оплаты. Кликните правой кнопкой мыши. В выпадающем списке выберите нижний вкладку Просмотр кода элемента. В окне разработчика в HTML коде ведите курсор мыши пока блок модуля логотипов не выделиться в синий оттенок и увидите открывающий тег div с id=’product_payment_logos’. Это и есть дочерний идентификатор. Запишем его в настройках модуля в поле «Селектор модуля или HTML код « как селектор

#product_payment_logos

Выберем позицию по отношению к блоку в настройках со значением «Под блоком» и сохраним результат.

Переходим на страницу сайта и наблюдаем результат

Видео инструкция: https://www.youtube.com/watch?v=c5UafCGsr-U

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

Дополнительные возможности модуля

Как видно на странице настроек есть еще несколько полей которые мы не заполняли. Опишу для чего они используя пример. Модуль позволяет помимо переноса блоков дополнять станицу своим содержимым используя технологии HTML, JS и CSS. Например добавим виджет группа вконтакте для начала на боковую панель сайта.

Итак, определим родительский селектор. Для примера я предлагаю модуль категорий в боковой панели.

Копируем Html код

< div id = "vk_groups" > < / div >

и вставляем его в поле «Селектор модуля или HTML блок»

На моём блоге сайт набралось уже очень много информации по набирающему популярность движку PrestaShop. Если верить официальному сайту дистрибутив уже загрузило полтора миллиона пользователей. В российском интернете интерес к этой CMS так же растёт, даже если рассматривать этот блог – 60% переходов так или иначе связано с PrestaShop.
Поэтому я объединила все написанные мной посты, что то доработала и получилась полноценная инструкция по PrestaShop .

Январь 2015: Обновлены инструкции для PrestaShop 1.6

В зависимости от уровня пользователя можно работать с одним из трёх PDF файлов:

“Основы работы с PrestaShop для менеджера магазина ” – подойдёт пользователям, которые работают с уже настроенным магазином. В их задачи входит только поддержание актуальной базы товаров, поэтому все операции расписаны максимально понятным языком.

“PrestaShop – инструкция для пользователей ” – если вы самостоятельно запускаете интернет магазин, то Вам подойдёт эта инструкция. В ней расписаны основные операции по установке Prestashop, настройке основных компонентов, работе с модулями и шаблонами магазина. После прочтения инструкции вы сможете более плодотворно работать с престой, видоизменить шаблон, устанавливать и редактировать модули.

“PrestaShop – инструкция для разработчиков ” – основной упор сделан на программную часть: как разработать собственный модуль, за что отвечают классы и многое другое. Инструкция будет полезна разработчикам компонентов и пользователям решившим расширить базовый функционал престы.

Предыдущие релизы.

Июнь 2012 : В данный момент инструкция по Prestashop насчитывает 26 страниц, но я планирую добавлять новые при появлении свежих постов на блоге. В руководстве я постаралась рассмотреть более сложные вопросы, чем тривиальное добавление товара или категории. Например, в инструкции рассмотрены перемещения модулей из хука в хук, модификация дефолтного шаблона и т.п. Для продвинутых разработчиков мануал не подойдёт, т.к рассматривает более поверхностные вопросы, чем система классов или контроллеров.

Сентябрь 2012 : Основная инструкция не изменена, но добавлена дополнительная инструкция для начинающих или менеджеров магазина. Есть категория лиц, которым совсем не обязательно знать, что такое хостинг или как перенести корзину в другую колонку, например, это менеджеры магазина. Им предстоит работать с категориями, добавлять товар и делать тому подобные вещи. Именно для них написана инструкция “Основы работы с PrestaShop для менеджера магазина”, на данный момент в ней 4 главы и 13 страниц. Думаю со временем увеличить объём.

Август 2013 : Добавлена инструкция для разработчиков для PrestaShop 1.5. В ней более подробно рассмотрены базовые классы, описана процедура создания модуля и работа с шаблоном. Добавлена инструкция по обновлению PrestaShop до 1.5

Октябрь 2013: Все инструкции для Prestashop разделены на две папки, в зависимости от версии движка. Папка “prestashop 1_4″ содержит инструкции опубликованные в 2012 году, все новые инструкции размещены в папке “prestashop 1_5″.

Сентябрь 2014: Добавлены инструкции для PrestaShop 1.6.

PrestaShop — это популярная узкоспециализированная платформа для электронной коммерции. Сам движок бесплатен, очень легок в работе, но все темы и дополнения платные, потому это не самый популярный выбор. Тем не менее, у PrestaShop:

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

Как установить PrestaShop

Первый шаг — конечно, установка самой CMS на ваш хостинг. Сложностей с этим у вас не возникнет, если посмотрите видео, в котором мы расскажем:

• каковы минимальные системные требования для установки этого движка;
• как установить PrestaShop с помощью cPanel;
• какие настройки необходимо произвести после установки.

Настройка PrestaShop: администрирование

Успешно установив движок, нужно разобраться с его настройками и администрированием. С большим количеством настроек вы не столкнетесь, так как все основные из них уже работают по умолчанию. Это большое преимущество PrestaShop перед другими CMS, например WordPress или Joomla!, которые требуют установки специальных дополнений для ведения электронной коммерции. Однако, некоторую настройку все же предстоит сделать. Итак, что вы узнаете из видео:

• как поменять язык интерфейса;
• что собой представляют основные кнопки панели управления;
• как настроить отображение меню;
• какие категории есть в меню.

Настройка PrestaShop: обслуживание, администраторы, живой режим редактирования

Разберем самые важные настройки для работы интернет-магазина на PrestaShop. После просмотра нашего видеоурока вы научитесь:

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

Модули PrestaShop: как изменять, редактировать, добавлять и удалять

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

• где находится блок с модулями в админчасти;
• как добавлять, удалять, редактировать или изменять модули.

Как добавлять новые товары в каталог PrestaShop

PrestaShop предоставляет широкие возможности работы с товарами, помимо их добавления и редактирования. На видео рассмотрим:

• как добавлять комбинации и характеристики товаров;
• работу с файлами: кастомизация и вложения;
• как пошагово добавить товар и настроить его отображение;
• как вводить цены на товары;
• как работать с SEO-полями;
• как загружать новые файлы.

Как работать с категориями товаров в PrestaShop

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

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

В этом посте мы детально разберем специализированную CMS для создания интернет-магазина PrestaShop. Этот движок очень популярен на своей родине — во Франции, но пока не очень популярен в России. Всего лишь 5 % магазинов в России запущены на этом движке, против 37 % на OpenCart. Почему при богатом функционале, бесплатности и высоком уровне скрипт не может вырваться в лидеры порассуждаем в этом посте.

Вот так выглядит витрина: http://demo.prestashop.com/en/?view=front

Витрина интернет-магазина PrestaShop

Вот так выглядит админка: http://demo.prestashop.com/en/?view=back

Административная часть интернет-магазина на PrestaShop

Он отлично адаптирован для запуска интернет-магазина в России. Скаченный с официального сайта дистрибутив всегда 100% имеет поддержку русского языка. Это значит что работа с самых первых шагов будет комфортной: все интерфейсы окна установки и админка полностью на русском языке! Демо магазина на русском языке можно посмотреть на нашем тестовом сайте http://prestashop-testshop.ru/ который мы развернули на хостинге Beget в 1 клик благодаря автоустановщику хостинга.

Все самые популярные сервисы для интернет магазинов, такие как агрегаторы платежей и сервисы on-line чатов имеют официальный плагин для PrestaShop. Вы без труда сможете бесплатно скачать например модуль Яндекс.Кассы с официальной страницы агрегатора.

О компании PrestaShop и разработчиках

У истоков Prestashop стояли два человека Игорь Шлюмбергер и Бруно Левек. Сейчас они являются соучредителями, а компанией владеют частные инвесторы.

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

За первый месяц работы над движком PrestaShop, он был скачан более 1000 раз. Этот факт и послужил мощным толчком для дальнейшего развития. На сегодняшний день команда PrestaShop насчитывает 70 сотрудников, а Бруно Левек называет себя миллионером.

Бруно Левек

Появившись в 2007 году PrestaShop уверенно набирает популярность и в 2011 году становится лучшим бесплатным движком для электронной коммерции. об этом мы писали в статье: .

Команда PrestaShop

Радость команды при достижении 100 000 загрузок

Кстати Бруно ЛевекЮ будучи главныйм разработчиком и программистом лично проверяет весь новый программный код своего и всех официальных плагинов.

Недавно компания PrestaShop осуществила ребрендинг и сменила яркий кислотный дизайн с логотипом в виде руки у пакета на более строгий дизайн с фирменным питомцем: пингвином.

Новый логотип

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

Кому подойдет PrestaShop лучше всего?

«Если вам нужна готовая к работе зарубежная бесплатная CMS интернет-магазина со 100% официальным переводом, то PrestaShop это то что вам нужно!»

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

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

Основные плюсы и минусы PrestaShop

«Идеальных движков не бывает. Вечные поиск баланса между простотой и функционалом приводит к тому что всегда можно выделить плюсы и минусы движка!»

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

Плюсы PrestaShop

1. SEO возможности. У Престы все продумано для SEO уже в базовой поставке. Вам ну нужно будет искать сторонние плагины. ЧПУ генерятся автоматически, 301 редирект, заполнение мета-тегов description и keywords для страницы товара.
2. Продвинутый каталог товаров. Изначально PrestaShop ориентирован на средние магазины. По этому функционал для работы с каталогом товаров довольно широкий прямо из коробки. Вы сможете продавать товары со множеством доп. характеристик которые ваши покупатели смогут легко найти используя продвинутый фильтр по доп. свойствам, а затем сравнить.
3. Очень богатый функционал для удержания покупателей. Вы сможете вести базу покупателей, делать им E-mail рассылки об акциях или на из день рождения. Сможете работать с покупателями через соц. сети.

Минусы PrestaShop

1. Не достаточно популярен в России. Так уж повелось что в России его мало знают. В отличие например от OpenCart у него гораздо меньше разработчиков, гораздо меньше форумов где можно задать вопрос.
2. Создает нагрузку на сервер. Если у вас очень много товаров, то существенно возрастает нагрузка на сервер. По этому вам не подойдет бесплатный хостинг.
3. Нет возможности задать отличный от описания текст для анонса товара. Это приводит к дублям контента, что может плохо сказать на оптимизации.

Начало работы PrestaShop

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

Первое окно мастера настройки

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

Как обстоят дела с PrestaShop в России?

Как мы уже писали в предыдущем посте на долю PrestaShop в России приходится 5 %. Многие Российские сервисы для интернет-магазинов, такие как Яндекс.Касса выпускают плагин для удобной интеграции для PrestaShop. Более подробно об интеграции можете почитать в статье .

Имеется российское сообщество PrestaDev, есть несколько специализированных фирм которые занимаются разработкой на PrestaShop и выпуском плагинов.

Функционал PrestaShop

Уже из коробки PrestaShop обладает очень богатым функционалом. Всю мощь PrestaShop вы вряд ли освоите сразу. Бесплатно скачав и установив этот скрипт вы получаете интернет-магазин мирового уровня:

• всевозможные категории и свойства товаров
• удобный фильтр товаров по свойствам
• всевозможные маркетинговые инструменты
• на сайте Яндекса можно скачать плагин Яндекс.Кассы
• всевозможные статистические отчеты по товарам и покупателям
• всевозможные SEO настройки

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

Сравнение PrestaShop с другими бесплатными движками

Все движки интернет-магазинов имеют свои сильные стороны. Давайте сравним PrestaShop с другими популярными бесплатными движками и посмотрим проигрывает он им или напротив выигрывает:

• PrestaShop — это не полнофункциональная CMS в общепринятом смысле. Это узкоспециализированный движок интернет-магазина. В этом плане он заметно проигрывает например WooCommerce или VirtueMart которые будучи плагинами для полноценных CMS могут похвастаться обширными возможностями классических CMS.
• В качестве инструмента построения шаблонов используется шаблонизатор Smarty. Хотя для многих это будет плюсом.
• Недостаточное русскоязычное сообщество. Русскоязычная поддержка на официальном форуме не очень хорошая. В этом плане он сильно уступает например OpenCart для которой легко найти форум с кучей ответов на кучу вопросов по движку.
• Официальный сайт не переведен на русский язык. В этом плане все зарубежные движки схожи. Но некоторые части оф. сайта уже переведены (демка, магазин плагинов).
• Он все же более сложен чем например его злейший враг OpenCart. Хотя проще чем например Magento.

Выводы. Стоит ли использовать PrestaShop?

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

В посте вы можете ознакомиться с интернет-магазинами на этом движке.