Хочу сразу оговориться, что статья написана для веб-новичков, поэтому будет содержать ошибки терминологии, так как буду стараться описывать все простым языком.
Краткое описание Блока 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 блок»
- Подготовка
- Установка движка PrestaShop
- Требования к серверу
- Скачивание
- Установка движка
- Установка шаблона PrestaShop
- Установка без демо-продуктов
- Установка и настройка модулей
- Настройка изображений
- Установка демо-контента
- Как редактировать название магазина
- Как редактировать ссылки хедера
- Как редактировать баннеры
- Как редактировать слайдер
Подготовка
PrestaShop требует MySQL базы данных. Создать ее можно через панель управления хостингом, используя phpMyAdmin.
Данный туториал покажет, как создать MySQL базу данных . В случае проблем обратитесь к Вашему хотинг-провайдеру.
После создания базы у Вас будут такие детали: название базы, логин, пароль, сервер. Они понадобятся для инсталляции движка.
Установка движка PrestaShop
Требования к серверу
Убедитесь, что Ваш хостинг-сервер соотвествует требованиям PrestaShop:
- Система: Unix, Linux или Windows. Unix рекомендуема.
- Сервер: Apache Web server 1.3 или выше, Microsoft IIS сервер 6.0 или выше, и nginx 1.0 или выше.
- PHP 5.2* +.
- MySQL 5.0 +.
- По крайней мере 32 Mb памяти RAM на сервере.
* PrestaShop может работать с версией PHP 5.1 или выше, но это может привести к некорректной работе движка.
Скачивание
Для инсталляции PrestaShop Вам нужно скачать установочный файл с официального сайта www.prestashop.com/en/downloads
В секцию для скачивания введите Ваше имя, email, нажмите кнопку ‘Download’ .
Версия движка PrestaShop должна в точности соответствовать версии шаблона, которую Вы можете проверить на странице просмотра шаблона. Все предыдущие релизы PrestaShop доступны на
Распаковка файлов
После скачивания файлов Вам нужно их распаковать.
Это можно сделать любым архиватором, таким как WinZip(PC) , StuffitExpander(MAC) и др.
Данные туториалы покажут, как распаковать файлы, используя WinZip(PC) и StuffitExpander(MAC) .
Вы также можете распаковать файлы, используя файловый менеджер хостинг-панели, если данная функция доступна.
Загрузка файлов PrestaShop на сервер
Если Вы распаковали файлы на Ваш компьютер, то теперь их нужно загрузить на хотстинг-сервер.
Это можно сделать, используя файловый менеджер, или FTP клиент, такой как FileZilla, TotalCommander, CureFTP и др.
Установка движка
После загрузки файлов, Вы можете начать инсталляцию, набрав сайт в адресной строке ‘domain name/путь к директории PrestaShop’ . Вы увидите страницу приветствия. Следуя инструкциям, продолжите установку.
Step 1: Добро пожаловать
Выберите установочный язык
Замечание: установочный язык не повлияет на язык магазина. По умолчанию язык магазина — английский. Вы можете установить дополнительный локализационный пакет для смены языка магазина.
Нажмите ‘Next’ для продолжения.
Step 2: Совместимость системы
Проверьте настройки PHP и разрешения папок. В случае ошибок обратитесь к Вашему хостинг-провайдеру.
Если все верно, нажмите на кнопку ‘Next’ (далее).
Step 3: Настройка базы данных
Введите корректные детали базы данных, которую Вы создали ранее.
Вы также можете взять детали базы у Вашего хостинг-провайдера.
Нажмите’Next’.
Step 4: Настройка магазина
Все эти настройки могут быть изменены позже в админ-панели.
Step 5: Установка завершена
Это последний шаг установки PrestaShop.
В целях безопасности Вам нужно удалить папку /install/ и переименовать папку /admin/ на сервере.
Вы можете войти в админ-панели по такому адресу: http://ваше_доменное_имя/ваша_админская_папка/ .
Если у Вас возникают трудности, ознакомьтесь с официальным руководством по установке PrestaShop .
Установка шаблона PrestaShop
Установка шаблона без демо-продуктов
Этот способ инсталляции подходит, когда Вы просто хотите поменять тему магазина. Этот метод не повредит текущие файлы или продукты в базе данных.
Загрузка файлов и активация темы
Перед продолжением убедитесь, что все фалы скачены и распакованы. Детальные туториалы покажут, как распаковывать файлы, используя WinZip или StuffitExpander .
Когда файлы распакованы, загрузите их на сервер.
- Откройте папку с шаблоном.
- Папку /theme/ .
- Загрузите папки /img/ , /modules/ и /themes/ в корневую папку инсталляции PrestaShop.
- Когда загрузка завершена, откройте админ-панель PrestaShop.
- В верхнем меню откройте Preferences > Appearance .
- Выберите Ваш шаблон в секции Themes и нажмите Save , чтобы сохранить изменения.
Ваша тема активирована. Теперь Вам нужно настроить модули.
Установка и настройка модулей
Все шаблоны предоставляются со специфическими настройками для модулей. Чтобы шаблон был таким, как на демо-сайте, Вам нужно настроить модули в админ-панели.
На данной странице Вы увидите список всех доступных модулей. Некоторые их них Вам необходимо будет установить.
Чтобы установить модуль, найдите его в списке и нажмите ‘Install’ :
Если установка была произведена корректно, Вы увидите следующее сообщение:
Здесь Вы можете активировать модули (Enable |Disable ), сбросить настройки к настройкам по умолчанию (Reset ), удалить модуль (Delete ) или настроить их (Configure ).
2. После активации всех необходимых молей, Вам нужно прикрепить их к корректным позициям.
В админ-панели откройте Modules > Positions . Чтобы разместить модуль на определенную позицию, просто перетащите его туда.
Список модулей темы доступен в таблице ниже.
Пожалуйста, обратитесь в документации шаблона для большей информации о модулях, использованных в шаблоне, их позиции и порядке.
Настройка изображений
В PrestaShop Вы можете использовать предустановленные разрешения для изображений, категорий изображений, производителей и т.д.
Например: изображения с разрешениями ‘home’ , как правило, используются в списке категорий. ‘Large’ для изображений на на странице деталей продукта.
Чтобы изменить разрешения изображений, откройте админ-панель, Preferences > Images и установите разрешения ниже.
Пожалуйста, обратитесь в документации шаблона для большей информации об изображениях в шаблоне.
В некоторых случаях, после изменения разрешений изображения, Вам нужно их регенерировать. Это можно сделать, используя секцию Regenerate thumbnails (регенерировать миниатюры).
Установка шаблона с демо-контентом
Демо-контент сделает Ваш шаблон точно таким же, как на демо-сайте, с такими же настройками, модулями, изображениями, контентом и т.д.
Не используйте демо-контент для работающего сайта, т.к. он перезапишет все настройки, контент, продукты.
Загрузка файлов шаблона
Чтобы загрузить файлы на сервер
- Откройте папку с шаблоном
- Затем /theme/
- Загрузите папки /img/ , /modules/ и /themes/
Установка демо-контента
Демо-клнтент предоставляется в виде dump.sql файла, который находится в папке /sources/ .
Перед продолжением сделайте резервную копию базы данных.
Убедитесь, что версия шаблона и движка совпадают, иначе база может быть повреждена.
Когда Вы импортировали dump.sql, Вам нужно активировать тему.
В админ-панели откройте Preferences > Appearance , выберите шаблон в секции Themes и нажмите Save , чтобы сохранить изменения.
Установка шаблона поверх существующего сайта
Эта установка нужна, если у Вас работающий сайт и Вы просто хотите поменять тему.
1. Загрузка шаблона и активация темы
- Откройте папку с шаблоном
- Затем /theme/
- Загрузите папки /modules/ и /themes/ в корневую папку инсталляции.
- Откройте папку /img/ шаблона, загрузите logo.jpg , favicon.ico файлы в директорию на сервере /img/ .
- В админ-панели выберите Вашу тему в Preferences > Appearance > Themes и нажмите Save , чтобы сохранить изменения.
Установка модулей
Откройте админ-панель и настройте модули в соответствии с таблицей конфигурации.
Вы уже давно мечтаете запустить свой собственный интернет-магазин , но не знаете, с чего начинать и какую систему использовать?
Нет проблем, эта статья поможет вам изучить ключевые факторы PrestaShop – одной из наиболее используемых бесплатных решений по ведению электронной торговли . К тому же, у системы много поклонников и дружелюбное сообщество.
- Что же такое PrestaShop?
И все это лишь малая часть возможностей и функций. вы можете ознакомиться с полным списком всех функций.
- Сайты, основанные на PrestaShop
Мы подготовили список нескольких абсолютно разных он-лайн магазинов, которые основаны на этой системе. Вы увидите множество возможностей и сможете ощутить свободу в создании собственных тем оформления.
03.
04.
05.
06.
07.
08.
09.
10.
Как вы видите, PrestaShop может быть оформлен исключительно по вашему желанию. Если вы хотите посмотреть больше сайтов, то нажмите .
- За кулисами: Требования и Установка
Если вы уже решили воспользоваться PrestaShop , то прежде всего вам нужно её.
На сегодняшний день самой стабильной версией считается v.1.2.5. Разработчиками также была выпущена бета-версия буквально на днях (v.1.3 beta 1), но эту версию лучше использоваться разве что для тестирования.
Системные требования:
Перед тем как начинать скачивать, убедитесь что ваш сервер соответствует параметрам, представленным ниже:
* Linux, Unix или Windows OS
* как минимум Apache 1.3 или IIS 6
* PHP 5.0* или выше
* MySQL 5** или выше
* Некоторые версии PHP5 мешают нормальной работе PrestaShop . вы можете ознакомиться со списком версий, с которыми не возникает проблем.
** PrestaShop также может работать и с MySQL версий от 4.1.14 по 5.0, но некоторые функции могут работать неправильно, или некорректно.
- Процесс установки
Теперь вы ознакомлены с системными требованиями. Теперь вы можете начинать устанавливать PrestaShop .
После того как вы загрузите скрипт в директорию на сервере, вы можете начинать установку.
Этап 1:
Для начала вам надо установить права на директорию, в которую вы закачали установочный комплект системы.
Если вы загрузили систему в корневой каталог вашего сайта (например, http://yourdomain.com), то просто открывайте браузер и наберите адрес.
Если вы все сделали правильно, то установщик PrestaShop откроется автоматически, с помощью которого вы без труда установите систему. На первой ступени вы сможете выбрать язык установки и для дальнейшего использования в он-лайн магазине.
Этап 2:
На следующей ступени (изображение сверху), приложение выполнит проверку системы. Если все в порядке, то вам будут отображаться зеленые галочки, и вы сможете дальше продолжить установку.
Если у вас возникли какие-то проблемы, то не расстраивайтесь и попробуйте спросить на или почитать еще раз. Мы уверены, что кто-то из 50 тысяч человек точно поможет вам.
Этап 3:
На третьем этапе установки, вам нужно будет ввести данные для подключения к базе MySQL.
Если вы первый раз используете PrestaShop, то выберите полную установку системы. Этот вариант подразумевает установку стандартных модулей, примеров товара и стандартную тему.
Этап 4:
Теперь установка почти завершена. Теперь вам просто осталось ввести данные администратора. Опционально вы также можете загрузить логотип для своего магазина.
Как только вы сделаете это, нажимайте на переход «дальше».
Этап 5:
PrestaShop установлен и вы можете использовать его!
На последней странице вы увидите все введенные вами параметры. А также вы получите ссылки перехода к использованию вашего магазина и в админ-панель.
Не забудьте удалить папку install с сервера и переименовать «admin» ради безопасности.
- Установка новых модулей
Установка новых модулей PrestaShop представляет собой очень легкий процесс. Вот что вам нужно сделать:
1. Распакуйте модуль и закачайте его на сервер посредством FTP-браузера. Вам нужно скопировать модуль в папку установщика /modules.
2. Авторизуйтесь в админ-панели и перейдите во вкладку Modules.
3. Найдите новый модуль в списке.
4. Кликните под надписи «install».
5. Если потребуется, кликните по «Configure» (значок шестеренки) для того чтобы завершить установку модуля.
Как только вы закончите настройку модуля, не забудьте проверить его.
- Установка новых тем оформления
Для установки новой темы оформления PrestaShop, вам нужно сделать следующее.
1. Скачайте и распакуйте тему на локальном компьютере.
2. Загрузите папку с темой в директорию /themes на сервере.
3. Авторизуйтесь в админ-панели и перейдите в Preferences > Appearance.
4. Выберите вашу новую тему и примените изменения, нажав на кнопку «Save».
Поздравляем! Теперь вы установили вашу новую тему оформления, для того чтобы посмотреть ее, перейдите на главную страницу вашего магазина.
- В заключение
Как видите, система очень проста в использовании, у нее полно различных функций, а также вы можете расширить ее с помощью дополнительных модулей. И также не стоит забывать, эта система является отличным решением разработки он-лайн магазина, которым пользуются многие.
Еще одно преимущество системы – это то, что она является полностью бесплатной и у нее огромное число поклонников и пользователей, у которых всегда можно спросить совета.
Теперь вы можете идти и разрабатывать собственные темы оформления или использовать уже готовые. Есть также несколько бесплатных тем, которые вы можете скачать и установить на свой сервер.
Удачи в начинаниях!
Добро пожаловать в новую серию уроков по установке интернет-магазинов! В этом разделе мы с вами научимся устанавливать CMS под названием PrestaShop.
Итак, начнем. Первое, что нам необходимо сделать — это перейти по ссылке https://www.prestashop.com/en/download и скачать версию движка 1.6.
Если вы используете локальный веб-сервер , создать папку для нашего нового проекта по пути: c:\WebServers\home\presta.shop\www и распаковать файлы из скачанного архива по этому пути:
Перезапускаем denwer и, если вы создали папку с таким же именем как у меня, переходим в браузере по адресу: http://presta.shop/ и видим… :
А видим вот такую картину, которую еще называют «кракозябры»… Чтобы мы могли нормально установить prestashop вы в своем браузере можеет найти пункт меню «кодировка» и выбрать там кодировку Юникод (utf-8), либо чтобы при следующем заходе у вас не было таких проблем, давайте избавимся от «кракозябров» при установка prestashop раз и навсегда. Для этого в корне сайта (папка www) сосздайте файлик с именем .htaccess. Да, именно вот так, с точкой в начале имени. А внутри пропишите всего одну строчку AddDefaultCharset utf-8 . И теперь обновляем страницу http://presta.shop/ и… о, чудо!
Приступаем к самой установке. Нажимаем «Вперед», на следующем шаге ставим галочку, что соглашаемся с условиями лицензии и заполним информацию о нашем магазине:
Теперь нам необходимо создать базу данных для дальнейшей установки, как это сделать можно прочитать в разделе по созданию базы данных. Назовем нашу БД prestashop и укажем данные на странице подключения к БД (тут же можно сразу нажать кнопку проверки соединения):
И после успешной установки видим такую картинку:
Ели вы увидели такую картинку — поздравляю! Мы установили PrestaShop и можем приступать к онлайн-торговле.
А на этом здесь все. Спасибо за внимание и до встречи в следующих моих уроках.