Moushe.ru

Блог обо всём

OpenCart вставим кнопки соц. сетей в footer



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

До:                                                       После:

До3

Возьмём несколько иконок:

VkOdFa

и закинем их в папку image (..\catalog\view\theme\default\image).

Открываем файл footer.tpl (..\catalog\view\theme\default\template\common) и вставляем в футер такой код:

<div class= "div3">
Мы в социальных сетях:<br/>
<a href="*"><img src="catalog/view/theme/default/image/Vk.jpg" alt="Мы В контакте" /></a>
<a href="*"><img src="catalog/view/theme/default/image/Od.jpg" alt="Мы в Одноклассниках" /></a>
<a href="*"><img src="catalog/view/theme/default/image/Fa.jpg" alt="Мы в Facebook" /></a>
</div>

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

<a href="http://vkontakte.ru/mag1987"><img src="catalog/view/theme/default/image/Vk.jpg" alt="Я в контакте" /></a> Подмигивающая рожица

Если всё сделано правильно вы увидите что-то похожее на это:

1

Немного подкорректируем:

<div id="footer">
<div class= "div3">
Мы в социальных сетях:<br/>
<a href="*"><img src="catalog/view/theme/default/image/Vk.jpg" alt="Мы В контакте" /></a>
<a href="*"><img src="catalog/view/theme/default/image/Od.jpg" alt="Мы в Одноклассниках" /></a>
<a href="*"><img src="catalog/view/theme/default/image/Fa.jpg" alt="Мы в Facebook" /></a>
</div>
<div class="div1">
<?php echo $text_powered_by; ?><br/>
<a onclick="window.open('https://www.paypal.com/uk/mrb/pal=W9TBB5DTD6QJW');"><img src="catalog/view/theme/default/image/payment.png" alt="" /></a>
</div>
</div>
</div>
<?php echo $google_analytics; ?>
</body>
</html> 

Откроем файл stylesheet.css (..\catalog\view\theme\default\stylesheet) и вместо этого:

#footer
{
width: 100%;
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD;
}
#footer .div1
{
float: left;
text-align: left;
}
#footer .div2
{
float: right;
text-align: right;
}

вставим этот код:

#footer
{
width: 100%;
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD;
}
#footer .div1
{
float: right;
text-align: center;
}
#footer .div3
{
float: left;
text-align: left;
}

Смотрим:

2

Уже лучше, но кое чего не хватает, доделаем div3:

#footer .div3
{
float: left;
text-align: center;
font-style: italic;
font-size: 12px;
color: #a3a3a3;
}

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

3

На сегодня всё, ждите следующих уроков. Улыбка

21 Комментарий

  1. Татьяна

    31.10.2011 at 16:36

    Спасибо за урок!
    Уже применила на практике! 🙂

  2. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    31.10.2011 at 19:44

    Всегда пожалуйста, смотрю вы переставили их влево. 🙂

    • Татьяна

      31.10.2011 at 20:49

      ну да, только вправо 😉
      слева ведь у меня картинка в футере 🙂

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      31.10.2011 at 21:08

      🙂

  3. Марианна

    04.08.2012 at 06:20

    Здравствуйте!
    А как вставить счетчик в футер, чтобы он был по центру? Пробовала в своей теме этого магазина добавить в файл футера с тегом center, не помогло, он все равно отображался слева, спасибо.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      05.08.2012 at 11:24

      Поместите счётчик в теги < *center> < */center> и почистите куки браузера! * — без этой звёздочки.

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

  5. Валентин

    12.01.2014 at 20:34

    Здравствуйте!
    Вроде бы сделал всё как вы описали, но на странице не воспринимает русский текст, только английские буквы появляются. Ссылки работают.
    Подскажите пожалуйста как решить эту проблему.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      12.01.2014 at 21:57

      Кодировку смените в файле на utf-8 без bom.

    • Валентин

      13.01.2014 at 12:38

      разобрался, спасибо:)

  6. Владислав, подскажите пожалуйста, а куда нужно вставить код соцсетей, чтобы они были вертикальные сбоку (справа или слева) и не двигались при прокрутке страницы?

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      17.04.2015 at 18:01

      Пишите мне в контакте — с ссылкой на сайт, ссылка на мою анкету есть в группе (футер сайта) и на странице Контакты.

  7. Я рекомендую использовать кнопки со счетчиками, которые показаны на первом рисунке. Если человек увидел на счетчике, что уже кто-то поделился статьей с друзьями, ему так же захочется поделится этой статьёй и он непременно воспользуется кнопками социальных сетей.

  8. Недавно по вашей статье, ставил кнопки для своего первого магазина, а теперь уже рождается второй, Но на опенкарт 2,1,01 пробовал по аналогии, но ничего не получилось… может сделаете урок по OC 2? все будут очень признательны. Спасибо за крутые уроки!

  9. Лидия

    15.02.2016 at 23:09

    Помогите пожалуйста, как поднять эти кнопочки вверх страницы?

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

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

  11. а статьи будут добавляться через эти кнопки ?

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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