Контакты в шапке opencart с картинкой через админ-панель (учимся думать)

Опыт работы с CMS opencart впечатлил меня начать работать с ней больше и писать статьи о рабочих решениях. В первой части мы простеньким способом покажем контакты в шапке нашего Интернет-магазина.

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

//Находим:
 
<?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

/*Находим: */

#header #logo { ... }

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

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

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

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

#currency {
...
left: 500px;
}

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

left: 570px;

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

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

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

left: 465px;

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

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

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

#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);
}

В итоге получаем следующее:

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

Смотрим следующие странички, там интереснее.

Pages: 1 2 3