Link in progress
Обо мне
Контакты в шапке opencart с картинкой через админ-панель

Результат_шапка_сайтаДобрый день всем читателям блога GloGla.net. Сегодня закончил статью-урок о «Контакты в шапке opencart с картинкой через админ-панель». Сначала планировал сделать два или три урока по этой тебе, но в результате получилось одним уроком и очень даже не сложный.
В основе лежит прошлый урок. В этом уроке мы добавим возможность загружать изображение к контакту. Именно загружать, а не указывать пусть к изображению. Приступим.

Все это делается на чистом, не учитывая прошлый урок, системе управление Интернет-магазином OC или OpenCart Версия 1.5.5.1.2.

Помните, перед редактирование файлом – лучше сделать их резервную копию, дабы потоп не получить геморрой себе на … .

1. Для начала сделаем верстку и выведем все нужные нам кнопки и формы в нужное место для контактов в шапке opencart. Первый будет файл шаблона шапки сайта catalog\view\theme\default\template\common\header.tpl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Находим
<div id="head_contact">  … </div>

Удаляем все что есть в этом блоке и вставляем:
<?php if ($phone1) {?>
<div class="life">
        <?php if ($cont_1) {?>
                <img src="<?php echo $cont_1; ?>" />
                <?php }?>
            <?php echo $phone1;?></div>
            <?php }?>
        <?php if ($phone2) {?>
            <div class="Kyivstar">
            <?php if ($cont_2) {?>
                <img src="<?php echo $cont_2; ?>" />
                <?php }?>
            <?php echo $phone2;?></div>
            <?php }?>
        <?php if ($phone3) {?>
            <div class="MTC">
            <?php if ($cont_3) {?>
                <img src="<?php echo $cont_3; ?>" />
                <?php }?>
            <?php echo $phone3;?></div>
            <?php }?>

Особого сложного мы ничего не написали.

