Moushe.ru

Блог обо всём

OpenCart 1.5.3 делаем шаблон NewOpen (4 часть)



Сегодня мы с вами переместим поиск из шапки сайта в меню навигации и изменим его стиль.

1

1. Откроем файл header.tpl (../catalog/view/theme/NewOpen/template/common) и вырежем этот код (55-62):

<div id="search">
<div class="button-search"></div>
<?php if ($filter_name) { ?>
<input type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
<?php } else { ?>
<input type="text" name="filter_name" value="<?php echo $text_search; ?>" onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
<?php } ?>
</div>

после этого кода (64-72 (цифры даны после вырезки кода выше)):

<div id="menu">
<ul>
<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
<li><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a></li>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
</ul>

вставим это:

<div id="search">
<?php if ($filter_name) { ?>
<input type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
<?php } else { ?>
<input type="text" name="filter_name" value="<?php echo $text_search; ?>" onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
<?php } ?><div class="button-search">Искать</div>
</div>

(P.S.Если слово Искать отображается ромбиками открываем файл header.tpl блокнотом, выбираем — сохранить как, выбираем кодировку UTF-8,  жмём кнопку сохранить)

2. Откроем файл stylesheet.css (../catalog/view/theme/NewOpen/stylesheet) и изменим это (268-297):

#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 298px;
z-index: 15;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 262px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}

на это:

#menu #search {
padding-top: 7px;
float: right;
}
#menu .button-search {
display: inline-block;
background: #eee;
padding: 4px 4px 4px 4px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
}
#menu .button-search:hover {
background: #e52c01;
}
#menu #search input {

}

На сегодня всё, до новых встреч. Следите за нашими новостями. Улыбка

22 Комментария

  1. Реквестую следущий урок — как добавить контактную информацию в шапку — вот так http://clip2net.com/s/2qwAn
    Но наверное сам сделаю 🙂

  2. Посмотрел все уроки у вас.
    На данный момент у меня еще вопросы:

    1. В меню под категориями нужен модуль фильтрации товаров. Например для телефонов атрибуты: процессор, ROM, количество симкарт, диагональ экрана.

    Нужно что бы динамически (без нажатия на кнопку «искать») фильтровались товары при изменении этих параметров. Какой модуль посоветуете? В уроке можно написать о его настройке и кастомизации.

  3. Добрый вечер, вопрос такого плана, можно убрать пункт «постоянный покупатель» сдвинуть меню, и засунуть туда «Вы вошли как ТрамПарам ( Выйти )»
    как то так красиво сделать))

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

      25.10.2012 at 21:09

      Если разберусь как это сделать, то сделаю.

  4. и как можно красиво оформить страницу с контактами

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

      25.10.2012 at 21:10

      В одном из следующих уроков затронем и контакты.

  5. Любомир

    25.10.2012 at 11:34

    Как отредактировать в адимин зоне в разделе заказа Url магазина (просто сам Url на кириллице в зоне рф, а там отображается привязка к примеру http://xn--80aadldc5al7bhbarj6jd.xni/

    Вариант:

    Заходим в корень сайта и правим файл config.php

    В первой строчке define(‘HTTP_SERVER’, ‘http://адрес_сайта.рф/’);

    Замечен глюк в firefox, так как адрес домена в киррилице, мы страницу config.php сохраняем в UTF-8 при выборе просмотра товара страница не открывается .

    Помогите решить

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

      25.10.2012 at 21:44

      С доменами на кирилице дел не имел, попробуйте здесь спросить — http://opencartforum.ru

  6. Никита

    10.11.2012 at 15:26

    Здравствуйте. Есть такой вопрос, самому пока не разобраться. Когда я смотрю товары в категории, то они у меня все как-то плотно друг к другу находятся, глаза от этого разбегаются. как бы их «раздвинуть»? Заранее спасибо. Пример здесь http://photogadgets.ru/mobilnyje-tjeljefony-1/mobilnyje-tjeljefony

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

      10.11.2012 at 18:35

      .product-grid {
      overflow: auto;
      width: 100%;
      }
      .product-grid > div {
      display: inline-block;
      margin-bottom: 15px;
      margin-right: 20px;
      vertical-align: top;
      width: 130px;
      }

      Отступ вправо правьте.

  7. Никита

    13.11.2012 at 16:45

    Таким образом получается что просто отступ от правого края увеличивается, а вот между товарами ничего не происходит… ➡

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

      13.11.2012 at 21:29

      padding-right:

  8. Никита

    13.11.2012 at 22:27

    Спасибо, теперь всё понял! 😀

  9. Эльвира

    22.12.2012 at 18:35

    код обрезался выше http://clip2net.com/s/2DkC6

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

      23.12.2012 at 00:56

      После /ul

  10. Эльвира

    23.12.2012 at 08:55

    Здравствуйте!
    Все оказалось намного проще, разобралась сама трогать нельзя: не удалять, не добавлять, иначе основная страница с контентом, футером и остальными модулями разъезжается по всей ширине браузера.
    Так как позиционирование абсолютное, header.tpl не трогала, а вот в стилях сделала след.: position: absolute; top: 156px; right: 5px; width: 298px; z-index: 15; и все ок.

  11. как перенести оригинальное поле поиск в меню,
    у меня заначек «button-search.png» не привязывается к полю search input , как я понял он привязывается к краям браузера и при изменении ширины окна иконка сползает, в mozile и ie результаты разные, но все равно кривые.
    ocstore 1531

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

      04.02.2013 at 21:00

      Помещайте форму поиска в новый div и перемещайте его куда вам нужно

  12. но ведь он уже включен в или и его нужно поместить в отдельный див.
    как вариант рассматриваю с помощью css визуально опустить поиск в меню оставив в #header #search не изменяя на #menu#search и тд

  13. Александра

    07.04.2013 at 10:36

    после переноса поиска из хедера в меню не работает ввод текcта по enter-клику, может быть подскажете как исправить?

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

      07.04.2013 at 22:30

      Попробуйте кэш браузера почистить, я не помню была ли у меня такая проблема.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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