Moushe.ru

Блог обо всём

OpenCart 2.1 html модуль (1 часть) – преимущества магазина



Всем привет, очень часто люди покупают не нужные модули для реализации информационных блоков с преимуществами магазина, на самом деле это очень легко реализуется с помощью прямых рук и стандартного HTML модуля идущего по умолчанию в OcStore 2.1 (OpenCart 2.1).

OpenCart-20.jpg

Список задач на сегодня:

1. Подберём иконки для нашего магазина

2. Работаем с модулем в админке

3. Выводим модуль в необходимое нам место

4. Работаем с CSS стилями

5. Наслаждаемся результатами нашей работы, ставим Лайк в ВК за статью или оставляем свой комментарий

Приступим:

1. Используем любой сток с графическими файлами, для статьи я использую готовый набор иконок с этого сайта — http://ru.freepik.com/, для примера я воспользуюсь вот этим набором иконок:

http://ru.freepik.com/free-vector/e-commerce-flat-items_957273.htm#term=бизнес%20иконки&page=2&position=1

oevlwh0

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

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

info_01 info_02 info_03 info_04

1.1. Заходим на наш хостинг по фтп и закидываем изображения в папку image вашего шаблона (у меня это стандартный шаблон – default), у меня это:

../catalog/view/theme/default/image

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

2. Админка –> Дополнения –> Модули –> HTML Содержимое –> Установить –> Редактировать:

  • Название: Информационные блоки на главной
  • Заголовок: Пусто

Описание –> Исходный код –> Вставляем этот код:

<div class="row">

</div>

это общая оболочка для наших информационных блоков, добавляем в неё 4 колонки для наших инфо блоков:

<div class="row">
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
</div>

Мы создали 4 одинаковые, но пока ещё пустые горизонтальные колонки для наших блоков, теперь добавим в колонки 4 блока с рамкой как у товаров:

<div class="row">

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
</div>
</div>

</div>

Теперь добавим внутрь блоков наши картинки:

<div class="row">

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_01.png"></div>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_02.png"></div>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_03.png"></div>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_04.png"></div>
</div>
</div>

</div>

Теперь добавим текст:

<div class="row">

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_01.png"></div>
<div class="text_info">Хорошие скидки и выгодные акции для наших постоянных покупателей</div>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_02.png"></div>
<div class="text_info">Бесплатная консультация для всех наших клиентов</div>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_03.png"></div>
<div class="text_info">Фирменная гарантия на все товары нашего интернет магазина</div>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
<div class="image_info"><img src="/catalog/view/theme/default/image/info_04.png"></div>
<div class="text_info">Быстрая доставка ваших заказов удобным для вас способом</div>
</div>
</div>

</div>

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

Статут –> Включено –> Сохранить

3. Админка –> Дизайн –> Схемы  –> Главная –> Редактировать –> Добавить модуль:

  • Модуль: HTML Содержимое > Информационные блоки на главной
  • Расположение: Вверху страницы
  • Порядок сортировки: 2

Нажимаем кнопку Сохранить

3.1. Админка –> Дизайн –> Схемы  –> Главная –> Редактировать:

  • Модуль: Карусель > Home Page
  • Расположение: Внизу страницы
  • Порядок сортировки: 0

Нажимаем кнопку Сохранить

3.2. Админка –> Дизайн –> Схемы  –> Главная –> Редактировать:

  • Модуль: Рекомендуемые > Home Page
  • Расположение: Вверху страницы
  • Порядок сортировки: 3

Нажимаем кнопку Сохранить

Проверка:

info_05

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вставим в него эти строки (можно в самый конец файла):

/* info_block */
.image_info {
margin: 10px auto;
text-align: center;
}
.text_info {
margin: 15px 10px;
text-align: center;
}

Результат:

info_06

На сегодня всё, подписывайтесь на наши новости и до новых встреч.

5 Комментариев

  1. Большое спасибо за четкий и подробный совет. Все работает. Вот попробовал тут cj50012.tmweb.ru, но когда сможешь сиотришь через мобильную версию, то картинки почему — то прижаты влево. Как можно это исправить.??? Статьи у вас классные. Чувствую от меня будет много вопросов.

  2. Спасибо.. Ступил немного:))))

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

    сайт http://крым-сейф.рф

    • Из-за вашего текста — разное количество строк, нужно дописать стили, в коммент их не вставить пишите мне в ВК

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика