Moushe.ru

Блог обо всём

OpenCart изменяем страницу контакты (1 часть)



Мне не нравится стандартная страница контакты, уж больно она страшная, так давайте же её изменим.

До:                                                      После:

doposle1

Список задач на сегодня:

1. Укажем несколько адресов

2. Укажем телефоны

3. Укажем часы и дни работы

4. Встроим яндекс или гугл карту в страницу

1. Откроем contact.tpl (..\catalog\view\theme\default\template\information) и этот код:

<div class="middle">
<div class="content">
<div style="display: inline-block; width: 100%;">
<div style="float: left; display: inline-block; width: 50%;"><b><?php echo $text_address; ?></b><br />
<?php echo $store; ?><br />
<?php echo $address; ?></div>
<div style="float: right; display: inline-block; width: 50%;">
<?php if ($telephone) { ?>
<b><?php echo $text_telephone; ?></b><br />
<?php echo $telephone; ?><br />
<br />
<?php } ?>
<?php if ($fax) { ?>
<b><?php echo $text_fax; ?></b><br />
<?php echo $fax; ?>
<?php } ?>
</div>
</div>
</div>

заменим этим:

<div class="middle">
<div class="content">
<div style="display: inline-block; width: 100%;">
<center><h1>Наши адреса:</h1></center><br>
<div style="float: left; display: inline-block; width: 50%;"><center>
М. Савеловская<br>
ТК "Савёловский"<br>
Пав. C*</center>
</div>
<div style="float: right; display: inline-block; width: 50%;"><center>
М. Савеловская<br>
ТК "Савёловский"<br>
Пав. A*</center>
</div>
</div>
</div>

2. Добавим блок с телефонами (чуть ниже верхнего кода):

<div class="content">
<div style="display: inline-block; width: 100%;">
<center><h1>Телефоны:</h1></center><br>
<div style="float: left; display: inline-block; width: 50%;"><center>
8 (903) 006 - 81 - **</center>
</div>
<div style="float: right; display: inline-block; width: 50%;"><center>
8 (903) 006 - 81 - **</center>
</div>
</div>
</div>

3. Добавим блок с часами работы (чуть ниже верхнего кода) в две колонки:

<div class="content">
<div style="display: inline-block; width: 100%;">
<center><h1>Часы работы:</h1></center><br>
<div style="float: left; display: inline-block; width: 50%;"><center>
Будни: с 10:00 до 20:00 </center>
</div>
<div style="float: right; display: inline-block; width: 50%;"><center>
Выходные: с 10:00 до 19:30 </center>
</div>
</div>
</div>

или так в одну:

<div class="content">
<div style="display: inline-block; width: 100%;">
<center><h1>Часы работы:</h1><br>
Работаем ежедневно<br>
с 10:00 до 20:00<br>
Без выходных и праздников</center>
</div>
</div>

4. Создадим блок для карты (чуть ниже кода сверху):

<div class="content">
<div style="display: inline-block; width: 100%;">
<center><h1>Мы на Яндекс картах:</h1><br>
тут будет наша карта
</center>
</div>
</div>

Откроем конструктор Яндекс карт — http://api.yandex.ru/maps/tools/constructor/

Яндекс карты

Выбрав нужный город и здание ставим на нём точку и вбиваем любой текст, к примеру: ТК Савёловский пав. С* и А* , жмём кнопку просмотр, если всё устраивает жмём кнопку код для вставки. Указываем адрес нашего сайта, ставим галку о соглашении и получаем код, вставляем его в нашу форму вместо надписи — тут будет наша карта:

1

Ищем этот код:

<div class="content">
<table width="100%">
<tr>

и вместо него вставим это:

<div class="content">
<center><h1>Обратная связь:</h1><br>
<table width="100%">
<tr>

Теперь наша страница имеет законченный вид:

Поздравляю, урок окончен. Улыбка

