Moushe.ru

Блог обо всём

OpenCart 2.1 перемещаем поиск



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

OpenCart-20

1. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этих строк (52-53):

<?php echo $currency; ?>
<?php echo $language; ?>

вставим эту:

<div class="col-sm-3"><?php echo $search; ?></div>

(col-sm-3 можно изменить на col-sm-4 или col-sm-5 – этим вы измените размер окна поиска)

ниже удалим эти строки (94-95):

<div class="col-sm-5"><?php echo $search; ?>
</div>

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

2. Откроем файл ../catalog/view/javascript/common.js и вместо этой строки (57):

var value = $('header input[name=\'search\']').val();

вставим эту:

var value = $('input[name=\'search\']').val();

а вместо этой строки (68):

$('header input[name=\'search\']').parent().find('button').trigger('click');

вставим эту:

$('input[name=\'search\']').parent().find('button').trigger('click');

(мы просто убрали привязку скрипта поиска к header)

Проверяем поиск – теперь всё ищется как надо.

3. После перемещения поиска корзина занимает среднее положение в шапке, смотрится как то не очень, давайте переместим из верхней панели телефон, и расширим поиск?

ocstore_2-1_search_01

Вновь откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этой строки (52):

<div class="col-sm-3"><?php echo $search; ?></div>

вставим эту:

<div class="col-sm-4"><?php echo $search; ?></div>

удалим эту строку (55):

<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>

перед этой строкой (93):

<div class="col-sm-3"><?php echo $cart; ?></div>

вставим эти:

<div class="col-sm-3"><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <?php echo $telephone; ?> с 10:00 до 20:00
<br>г. Москва КЦ "Будёновский" пав. Б-4</div>

Результат:

В мобильной версии верхняя панель будет отображаться в “два этажа”, если вас это вдруг не устраивает то сделаем следующее, вырежем эту строку (52):

<div class="col-sm-4"><?php echo $search; ?></div>

и вставим после этих строк (72-73):

</ul>
</div>

4. Теперь нужно немного подкорректировать стили, откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк (119-121):

#top-links {
padding-top: 6px;
}

вставим эти:

#top-links {
padding-top: 10px;
padding-left: 20px;
}

а вместо этих (131-133)

#search {
margin-bottom: 10px;
}

вставим эти:

#search {
margin-bottom: 0px;
}

(или просто закомментируем их или удалим)

Результат:

ocstore_2-1_search_04ocstore_2-1_search_05

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

  1. Добрый день, помогите увеличить скорость открытия сайта.

    • 1 — Проверяйте сайт на вирусы и перенаправления (если ставили кривую сборку опенкарта или ломанные модули)
      2 — Смотрите логи хостинга, если что-то не так, там будут ошибки
      3 — Смотрите настройки php.ini, .htaccess
      4 — Пишите хостеру в тех. поддержку
      5 — Смените версию php на своём сайте на более старую или более новую (в зависимости от того какая стоит)
      6 — Настраивайте кэширование css стилей и js скриптов
      7 — Проверяйте вес фоток, если он большой — сжимайте графическим редактором для веб, если вес всё равно большой меняйте расширение файлов с png на jpg

  2. Здравствуйте Владислав! Спасибо за статью.
    У меня вопрос по статье — как можно поиск переместить в самый конец?
    После ссылки «Оформление заказа».
    И ещё один вопросик. Я на ваших статьях разобрался с OpenCart 1.5.x, но решил перейти на OpenCart 2.x — в нем всё немного по другому…не могу соориентироваться как мне уменьшить в ширину вертикальное меню категорий (у меня оно на главной)?
    Заранее благодарен,
    С Уважением, Виталий.

  3. Здравствуйте, после переноса поиска он почему-то перестал работать, а именно открывается страница поиска и уже с нее работает отлично, я понимаю что это из-за версии opencart, у меня 2.2.0, может быть вы сталкивались с работой поиска на этой версии, и сможете дать какие нибудь комментарии, что бы поиск работал сразу же.

  4. Здравствуйте, информация часы работы и так далее с такими знаками «?»
    это кодировка. где поменять?

  5. спасибо.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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