Moushe.ru

Блог обо всём

OpenCart (5 часть)



Продолжим работы над нашим шаблоном OpenCart’а

До:                                                       После:

OpenCartMoushe6OpenCartMoushe8

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

1 Уменьшим поиск на главной странице

1.Удалим лишнее из поиска и переместим его из левого угла в правый.

Открываем файл header.tpl

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

<div id="search">
<div class="div8"><?php echo $entry_search; ?>&nbsp;</div>
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
<select id="filter_category_id">
<option value="0"><?php echo $text_category; ?></option>
<?php foreach ($categories as $category) { ?>
<?php if ($category['category_id'] == $category_id) { ?>
<option value="<?php echo $category['category_id']; ?>" selected="selected"><?php echo $category['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="div10">&nbsp;&nbsp;<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a> <a href="<?php echo str_replace('&', '&amp;', $advanced); ?>"><?php echo $text_advanced; ?></a></div>
</div>

и укоротим его до такого вида:

<div id="search">
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
</div>
<div class="div10">&nbsp;&nbsp;<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a></div>
</div>

Смотрим результат:

OpenCartMoushe7

Переместим поиск вправо, откроем stylesheet.css и ищем код:

#header .div8 {
float: left; margin-top: 6px;
}
#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}
#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
}

правим:

#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}
#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
float: right;
}

Обновим страницу:

OpenCartMoushe8

Простите за короткий урок. Улыбка

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

  1. Приветствую! Спасибо за хорошие уроки!
    Установил отличный горизонтальный модуль категорий как в версиях OpenCart 1.5.x, но столкнулся с проблемкой…мне нужно переместить поиск на строку ниже (та что со сменой языка и валюты)
    http://clip2net.com/clip/m39825/1311662975-clip-88kb.jpg
    Как это сделать?

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

    30.07.2011 at 19:33

    Код который я указал (самый первый в div8 и div9), перемещаем в div10

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

    30.07.2011 at 19:34

    Я не смог ответить раньше потому что на неделю уезжал в отпуск, только что приехал 🙂

  4. Приветствую, Владислав!
    Не дадите код поиска для 1.5.1.3?
    Создаю пытаюсь создать свою тему, попытался вставить Ваш код, но мне вываливается сообщение:
    Notice: Undefined variable: keyword in Z:\home\klevarium.ru\www\catalog\view\theme\klevarium\template\common\header.tpl on line 136
    ругается на строку

    Видимо на отсутствующую переменную в данной версии.
    Заранее спасибо!
    P.S. спасибо за отличный цикл статей!!!
    P.P.S C праздниками 🙂

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

      05.01.2012 at 00:41

      Уроки сделаны для OpenCart 1.4.9

      Код вам придётся посмотреть в стандартном шаблоне — ибо он сюда не вставляется: div id=»search» (95-102 строки в файле header.tpl)

    • Блин, PHP не вставляется, вот код для 1.5.1.3:
      http://pastebin.com/VG9XVNq9

      при этом, нужно еще CSS поправить на:
      #menu #search {
      width: 298px;
      padding: 5px 0px 0px 670px;
      }
      #menu .button-search {
      position: absolute;
      background: url('../image/button-search.png') center center no-repeat;
      width: 28px;
      height: 24px;
      border-right: 1px solid #CCCCCC;
      cursor: pointer;
      }
      #menu #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;
      }

  5. Алексей

    09.02.2012 at 11:50

    Влад после уменшения поиска он началь немного нетак работать.
    Находясь на главной странице поиск работает отлично.
    Но например если я зашол в какой то товар или категорию то поиск недаёт результата.
    Пишет найденая страница ненайдена…..
    Как решить проблему…

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

      09.02.2012 at 20:20

      Он ищет но только по производителю и названию товара, для поиска по описанию или по модели в расширенном поиске нужно ставить галочки напротив этих пунктов.

  6. Алексей

    10.02.2012 at 12:31

    Да это я знаю…..Но именно проблема в том что когда например я нахожусь в категории товаров и задаю поиск по названию товара выдаёт что запрашиваемая страница ненайдени..
    И имено ето получилось после уменшения поиска….
    Для проверки функционала зайдите на мой сайт
    ActiveWeekend.com.ua

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

      10.02.2012 at 12:58

      Когда у вас в поиске русские и английские буквы — поиск не работает, вот интернет магазин — http://cablestore.ru/ поиск реализован по моему уроку (делал я сам), такой проблемы не наблюдаю.

  7. Добрый день! Подскажите, как поиск перенести в левую колонку?

    И еще вопрос, перестала отображаться картинка каптчи, где исправить?

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

    15.11.2012 at 21:34

    Статья написана для OC 1.4.9, а у вас на сайте 1.5.+

  9. Добрый день!
    Подскажите как уменьшить ширину строки ввода поиска?
    Менял значения width , результата нет.
    #search {
    float: right;
    height: 25px;
    padding: 10px 9px 0 0;
    width: 270px;
    position:relative;
    }
    .search-bg {
    background: url(«../image/serch-bg.jpg») no-repeat scroll 0 0 transparent;
    display: inline-block;
    }
    .search-title {
    display:inline-block;
    font-family:’Open Sans’, sans-serif;
    color:#3b3738;
    font-weight:600;
    text-transform:uppercase;
    font-size:17px;
    line-height:21px;
    position:relative;
    margin-right:9px;

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

      03.12.2012 at 21:23

      После изменения ширины, чистили куки браузера ?

  10. Да, конечно..

  11. Подскажите так же, какая именно строка width:
    отвечает за ширину поля ввода поиска..

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

      04.12.2012 at 00:00

      width: 270px;

  12. Спасибо.
    Так а по какой причине не меняется ширина поля?

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

      04.12.2012 at 21:04

      Возможно меняете ширину в другом шаблоне

  13. Владимир

    24.06.2013 at 16:21

    Проблема выглядит так: Поиск на всех страницах работает хорошо, но когда он переходит на страницу поиска (нашедшую или не нашедшую товар) поиск перестает работать.
    И еще если с этой странице кликаеш на «О компании» то сбиваются стили а через главную все нормально.
    Помогите разобраться.

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

      24.06.2013 at 21:34

      Если я не ошибаюсь, у вас поиск реализован с помощью модуля, обращайтесь к разработчику этого модуля. К тому же статье уже 2 года и я уже не работаю со старой версией OpenCart’а.

  14. Здраствуйте подскажите а как сделать что бы кнопка поиск реагировала на enter

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

      02.08.2013 at 15:12

      Я уже не работаю с OpenCart 1.4.9 — не смогу ответить.

  15. Хотелось бы посоветоваться с опытным человеком работающим с opencart (точнее ocstore) версия 1.5.5.1.1, та же самая проблема не работает поиск на главной странице по интеру не срабатывает, а по кнопке поиск не выводит результата переходит на страницу поиска, зато там поиск работает как положено. Устал искать причину перерыл всё.

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

      07.12.2013 at 22:02

      Сравните код стандартного шаблона от Opencart (файл header.tpl) и своего шаблона.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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