Moushe.ru

Блог обо всём

OcStore 1.5.5.1.2 используем модуль html блок (1 часть)



Очень часто нам необходимо вывести на страницах интернет магазина свой код, но как это сделать? Я попытаюсь рассказать вам об этом в новом цикле статей. В этой статье мы установим модуль Html блок 3.3.1 на свой сайт и выведем с его помощью полезную информацию о нашем магазине на домашнюю страницу нашего шопа.

OcStore15512

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

1. Скачаем и установим модуль

2. Подключим иконочный шрифт на сайт

3. Работаем с модулем

4. Прописываем css стили

Приступим:

1. Скачиваем свежую версию модуля по этой ссылке — html блок

2. Для работы нам необходим хороший иконочный шрифт, как вам известно я чаще всего использую этот: Font Awesome не будем нарушать традиции. Улыбка

Подключается шрифт очень просто, открываем файл header.tpl вашего шаблона и добавляем в блок <head> эту строку:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

прочитать об этом подробнее вы можете в этой статье: OcStore 1.5.5.1.2 добавляем нижнюю панель

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

opencart_html_block_01opencart_html_block_02opencart_html_block_03opencart_html_block_04

если у вас не стандартный шаблон (не default, а к примеру moneymaker) то содержимое папки default (catalog\view\theme/default) модуля нужно скопировать не только в папку default, а ещё и в папку вашего шаблона.

Теперь заходим в админку нашего сайта и установим модуль:

opencart_html_block_05opencart_html_block_06

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

3.1. Переходим к настройкам модуля:

Админка – Дополнения – Модули — HTML блок – Изменить

opencart_html_block_07

Переходим на вкладку Блоки:

opencart_html_block_08

и нажимаем кнопку Добавить блок:

opencart_html_block_09

Со временем у нас появляется куча разнообразных модулей и чтобы в них не запутаться добавляем заголовок блока, давайте дадим ему название: Информация о магазине

opencart_html_block_10

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

opencart_html_block_11

Теперь мы можем создать необходимое нам содержимое, меня часто просят подробнее писать о html и css, поэтому буду писать пошагово, сначала сделаем обёртку:

<div id=”info_shop”></div>

теперь создадим в обёртке первый пункт, к примеру такой:

Гарантия на товары 14 дней

у нас будет несколько пуктов с разным оформлением, обернём наш текст в персональную обёртку:

<div id=”info_shop_1”>Гарантия на товары 14 дней</div>

уже лучше, но наверняка мы захотим чтобы 14 дней расположились на нижней строке и были набраны более крупным, жирным цветом и возможно другого цвета? Делаем:

<div id=”info_shop_1”>Гарантия на товары <div id=”info_shop_big”>14 дней</div></div>

хорошо, текст оформлен, а как-же иконка? Просто текст же не интересен, правильно? Переходим на сайт иконочного шрифта и подбираем иконку, к примеру иконку с календарём:

opencart_html_block_12

щёлкаем на неё и попадаем на страницу с кодом выбранной иконки, копируем её код:

opencart_html_block_13

Дополним наш код иконкой:

<div id=”info_shop_1”><i class="fa fa-calendar"></i>Гарантия на товары <div id=”info_shop_big”>14 дней</div></div>

первый пункт готов, весь код выглядит вот так:

<div id=”info_shop”><div id=”info_shop_1”><i class="fa fa-calendar"></i>Гарантия на товары <div id=”info_shop_big”>14 дней</div></div></div>

код читается плохо, давайте его чуть-чуть отформатируем:

<div id=”info_shop”>
<div id=”info_shop_1”><i class="fa fa-calendar"></i>Гарантия на товары <div id=”info_shop_big”>14 дней</div></div>
</div>

и добавим второй пункт:

<div id=”info_shop”>
<div id=”info_shop_1”><i class="fa fa-calendar"></i>Гарантия на товары <div id=”info_shop_big”>14 дней</div></div>
<div id=”info_shop_2”><i class="fa fa-map-marker"></i>Бесплатный<div id=”info_shop_big”>самовывоз товара</div></div>
</div>

потом третий пункт:

<div id=”info_shop”>
<div id=”info_shop_1”><i class="fa fa-calendar"></i>Гарантия на товары <div id=”info_shop_big”>14 дней</div></div>
<div id=”info_shop_2”><i class="fa fa-map-marker"></i>Бесплатный<div id=”info_shop_big”>самовывоз товара</div></div>
<div id=”info_shop_3”><i class="fa fa-car"></i>Доставка заказа<div id=”info_shop_big”>на следующий день</div></div>
</div>

