Opencart 2.x - Html Модуль (1 Часть) – Преимущества Магазина

Тема в разделе "Модули и дополнения", создана пользователем admin, 6 ноя 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

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

    OpenCart-20-3.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=бизнес иконки&page=2&position=1

    OEVLWH0-300x300.jpg

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

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

    info_01.png info_02.png info_03.png info_04.png

    1.1. Заходим на наш хостинг по ftp и закидываем изображения в папку 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
    Нажимаем кнопку Сохранить

    Проверка:

    1.png

    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;
    }
    Результат:

    2.png

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

    Вложения:

    verterxxx, dacent118, Pavlik и 2 другим нравится это.
  2. Offline

    Serega PS Пользователь

    Сообщения:
    28
    Симпатии:
    20
    Репутация:
    0
    не обязательно html я это реализовал через обычный вывод банеров создав свой модуль который подстраивается под ширину сайта и стая лимиот от 1 до хоть 1000 будет присваиваться свой размер!
    + с креплением под футероом и показом на всех страницах!
    как будет время выложу все свои бесплатные модули!
     
    admin нравится это.
  3. Offline

    Serega PS Пользователь

    Сообщения:
    28
    Симпатии:
    20
    Репутация:
    0
    много граф ошибок простите!
     
  4. Offline

    Relaxtutrut Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    Спасибо