36 Комментариев

  1. артур

    23.11.2011 at 00:13

    поставил не работает письмо не отправляется

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

      23.11.2011 at 00:24

      У вас почтовый ящик в админке указан ? Потому что код почты мы вообще не трогали в этом уроке, а только дали название блоку !!! 🙂

  2. артур

    24.11.2011 at 23:29

    проблему решил этот код
    <form action="» method=»post» enctype=»multipart/form-data» id=»contact»>
    мы удалили а не надо было,это и есть та самая кнопка «Вперёд» именно она и не работала после удаления

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

      24.11.2011 at 23:49

      Спасибо за найденную ошибку, статью поправил. Все благодарим Артура за исправленную статью! 🙂

  3. yandex.ru Рафаэль

    13.12.2011 at 02:44

    Не исправлено…
    Вот кусок кода с работающей кнопкой «Вперёд» :

    …….Вставить сдесь……….

    вот этот код:

    <form action="" method="post" enctype="multipart/form-data" id="contact">

    и всё будет ОК !

    • Здравствуйте
      Так и не понял где это вставить?
      Не исправлено…
      «Вот кусок кода с работающей кнопкой «Вперёд» :

      …….Вставить сдесь……….

      Спасибо

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

      12.06.2012 at 23:11

      Статья была исправлена, раньше в ней был дополнительный пункт, на комментарии можете не обращать внимание.

    • Спасибо что ответили, но… вот сами посмотрите gs60.ru/index.php?route=information/contact
      кнопка «Вперёд» не активна

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

      13.06.2012 at 21:20

      Скиньте мне на почту hruhru.87@mail.ru файл contact.tpl

  4. Подскажите, почему шаблон немного (совсем чуть-чуть) смещается при переключении между контактами и картой сайта. Сайт на Denwer пока.

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

      05.02.2012 at 21:24

      Попробуйте % ширины позадавать — 99% 49% — если не поможет, то будем думать дальше. 🙂

  5. Не получается.

    Вот этот код вставляю в contact.tpl

    Наш телефон
    222-33-44

    Вставил, вроде все нормально, ничего не смещается при переключении между страницами НАШИ КОНТАКТЫ и КАРТОЙ САЙТА. Ниже делаю еще один такой блок для ЧАСОВ РАБОТЫ.

    Часы работы
    9:00-21:00

    После этого блока начинает смещаться при переключении между страницами. Что делать?

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

      06.02.2012 at 21:40

      </center> после часов работы попробуйте вставить — в скором времени будет второй урок по этой теме и мы из .tpl выкинем лишнее в .css файл. 🙂

  6. Спасибо, получилось. 🙂 Очень рад, мелочь вроде, но неприятно.

  7. Не работает, вместо букв русского алфавита вопросительные знаки (с латинским алфавитом все впорядке). Что сделать?

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

      10.05.2012 at 14:51

      contact.tpl — изменяем кодировку вместо ansi — UTF8

  8. У меня oc Store 1.5.1.3, вообще не такой код в том файле, как быть?

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

      19.06.2012 at 21:10

      Статья написана для OpenCart 1.4.9 в далёком 2011 году, либо экспериментируйте самостоятельно, либо обратитесь к фрилансерам, вам всё сделают в лучшем виде.

  9. Андрей

    12.10.2012 at 00:45

    Не подскажете, как внести изменения в форму обратной связи?
    Нужно ее расширить и внести новые пункты для отправки клиентами более детального запроса админу.
    Спасибо.

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

      12.10.2012 at 13:02

      Постараюсь написать такую статью.

  10. Салават

    17.04.2013 at 21:32

    Благодарю от души 🙂

  11. Екатерина

    28.04.2013 at 15:52

    Подскажите, как изменить контакты в ОС 1.5.4.1.?
    В админке не нахожу такой возможности

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

      28.04.2013 at 17:03

      Админка — Система — Настройки — Изменить — И заполняете всё что вам нужно…

  12. Дмитрий

    06.05.2013 at 20:18

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

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

      06.05.2013 at 21:14

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

  13. Дмитрий

    06.05.2013 at 23:38

    Спасибо, помогло. Можете еще подсказать почему у меня получился такой большой отступ от «8 (925) 368-28-77» до «часы работы» и от «с 9:00 до 21:00 Без выходных и праздников» до «МЫ НА КАРТЕ:» вроде никаких лишних тэгов нет? Заранее спасибо.

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

      07.05.2013 at 12:16

      В stylesheet.css нужно поисправлять отступы для используемых стилей middle, content

  14. Дмитрий

    06.05.2013 at 23:38

    Спасибо, помогло. Можете еще подсказать почему у меня получился такой большой отступ от «8 (925) 368-28-77» до «часы работы» и от «с 9:00 до 21:00 Без выходных и праздников» до «МЫ НА КАРТЕ:» вроде никаких лишних тэгов нет? Заранее спасибо.

  15. Дмитрий

    08.05.2013 at 01:33

    Вот так сделал, в моем случае идеальный вариант http://gadgetzona.ru/contact-us/

  16. Тег CENTER устарел!

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

      03.09.2013 at 14:01

      Статья тоже не молодая.

  17. Сергей

    24.10.2014 at 19:46

    Этот вариант абсолютно не подходит для сайта с несколькими языками. Как, например, мне сделать адреса на разных языках на этом носочном магазине?

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

      24.10.2014 at 20:43

      Не подходит — не пользуйтесь, статья написана в 2011 году и под другую версию OcStore. Создавайте страницу (Каталог — Статьи) и наполняйте всем что нужно, потом выводите ссылку в ручную в header.tpl.

  18. Святослав

    01.12.2014 at 19:02

    Доброго дня. Подскажите пожалуйста, где находится эта страница в админ. панели? На неё есть адрес (contact-us) но когда отключаю ЧПУ — ошибка 404. Хочу узнать где сменить чпу на неё (точный адрес в схемах я нашел).

    • Админка — Система — Настройки — Изменить — всё что там вводите (адрес телефон и т.д.) и есть страница контактов.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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