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

У прикладі представлені два блоки, виділені різними кольорами зеленим та помаранчевим. Кожен блок крім змісту всередині (Ціна: 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 код заносимо дочірній селектор.

Позицію стосовно блоку вибираємо «Всередині блоку знизу» І зберігаємо результат.

Було стало

Відео інструкція: 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?

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

У пості ви можете ознайомитись з інтернет-магазинами на цьому движку.