Инструкция для начинающих в помощь для использования модуля Супер хук. Как добавлять новые товары в каталог PrestaShop

Движок PrestaShop требует базу данных MySQL для хранения информации. Перед началом установки PrestaShop убедитесь, что база данных MySQL уже создана. Вы можете сделать это через контрольную панель вашего хостинга с помощью инструмента phpMyAdmin.

Посмотретие подробную инструкцию Как создать базу данных MySQL. Если у вас возникнут сложности на данном этапе, то обратитесь за помощью к вашему хостеру.

При создании базы данных MySQL вам нужно будет указать название базы данных, имя поьзователя, пароль и запомнить адрес сервера базы данных. Сохраните все эти данные, так как они вам потребуются при установке PrestaShop.

Установка движка PrestaShop

1. Требования к серверу

Убедитесь, что ваш хостинг соответствует системным требованиям PrestaShop:

Система: Unix, Linux или Windows. Unix рекомендуется.
Веб сервер: Apache Web server 1.3 или новее, Microsoft"s IIS Web server 6.0 или новее и nginx 1.0 или новее.
PHP 5.2* или новее.
MySQL 5.0 или новее.
Как минимум 32 Mb RAM на сервере (лучше 64 Mb, чем больше, тем лучше).

PrestaShop будет работать с PHP 5.1 и новее, но версии до 5.2 содержат ошибки, которые могут привести к неработоспособности некоторых функций (выбор некорректного часового пояса).

2. Загрузка

Для установки PrestaShop вам потребуется загрузить движок с оффициального сайта www.prestashop.com/ru/download

Укажите ваше имя и e-mail в разделе загрузки и нажмите кнопку "Скачать" .

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

3. Извлечение файлов

После загрузки PrestaShop вам потребуется извлечь файлы и папки из архива.

Вы можете сделать это с помощью программ WinZip(PC) , StuffitExpander(MAC) и т.п.

Посмотрите следующие инструкции по извлечению файлов из архивов WinZip (PC) и StuffitExpander (MAC) .

Внимание: если в панели управления вашим хостингом доступна функция "Распаковать" файлы, вы можете вы можете загрузить на сервер сам.zip архив и распаковать его там.

4. Загрузка файлов движка PrestaShop

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

Это можно сделать с помощью Файлового менеджера в контрольной панели вашего хостинга или с помощью FTP менеджеров, как FileZilla, TotalCommander, CureFTP и т.п.

Вы можете посмотреть видео-инструкцию Как загрузить файлы на сервер или Как загрузить файлы с помощью cPanel (WebHost менеджер, WHM) .

5. Установка движка PrestaShop

Когда все нужные файлы будут загружены на сервер можно приступать к установке движка PrestaShop. Откройте ваш браузер и в строке адреса напишите доменное имя и путь к папке с Prestashop "domain_name/path_to_PrestaShop_directory" и перейдите на эту страницу. Вы должны увидеть страницу приветствия. Следуйте инструкциям на ней для установки PrestaShop.

Шаг 1: Installation Assistant (Выбор языка)

Выберите язык установки

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

Шаг 2: Installation Assistant (Лицензионное соглашение)

Ознакомьтесь с лицензионным соглашением.

После завершения нажмите кнопку "Next".

Шаг 3: Совместимость системы

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

Если ошибок нет, нажмите кнопку "Next".

Шаг 4: Настойка магазина

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

Все эти данные можно будет потом отредактировать через панель управления PrestaShop.

Шаг 5: Настройка системы

У вас уже есть база данных MySQL. Укажите данные для доступа к ней в соответствующих полях.

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

После завершения нажмите кнопку "Next".

Шаг 6: Завершение установки

Это завершающий этап установки.

Для обеспечения безопасности вам нужно удалить папку /install/ с вашего сервера.

Начиная с версии 1.5.4, PrestaShop берет на себя смену названия папки содержащей панель управления: оно содержит слово "admin" с четырьмя случайными цифрами, к примеру "admin8814". Смена названия происходит в момент, когда вы входите в папку "admin" впервые: PrestaShop переименует ее, а потом перейдет в папку с новым именем.

Войдите в панель управления PrestaShop перейдя в только что переименованную папку "admin" и можете приступать к наполнению магазина.

В случае любых сложностей вы можете обратиться к оффициальной инструкции PrestaShop .

Установка шаблона PrestaShop

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

1. Импорт темы

1. Подготовка шаблона.

Перед тем, как продолжать, убедитесь, что вы уже скачали шаблон и распаковали его архив. Вы можете посмотреть инструкцию как распаковывать архивы с помощью WinZip и StuffitExpander .

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

2. Установка.

Откройте панель управления PrestaShop и перейдите на страницу Preferences -> Themes . Вверху страницы кликните кнопку Add new theme (Добавить новую тему) .

В форме Import from your computer (Загрузить с Вашего компьютера) нажмите кнопку Add file (Добавить файл) и перейдите в папку "themeinstallator" в разархивированном шаблоне:

Выберите.zip файл с вашей темой и нажмите кнопку Save

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

Для того чтобы активировать новую тему, наведите курсор на миниатюру темы и нажмите на появившуюся кнопку "Use this theme" (Использовать эту тему) .

В появившемся окне отображается информация об используемых темой модулях, количестве модулей которые будет включены и выключены. Для продолжения нажмитеSave (Сохранить) .

После этого появится всплывающее окно с сообщением об успешной активации темы: тема успешно установлена, изображения перегенерированы под заданные в этой теме размеры. Для завершения установки нажмите кнопкуFinish (Завершить) .

2. Автоматическая установка шаблона с демонстрационными данными (Sample data installer)

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

Для того, чтоб установить демонстрационные данные шаблона с помощью модуля Sample data installer, сначала необходимо пройти Шаг 1 данной инструкции . После того, как все инструкции, описанные в Шаге 1 будут выполнены, в вашей админке автоматически добавится модуль Sample data installer.

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

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

3. Ручная установка шаблона с демонстрационными данными

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

Не устанавливайте демонстрационные данные на работающий сайт! Они заменят все товары в вашем магазине и перезапишут любые настройки.

1. Загрузка файлов шаблона

Откройте архив шаблона
Перейдите в папку /theme/
Загрузите папки /img/ , /modules/ и /themes/ в корневую папку PrestaShop

Посмотрите видео инструкцию как загрузить файлы на сервер по FTP иКак загрузить файлы с помощью cPanel .

2. Установка демонстрационных данных

Демонстрационные данные поставляются в виден.SQL файла. Он находится в корневой папке шалона и называется dump.sql

Файл Dump.sql может быть установлен через инструмент phpMyAdmin или панель для работы с базами данных вашего хостера. Вам может пригодиться инструкция Как импортировать дамп SQL .

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

После окончания импорта файла dump.sql вам нужно будет активировать шаблон.

В панели управления PrestaShop перейдите в раздел Preferences > Themes , выберите нужный шаблон в разделе Themes и нажмите Save .

3. Добавление языка в магазин.

После установки мультиязычного шаблона вам потребуется установить необходимые языки (Английский, русский, французский, испанский, немецкий). Это можно сделать следующим образом:

Перейдите в "Localization > Translations" в панели управления, найдите "Translation exchange" , и добавьте языки, выбирая их из выпадающего списка с помощью кнопки "Add or update a language" .

Если вы не хотите добавлять какие-то языки, вы можете удлить или отключить их в меню "Localization > Languages" .

Базовые инструкции

1. Как изменить название магазина

Для того, что бы изменить название вашего магазина откройте панель управления PrestaShop и перейдите в раздел Preferences > Store Contacts , раздел Contact details .

В поле Shop name укажите название вашего магазина и нажмите кнопку Save для сохранения изменений.

2. Как редактировать слайдер

Для редактирования изображений слайдера найдите модуль Image slider for your homepage на странице Modules вашего магазина PrestaShop. Он находится в разделе модулей Front Office Features . Нажмите кнопку Configure для редактирования модуля.

На странице настроек модуля вы можете изменить параметры (такие, как ширина, скорость и т.д.) и отредактировать слайды (изображения слайдов, URLы, описания и т.д.).

Extensions configuration

Olark Live Chat

Для того, чтобы использовать чат, доступный на демо шаблона, нужно зарегистрироваться на официальном веб-сайте Olark . После предоставления всех необходимых данных, вы получите код, который нужно добавить в файл \themes\themeXXX\footer.tpl перед тегом.

Информация о Cookies

По закону ЕС о Cookies Вы должны добавить на Ваш сайт модуль, который будет отображать предупреждение о cookies, используемых на сайте. Мы рекомендуем следующие модули.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Краткое описание Блока HTML

Веб-страница представляет собой систему блоков элементов HTML со своим контентом(содержанием) в каждом блоке, например,

Цена: 20 руб.

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

В примере представлены два блока, выделенные разными цветами зеленым и оранжевым. Каждый блок помимо содержания внутри (Цена: 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 блок»

Сделать самостоятельно собственный сайт в короткий срок — это вполне выполнимая задача. Все, что для этого потребуется – это четкий план действий, необходимая информация и достаточно свободного времени. Заработать на сайте в сети можно несколькими путями. Условно их можно разделить на категории: Продвижение в интернете лично созданного товара или услуги для привлечении клиентов. Заработок на…

Подавляющее количество пользователей не обратят внимание на сайт, если он имеет непривлекательный вид. В случае с интернет-магазинами – это потеря потенциальных клиентов и дополнительные убытки. Помимо хорошего дизайна, сайт должен иметь понятный интерфейс, легкий в навигации. В таком случае, понадобится специальная платформа для управления сайтом. Среди них — Abantecart и Prestashop. Но какая лучше? Чтобы…

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

Платформы Magento и PrestaShop – отлично подходят для ведения бизнеса. Но у каждой есть свои сильные и слабые стороны. Чтобы выбрать подходящее программное обеспечение, важно обратить внимание на технические характеристики. Обе платформы с открытым исходным кодом, потому они являются жесткими соперниками Углубившись в детали их работы, вы поймете, кто по праву может считаться лидером в…

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

Платформы PrestaShop и Shopify прекрасно подходят для создания сайта интернет-магазина. Отличаются продукты довольно сильно и предлагают различные способы для реализации. Человеку, который не имеет опыта в данной сфере, выбор между ними покажется непростым. Интернет-магазины: PrestaShop vs Shopfy Чтобы понять, какое из программных обеспечений лучше, нужно пройтись по основным требованиям к софту для создания онлайн-магазина: дизайн;…

В этом обзоре мы сравним работу платформ Prestashop и WooCommerce. От того насколько удачным будет выбор платформы для онлайн-маркета зависит успех в дальнейшем. Несмотря на общую схожесть принципов их работы, можно отметить существенные отличия. На подробное изучение всех особенностей IT-продуктов даже у опытного пользователя уйдет много времени. Что уж говорить о новичках? Ниже мы сравнили…

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

На моём блоге сайт набралось уже очень много информации по набирающему популярность движку 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.

Операционные системы