Link in progress
Обо мне
Контакты в шапке сайта opencart

Контакты в шапке OpenCart Старый опыт работы с этом CMS впечатлил меня начать работать с ней дальше и писать статьи о рабочих решениях. В первом уроке мы простеньким способом покажем контакты в шапке нашего Интернет-магазина.

1. Редактируем catalog\view\theme\default\template\common\header.tpl

1
2
3
4
5
6
7
8
9
10
11
12
13
Находим:
 
<?php if ($logo) { ?> ...
</div>
<?php } ?>

После него вставляем:

<div id="head_contact">
    <div class="life">+380939797977</div>
    <div class="Kyivstar">+380979898999</div>
    <div class="MTC">+380509778899</div>
</div>

2. Редактируем catalog\view\theme\default\stylesheet\stylesheet.css

1
2
3
4
5
6
7
8
9
10
11
12
Находим:

#header #logo { ... }

После вставляем:

#header #head_contact {
    position: absolute;
    left: 23em;
    width: 15em;
    top: 3.7em;
}

opencart_less_1_img_1
Все хорошо, но как то не смотрится. Подвинем все немного (+ добавили еще 2 номера):

3. В тот же файле стиля находим:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#currency {
...
left: 500px;
}

и меняем left: 500px; на :

left: 570px;

Далее находим:

#language {
left: 405px;
...
}

и меняем left: 405px; на:

left: 465px;

opencart_less_1_img_2

В большинстве случаев этого достаточно. Но мы еще хотим возле номеров поставить иконку операторам.

4. Находим сам иконки или можете скачать те, что в примере, загружаем картинки по адресу catalog/view/theme/default/image.

5. Открываем файл стилей stylesheet.css и ищем:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#header #head_contact {
...
}

и после него вставляем:

.life, .Kyivstar, .MTC {
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
}
.life {
    background-image:url(../image/life.jpg);
}
.Kyivstar {
    background-image:url(../image/kyivstar.jpg);
}
.MTC {
    background-image:url(../image/mts.jpg);
}

6. Загружаем все файлы на наш сервер, обновляем страницу и радуемся результатом.
opencart_less_1_img_3
В этой статье был описан банально простой способ вынести контакты в шапку сайта. Но хочется как то попотеть и в результате иметь возможность править номера телефона из админ-панели. Думаю это мы и сделаем в следующем уроке. До встречи и не забывайте, что мы еще начинающие программисты и вот тут проходим обучение вместе.

Контакты в шапке сайта opencart: 15 комментариев

  1. Забыл написать, версия ОС самая актуальная на момент написания урока: 1.5.5.1. НО англоязычная версия уже есть 2.1.0.1. Думаю, что урок будет актуальным до версии 2.0. Думаю, может начать писать уроки к англоязычной версии? а то русская 1.5.5 старенькая… Скачать новую версию!

  2. Сергей

    Спасибо огромное Вам! Очень помогло и вывел номер. Правда мне нужен был только один и сам переделал, а вот картинку возле него так вставить и не получилось. Да и сам номер хотелось бы сделать шрифтом поболее и не знаю как.

    1. Пользуйтесь.
      Вот вот будет следующий урок о том, как вывести и картинку, используя админ-панель.

  3. Эдуард

    Здравствуйте
    У Вас получается столбиком, а как осуществить такое строкой
    +380939797977 +380979898999 +380509778899? И чтобы между были картинки лого. Пробовал экспериментровать с CSS, но ничего не выходит. Заранее спасибо!

    1. Добрый день.
      Два варианта:
      1. Удалить полностью контейнер div

      1
      <div class"..."></div>

      оставит только номера.
      2. Использовать в CSS свойство float.
      Удачи.

  4. Эдуард

    Большое Вам спасибо за помощь! Все получилось, но путем создания 3-х header_contact(l,k,m), потом каждый из них выстроил по отступам. Может кому-то пригодится. Еще раз спасибо!

    1. Получилось — это хорошо. Но такой способ немного увеличивает код и вес файла tpl.

      P.S.
      вышел новый урок — Контакты в шапке opencart с картинкой через админ-панель

      и может кто будет применять уроки к версии 2.* — поделитесь результатом. Следующие уроки будут уже писаться на версии 2.1.0.1

  5. Владимир

    Здравствуйте! Спасибо Вам за работу. Я вывел телефонные номера, только иконки не выводятся. В чем дело? Спасибо.
    #header #head_contact {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #4682B4;
    line-height: 30px;
    word-wrap: break-word;
    .Vodafone, .Kyivstar, {
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
    }
    .Vodafone {
    background-image:url(../image/vodafone.png);
    }
    .Kyivstar {
    background-image:url(../image/kyivstar.png);
    }
    }

  6. Варианты:
    — не правильно задано имя картинки в CSS;
    — не правильно задан путь к картинкам;
    — не правильно задано имя класса DIV в header.tpl.
    — НЛО.
    Этот урок очень прост и не очень актуальный. Вот ТУТ урок будет по практичнее.

  7. Здравствуйте! Спасибо Вам за работу. Я вывел телефонные номера, только при переходе в категорию или товар они не отображаються В чем дело? Спасибо.

    1. header.tpl — он выводится всегда во всех категориях.
      Сложно сказать, почему у Вас не выводится в категориях. Вот TYT урок более новый и, как по мне, лучший.

  8. Хотелось бы узнать как добавить номер телефона в шапку на opencart 2.1. У меня не стандартный шаблон, и телефона в шапке нет

    1. Рекомендую ЭТОТ урок. Должно работать на версиях 2.*. Только пути к файлам, например к header.tpl будет такой: catalog\view\theme\ИМЯ ВАШЕЙ ТЕМЫ\template\common\header.tpl.
      Или $10 и я Вам выведу на Вашем шаблоне в шапку номера телефонов с возможностью редактировать их из админ панели.

      1. Добрый день!
        Нужно вставить в шапку сайта номера телефонов как на скриншоте в вашем уроке с возможностью редактировать их из админ панели. Только первый телефон должен быть городской
        Версия движка ocStore-2.1.0.2.1
        1 (044) 347 12 45
        2. Киевстар
        3. Лайф
        4. МТС
        На какую почту вам писать, а еще лучше номер телефона, чтобы созвонится уточнить задание и каким способом вам оплатить. Я с Украины г. Киев
        Спасибо!

        1. Доброе время суток.
          Пишите мне сюда: work@glogla.net

          P.S.
          Есть урок по вашему вопросу: TYT.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Max quality, min price, min time expenditure
Send me a message to: work@glogla.net
Portfolio