четвёртый:

<div id=”info_shop”>
<div id=”info_shop_1”><i class="fa fa-calendar"></i>Гарантия на товары <div id=”info_shop_big”>14 дней</div></div>
<div id=”info_shop_2”><i class="fa fa-map-marker"></i>Бесплатный<div id=”info_shop_big”>самовывоз товара</div></div>
<div id=”info_shop_3”><i class="fa fa-car"></i>Доставка заказа<div id=”info_shop_big”>на следующий день</div></div>
<div id=”info_shop_4”><i class="fa fa-rub"></i>Удобные способы<div id=”info_shop_big”>оплаты</div></div>
</div>

(P.S. — если вы копируете мой код написанный выше и вставляете в свой модуль то замените все кавычки, на латинские, переключите раскладку клавиатуры на ENG, и нажимайте на клавишу Э с зажатой клавишей Shift, иначе код будет иметь по две открывающие и закрывающие div id кавычки и стили не будут работать, все не сделавшие этого как обычно будут срать в комментарии – “а-а-а, стили не работают”)

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

Модуль готов, осталось его вывести в необходимом месте, а после вывода оформить, переходим:

Админка – Дополнения – Модули – Html блок – Изменить

opencart_html_block_17

нажимаем кнопку Добавить модуль

opencart_html_block_18

и настроим:

Информация о магазине / Главная / Содержание шапки / Включено / 2

opencart_html_block_19

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

opencart_html_block_20

Переходим на витрину нашего магазина:

opencart_html_block_21

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

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css (если вы используете не стандартный шаблон default, то переходите в его папку) и создадим в конце файла новые стили:

/* info_shop */
#info_shop {
padding: 10px;
text-align: center;
font: bold 12px Arial;
}
#info_shop_1, #info_shop_2, #info_shop_3, #info_shop_4{
display: inline-block;
padding: 20px;
border: 1px solid #777;
border-radius: 3px;
}
#info_shop_1:hover {
background: #BBDEFB;
}
#info_shop_2:hover {
background: #90CAF9;
}
#info_shop_3:hover {
background: #64B5F6;
}
#info_shop_4:hover {
background: #42A5F5;
}
#info_shop div:hover, #info_shop div:hover .fa {
color: #fff;
}
#info_shop .fa {
font-size: 35px;
color: #777;
display: block;
padding-bottom: 20px;
}

Давайте немного расскажу по стилям:

#info_shop – обёртка содержимого, центрирует дивы наших блоков, задаёт небольшие отступы и задаёт единый стиль всем надписям наших блоков

#info_shop_1, #info_shop_2, #info_shop_3, #info_shop_4 – присваивает одинаковые стили для наших блоков, выстраивает все блоки в линию, добавляет бордюр со всех сторон блока с закруглёнными углами и отодвигает бордюр от внутреннего содержимого

#info_shop_1:hover , #info_shop_2:hover , #info_shop_3:hover , #info_shop_4:hover – просто присваивают каждому блоку свой персональный фон при наведении на блок курсором мыши

#info_shop div:hover, #info_shop div:hover .fa – при наведении курсором мыши на любой блок перекрашивает иконку и надпись в белый цвет

#info_shop .fa – задаёт размер и цвет иконки, показывает браузеру что иконку нужно отображать отдельно от текста, добавляет отступ от иконки к тексту

Результат нашей работы можно увидеть ниже:

opencart_html_block_22opencart_html_block_23

Оформление, размеры и т.д. вы можете изменить самостоятельно, если захотите в отдельной статье покажу пару примеров оформления и покажу как сделать надпись ссылкой на статью или определённый товар.

На сегодня всё, до новых встреч.

3 Комментария

  1. Шамиль

    10.11.2015 at 01:14

    Полезная статья, спасибо!
    А как сделать иконки в несколько рядов? добавлял info_shop_1, #info_shop_2, #info_shop_3, #info_shop_4, #info_shop_5, #info_shop_6, #info_shop_7, #info_shop_8 и т.д. но они липнут друг к другу и получаются меньшего размера , вот скриншот:
    https://img-fotki.yandex.ru/get/4111/111062587.0/0_1bcb26_9cd65bde_XXXL

    И еще вопрос, как сделать так, чтобы иконка была не сверху, а скажем слева, вот к примеру:
    https://img-fotki.yandex.ru/get/15502/111062587.0/0_1bcb27_b86365fb_XL.png

  2. Благодарю! Очень познавательная статья!!

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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