CMS OpenCart 3.0 мы в соц. сетях (2 вариант)

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

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

Для подбора разнообразных иконок я использую вот этот замечательный ресурс: flaticon.com, мой выбор пал вот на такие иконки:

P.S. – Для примера я взял всего 4 иконки, так как их вставка очень проста и вы сможете самостоятельно встроить на сайт нужное вам количество иконок.

Откроем свой файловый менеджер (рекомендую использовать FileZilla, это простой и удобный файловый менеджер) и переходим: ../image/catalog/, создадим внутри новый каталог social (задаём права доступа к новой папке 700) и поместим в него наши крутые иконки.

P.S. – все ваши иконки соц. сетей должны располагаться по этому адресу: ../image/catalog/social/

Заходим в админку вашего интернет магазина и переходим: Модули / Расширения -> Модули / Расширения -> Текстовый блок – HTML -> Добавить и заполняем:

  • Название модуля: Мы в социальных сетях (2 вариант)
  • Заголовок: Мы в социальных сетях (2 вариант)
  • Статус: Включено

В поле Текст переключаемся на Code View (иконка </>) и заполняем:

<div class="col-xs-12 col-sm-12 social-icons">
  <a href="ваша ссылка"><img src="image/catalog/social/facebook.png" alt="Facebook" title="Facebook"></a>
  <a href="ваша ссылка"><img src="image/catalog/social/vk.png" alt="В Контакте" title="В Контакте"></a>
  <a href="ваша ссылка"><img src="image/catalog/social/twitter.png" alt="twitter" title="twitter"></a>
  <a href="ваша ссылка"><img src="image/catalog/social/instagram.png" alt="instagram" title="instagram"></a> 
</div>

После заполнения вновь нажимаем Code View и только после этого нажимаем кнопку Сохранить.

Теперь переходим: Дизайн -> Макеты -> Home -> Редактировать -> Верх страницы -> Мы в социальных сетях (2 вариант) -> Добавить -> Сохранить

Смотрим на результат:

CMS OpenCart 3.0 иконки социальных сетей (2 вариант)
CMS OpenCart 3.0 иконки социальных сетей (2 вариант)

Неплохо, но нужно отцентрировать и добавить отступы между иконками, для этого откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

.social-icons {
  text-align: center;
}
.social-icons {
  margin: 10px 0;
}
.social-icons a + a {
  padding-left: 10px;
}
.social-icons img:hover {
  opacity: 0.5;
}

Чистим все кеши (в том числе и браузера) и смотрим результат.

На этом всё, следите за выходом новых статей в нашей группе в ВК.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru

Комментарии

Navigate