1
2
3
4
5
6
<?php if ($phone1) {?>

Это мы проверяем, если ли что-то в переменной. Если есть – тогда выводим блок с контактом 1.
Далее проверяем на наличие изображения контакта. Если оно выбрано – тогда выводим его.

<?php if ($cont_2) {?>

Вот и все. Логика такова: если номер контакта вписан – вывести его, если нет – тогда не выводить не контейнер с номер, не картинку контакта. Если номер есть, тогда проверить, если ли картинка. Если картинка есть – вывести ее, если нет – не выводить, но номер выводить. Такая логика касается всех трёх контактов.

2. Далее нам нужен файл вида настройки сайта. admin\view\template\setting\setting.tpl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Находим
<?php // Контакты в шапке?>
            <tr>
                <td><?php echo $entry_heading_phone; ?>

</td>
            </tr>

Удаляем все, что между <tr> и </tr>. И на место вставляем код. Должно получится:
<?php // Контакты в шапке?>
            <tr>
                <td><?php echo $entry_heading_phone; ?>
                    <td>
                    <input type="text" name="contact_phone1" value="<?php echo $contact_phone1; ?>" />
                    <input type="text" name="contact_phone2" value="<?php echo $contact_phone2; ?>" />
                    <input type="text" name="contact_phone3" value="<?php echo $contact_phone3; ?>" />
                    <br />
                    <div style="float:left; margin:0 4.6em 0 0;"><img src="<?php echo $cont_1; ?>" alt="" id="thumb-cont_1" />
                        <input type="hidden" name="image_cont_1" value="<?php echo $image_cont_1; ?>" id="cont_1" />
                        <br />
                    <a onclick="image_upload('cont_1', 'thumb-cont_1');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb-cont_1').attr('src', '<?php echo $no_image; ?>'); $('#cont_1').attr('value', '');"><?php echo $text_clear; ?></a>
                    </div>
                       
                   
                    <div style="float:left; margin:0 4.6em 0 0;"><img src="<?php echo $cont_2; ?>" alt="" id="thumb-cont_2" />
                        <input type="hidden" name="image_cont_2" value="<?php echo $image_cont_2; ?>" id="cont_2" />
                        <br />
                    <a onclick="image_upload('cont_2', 'thumb-cont_2');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb-cont_2').attr('src', '<?php echo $no_image; ?>'); $('#cont_2').attr('value', '');"><?php echo $text_clear; ?></a>
                    </div>
               
                   
                    <div style="float:left;"><img src="<?php echo $cont_3; ?>" alt="" id="thumb-cont_3" />
                        <input type="hidden" name="image_cont_3" value="<?php echo $image_cont_3; ?>" id="cont_3" />
                        <br />
                    <a onclick="image_upload('cont_3', 'thumb-cont_3');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb-cont_3').attr('src', '<?php echo $no_image; ?>'); $('#cont_3').attr('value', '');"><?php echo $text_clear; ?></a>
                        </div>
                        </td>
                    </td>
            </tr>

Смотрите не удалите лишнее или недоудалите. Если после удаление у вас в админ-панели в настройках на вкладке общее все поплывет – тогда вы что то сделали не правильно. Будьте внимательны.

И так, с внешним видом мы закончили. Если вы обновите страницу админ панели или главную страницу сейчас – у вас будет ошибка. И это логично и так должно быть.

3. Продолжаем. Сейчас нам нужно записать обработчики в контроллер.
Открываем сначала контроллер админ-панели admin\controller\setting\setting.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Находим:
$this->load->model('tool/image');

После вставляем:
// Контакты в шапке. Админпанель.
        ## cont_1
        if (isset($this->request->post['image_cont_1'])) {
            $this->data['image_cont_1'] = $this->request->post['image_cont_1'];
        } else {
            $this->data['image_cont_1'] = $this->config->get('image_cont_1');          
        }

        if ($this->config->get('image_cont_1') && file_exists(DIR_IMAGE . $this->config->get('image_cont_1')) && is_file(DIR_IMAGE . $this->config->get('image_cont_1'))) {
            $this->data['cont_1'] = $this->model_tool_image->resize($this->config->get('image_cont_1'), 100, 100);     
        } else {
            $this->data['cont_1'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }
        ## cont_2
        if (isset($this->request->post['image_cont_2'])) {
            $this->data['image_cont_2'] = $this->request->post['image_cont_2'];
        } else {
            $this->data['image_cont_2'] = $this->config->get('image_cont_2');          
        }

        if ($this->config->get('image_cont_2') && file_exists(DIR_IMAGE . $this->config->get('image_cont_2')) && is_file(DIR_IMAGE . $this->config->get('image_cont_2'))) {
            $this->data['cont_2'] = $this->model_tool_image->resize($this->config->get('image_cont_2'), 100, 100);     
        } else {
            $this->data['cont_2'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }
        ## cont_3
        if (isset($this->request->post['image_cont_3'])) {
            $this->data['image_cont_3'] = $this->request->post['image_cont_3'];
        } else {
            $this->data['image_cont_3'] = $this->config->get('image_cont_3');          
        }

        if ($this->config->get('image_cont_3') && file_exists(DIR_IMAGE . $this->config->get('image_cont_3')) && is_file(DIR_IMAGE . $this->config->get('image_cont_3'))) {
            $this->data['cont_3'] = $this->model_tool_image->resize($this->config->get('image_cont_3'), 100, 100);     
        } else {
            $this->data['cont_3'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }
        // ###

Сохраняем файл.

4. Открываем admin\controller\setting\store.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Находим:
$this->load->model('tool/image');

После вставляем:
## Контакты в шапке. Админпанель
        ## cont_1
        if (isset($this->request->post['image_cont_1'])) {
            $this->data['image_cont_1'] = $this->request->post['image_cont_1'];
        } elseif (isset($store_info['image_cont_1'])) {
            $this->data['image_cont_1'] = $store_info['image_cont_1'];         
        } else {
            $this->data['image_cont_1'] = '';
        }

        if (isset($store_info['image_cont_1']) && file_exists(DIR_IMAGE . $store_info['image_cont_1']) && is_file(DIR_IMAGE . $store_info['image_cont_1'])) {
            $this->data['cont_1'] = $this->model_tool_image->resize($store_info['image_cont_1'], 100, 100);    
        } else {
            $this->data['cont_1'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }
        ## cont_2
        if (isset($this->request->post['image_cont_2'])) {
            $this->data['image_cont_2'] = $this->request->post['image_cont_2'];
        } elseif (isset($store_info['image_cont_2'])) {
            $this->data['image_cont_2'] = $store_info['image_cont_2'];         
        } else {
            $this->data['image_cont_2'] = '';
        }

        if (isset($store_info['image_cont_2']) && file_exists(DIR_IMAGE . $store_info['image_cont_2']) && is_file(DIR_IMAGE . $store_info['image_cont_2'])) {
            $this->data['cont_2'] = $this->model_tool_image->resize($store_info['image_cont_2'], 100, 100);    
        } else {
            $this->data['cont_2'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }
        ## cont_3
        if (isset($this->request->post['image_cont_3'])) {
            $this->data['image_cont_3'] = $this->request->post['image_cont_3'];
        } elseif (isset($store_info['image_cont_3'])) {
            $this->data['image_cont_3'] = $store_info['image_cont_3'];         
        } else {
            $this->data['image_cont_3'] = '';
        }

        if (isset($store_info['image_cont_3']) && file_exists(DIR_IMAGE . $store_info['image_cont_3']) && is_file(DIR_IMAGE . $store_info['image_cont_3'])) {
            $this->data['cont_3'] = $this->model_tool_image->resize($store_info['image_cont_3'], 100, 100);    
        } else {
            $this->data['cont_3'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
        }
       
        ## ## ##

5. Далее мы редактируем контроллер шапки catalog\controller\common\header.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Находим:
$this->data['logo'] = '';
        }  
После вставляем:
// Контакты в шапке. Вывод изображения
        ## cont_1
        if ($this->config->get('image_cont_1') && file_exists(DIR_IMAGE . $this->config->get('image_cont_1'))) {
            $this->data['cont_1'] = $server . 'image/' . $this->config->get('image_cont_1');
        } else {
            $this->data['cont_1'] = '';
            }
        ## cont_2
        if ($this->config->get('image_cont_2') && file_exists(DIR_IMAGE . $this->config->get('image_cont_2'))) {
            $this->data['cont_2'] = $server . 'image/' . $this->config->get('image_cont_2');
        } else {
            $this->data['cont_2'] = '';
            }
        ## cont_3
        if ($this->config->get('image_cont_3') && file_exists(DIR_IMAGE . $this->config->get('image_cont_3'))) {
            $this->data['cont_3'] = $server . 'image/' . $this->config->get('image_cont_3');
        } else {
            $this->data['cont_3'] = '';
            }
        //

Сохраняем, загружаем все на хостинг и радуемся результатам.
На этом все. Так это все имеет вид в админ-панели: Результат_админ_панель

6. Но что бы было так, как на скриншоте, открываем файл стилей catalog\view\theme\default\stylesheet\ stylesheet.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Находим:
#header #head_contact {
    position: absolute;
    top: 3.7em;
    left: 23em;
    width: 15em;
}

Изменяем
    top: 3.7em; на top: 3.2em;

Далее ищем:
.life, .Kyivstar, .MTC{
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
}
Тут полностью удаляем padding или ставим padding: 0;

Далее ищем:
.life {
    background-image:url(../image/life.jpg);
}
.Kyivstar {
    background-image:url(../image/kyivstar.jpg);
}
.MTC {
    background-image:url(../image/mts.jpg);
}
И полностью все это удаляем, а на место его вставляем это:
.life img, .Kyivstar img, .MTC img {
    vertical-align: middle;
    padding: 0 5px 0 0;
    width:20px;
}

Вот и все. Урок закончен. Помните, все, что вы делаете – вы делаете на свой страх и риск. Последствия и их решение возложены на Вас лично. Автор не несет ответственности перед вами.
Возможно, следующий урок будет на тему, как с админ панели менять размер картинок контактов.
С вами был ProIN, до скорой встречи.

Результат_шапка_сайта_allРезультат_админ_панель_all

Контакты в шапке opencart с картинкой через админ-панель: 5 комментариев

  1. Здравствуйте.
    Скажите, а есть у Вас что-то подобное для opencart 2.1.0.1 ?

    1. Добрый вечер.
      Увы, нет. Возможно было что в старом блоге opencartadm.blogspot.com. Лучше перейти на новый ОС 3.*.*, конечно если это возможно. В любом случае вы можете сделать урок на своей версии ОС, он должен работать. Если вы не желаете рисковать — тогда вам должен подойти вот этот урок: Контакты в шапке сайта opencart

  2. В ближайшее время этот урок будет перепилен на новую версию 2.2

  3. Здравствуйте, обещали перепилить урок на более актуальную версию. Пробую на 2.1 не выходит. Можете залить на версию 2.1… Думаю это будет интересно многим

    1. актуально? тогда будет 🙂 времени сейчас не ноль а минус ноль. Но я сделаю.

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

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

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