Moushe.ru

Блог обо всём

OcStore 1.5.5.1.2 изменяем поиск



Всем привет, я разрабатывал для своего клиента новый шаблон для OcStore 1.5.5.1.2. и меня попросили переделать стандартный поиск – вместо стандартной иконки поиска в виде лупы мне пришлось сделать слово найти, в этой статье я покажу вам как переделать поиск самостоятельно.

OcStore15512-search

Результат:

ocstore-15512_search-3

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

1. Поработаем с файлом header.tpl

2. Поработаем с файлом stylesheet.css

Приступим:

1. Откроем файл ../template/common/header.tpl и вместо этих строк (77-80):

<div id="search">
<div class="button-search"></div>
<input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>

вставим эти:

<div id="search">
<div class="button-search">Найти</div>
<input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>

2. Откроем файл ../stylesheet/stylesheet.css и вместо этих строк (258-287):

#header #search {
position: absolute;
top: 55px;
right: 0px;
width: 298px;
z-index: 7;
}
#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;
}

вставим эти:

#header #search {
position: absolute;
top: 55px;
right: 0px;
width: 298px;
z-index: 7;
}
#header .button-search {
position: absolute;
right: 0px;
background: #f00;
border-right: 1px solid #CCCCCC;
cursor: pointer;
border-radius: 0px 7px 7px 0px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
font-size: 14px;
color: #fff;
padding: 6px 0px 6px 12px;
width: 57px
}
#header .button-search:hover {
background-image: linear-gradient(to bottom,#e85538 0,#e4023a 100%);
}
#header #search input {
background: #FFF;
padding: 6px;
width: 214px;
border: 1px solid #CCCCCC;
border-radius: 7px 0px 0px 7px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}

Смотрим:

ocstore-15512_search-2

немного изменим стили:

#header #search {
position: absolute;
top: 55px;
right: 0px;
width: 264px;
z-index: 7;
}
#header .button-search {
position: absolute;
right: 0px;
background: #f00;
cursor: pointer;
border-radius: 0 5px 5px 0;
font-size: 14px;
color: #fff;
padding: 6px 0px 6px 12px;
width: 60px;
}
#header .button-search:hover {
background-image: linear-gradient(to bottom,#e85538 0,#e4023a 100%);
}
#header #search input {
background: #FFF;
padding: 6px 0 6px 10px;
width: 180px;
border: 1px solid #CCCCCC;
border-radius: 5px 0 0 5px;
}

Смотрим:

ocstore-15512_search-3

Вот и всё – поиск переделан очень легко и быстро.

На сегодня всё, следите за нашими новостями и присоединяйтесь к нашей группе В контакте.

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

  1. Отлично, спасибо!

  2. Анатолий

    24.05.2015 at 18:07

    А как сделать это на магазине все медведи?

  3. Анатолий

    26.05.2015 at 14:14

    а какая разница? можно как в уроке выложить строки?

    • В комментарии код не вставляется, разница только в одном, во всех медведях поиск вложен в див топ-панели, а не в див хеадера, вот и вся разница.

  4. Анатолий

    26.05.2015 at 16:02

    Спасибо все получилось!

  5. Добрый день!
    К сожалению не читал все стать, но поиском не нашел того что искал.
    Интересует модули оплаты и доставки. Они как то не совсем интуитивно понятно настраиваются, а сторонние либо дороговато стоят либо не работают.
    Может быть это тема для статьи или частным образом что то подскажите?
    Версия ocStore 1.5.5.1.2

    • Здравствуйте, не хочу обижать, но меня всегда «умиляли» такие комментарии 🙂
      Вы делаете интернет магазин чтобы зарабатывать себе деньги — здесь не бывает слова «дороговато стоят» — хотите много зарабатывать будьте готовы и много тратить — смотрите модули типо робокассы — если модуль не работает — значит взяли не под свою версию Open’а или не правильно настроили. К автору — в личку — поможет.

  6. Елизавета

    26.09.2015 at 21:50

    Добрый день ! У меня практически все получилось, кроме надписи Найти. Когда я ее добавляю, то у меня выскакивает «Невозможно обработать файл. Попробуйте использовать другую кодировку.» где и как исправить ошибку ? Буду очень благодарна за помощь.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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