Jump to content
Sign in to follow this  
201baza

Перенести поле поиска из шапки в тело сайта

Recommended Posts

Доброго времени суток, уважаемые форумчане! Помогите с решением задачи. Нужно сделать отображение Поля поиска и категории товаров как на сайте OZON.ru. То есть Поле поиска перенести из шапки в тело сайта и отображение категорий слева. Пытаюсь разобраться в коде, но знаний пока маловато для таких действий. 

 

b6f3ac996ee1.png

Share this post


Link to post
Share on other sites

Я вижу три выхода)))

 

1) Найти похожий шаблон ( easy)

 

2) Изучить срочно основы CSS-HTML(хватит минимума)    (not so easy )

 

3) Перенести поиск из дива хидера, в див меню, и переписать соотвественно стили,с учётом этих правок.

 

Если категории будут в левой колонке  везде в магазине,то так же поступить с модулем категорий!  (maybe so hard ))))

 

Но мне кажется что вот это

 

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

 

 

аналогично как  как в центре Токио у коренного японца спрашивать на русском , как пройти в определённый район.

 

Он то ответит,только что это даст?

Share this post


Link to post
Share on other sites

1. Я взял дефолтный шаблон, что при установке был. И переделываю так как мне надо. Похожего шаблона не видел. Кстати, пользуясь моментом хочу спросить, зачем в Опенкарте категории товаров выводятся два раза. Первый в горизонтальной строке главного меню, второй раз в левой колонке. На многих сайтах замечаю такую штуку. Да и вообще зачем было на программном уровне это делать?

2. CSS-HTML я знаю достаточно. Но вот сдается мне что одним CSS-HTML тут не обойтись. Если я ошибаюсь, буду только рад. Значит мозгов хватит самому сделать. 

3. Перенести Поле поиска на место Меню сам смогу. Другое дело, если Модуль категорий товаров выводится в column_left.tpl (или в другом месте), а Поле поиска находится в header.tpl. Это два разные файла. Если Поле поиска из header.tpl переносить в другой файл, то править нужно будет все связанные файлы. Далее, на программном уровне получится что категории товаров и поиск существуют сами по себе, а мне кажется что они должны быть как то связаны. 

Share this post


Link to post
Share on other sites
Кстати, пользуясь моментом хочу спросить, зачем в Опенкарте категории товаров выводятся два раза

 

 Для меня это тоже загадка.Давно уже  подключаю в админке свои настройки , которые позволяют выводить произвольное меню .Но на то он и бесплатный движок,что бы давать самый необходимый Минимум.

 

Но вот сдается мне что одним CSS-HTML тут не обойтись.

 

Коллега,откройте header.tpl и вы увидите что  поиск находится внутри дива header , вытаскивайте его оттуда и вставляйте в див меню.Дальше стилями поправите.

 

По  третьему вопросу.Ставьте категории в положение column_left и первым в выводе.Ну а дальше экспериментируйте со стилями шаблона.

Share this post


Link to post
Share on other sites

Tom, похоже Вы меня немного не правильно поняли по третьему пункту. Ну да ладно. Допустим, Главное Меню выкинули, на его место поставили Поле поиска. Подключили в админке левую колонку Категории товаров. Теперь внимание! Посмотрите на каких позициях находятся левая колонка и горизонтальное меню. Левая колонка находится ПОД горизонтальным меню!  :wink: Я же не зря выложил здесь фотографию выше. А надо чтобы на одном уровне была.

 

Есть кое-какая задумка, как по-хитрому сделать. В стилях левой колонки прописать - поднять вверх колонку, отступ сверху поставить со знаком минус. А Поле поиска сдвинуть вправо, опять же через CSS. Но это коряво будет.

 

Вот еще один сайт http://www.003.ru/. Видите как Категории с Поиском склеены?

Share this post


Link to post
Share on other sites

ТС мне импонирует как минимум воспитанностью.

"я знаю цсс+хтмл" - веселит. Там как-раз этими средствами можно все сделать.

По ссылке в примере - отличный сайт. Убрать только вот эту футбольную блевотину и попап на входе - будет цацка.

Share this post


Link to post
Share on other sites

Хорошо, ставлю вопрос по другому: необходимо Поле поиска перенести из header.tpl в content_top.tpl. Далее через админку выведу модуль категорий слева, и выровняю поиск с категориями товаров в один уровень при помощи CSS, как это показано на первом рисунке.

 

Будет вот так: 

bb1bb86ceefa.png

Share this post


Link to post
Share on other sites

Так должно быть только на главной или по всему сайту?

Share this post


Link to post
Share on other sites

Так должно быть только на главной или по всему сайту?

 

весь сайт!!!

Share this post


Link to post
Share on other sites

Вот реализация только на главной, но можно сделать и по всему)

 

2b7ba839edc737c0fed27a95b3591ebac014e5bd

Share this post


Link to post
Share on other sites

Для всего сайта:

 

 Открываем content_top.php

после

$this->load->model('catalog/information');

вставляем

 $this->language->load('common/header');
$this->data['text_search'] = $this->language->get('text_search');

перед

$layout_id = 0;

добавить

// Search
if (isset($this->request->get['search'])) {
$this->data['search'] = $this->request->get['search'];
} else {
$this->data['search'] = '';
}

Открываем content_top.tpl

перед

<?php foreach ($modules as $module) { ?>

добавляем

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

#content #search {
width: 298px;
z-index: 7;
}
#content .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;
}
#content #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;
}
В common.js

строку

$('#header input[name=\'search\']').bind('keydown', function(e) {

заменяем на

$('#content input[name=\'search\']').bind('keydown', function(e) {

Вроде как всё)

  • +1 1

Share this post


Link to post
Share on other sites

Здравствуйте! Вроде все сделал. В поле поиска вот такая строчка пишется 

<b>Notice</b>: Undefined variable: search in <b>Z:\home\localhost\www\beget\catalog\view\theme\default\template\common\content_top.tpl</b> on line <b>4</b>

Share this post


Link to post
Share on other sites

Здравствуйте! Вроде все сделал. В поле поиска вот такая строчка пишется 

<b>Notice</b>: Undefined variable: search in <b>Z:\home\localhost\www\beget\catalog\view\theme\default\template\common\content_top.tpl</b> on line <b>4</b>

в content_top.php

перед

$layout_id = 0;

добавить

// Search
if (isset($this->request->get['search'])) {
$this->data['search'] = $this->request->get['search'];
} else {
$this->data['search'] = '';
}

P.S.

Выше исправил.

Share this post


Link to post
Share on other sites

krumax, благодарю Вас! Все получилось. Спасибо!!!  :-)

Share this post


Link to post
Share on other sites

Добрый день. А как сделать на всех страницах, кроме главной?

Share this post


Link to post
Share on other sites

Добрый день. А как сделать на всех страницах, кроме главной?

Также но обернув вывод в УСЛОВИЕ

Share this post


Link to post
Share on other sites

Вот вы любите искать тяжелые пути...

Проще всего сделать через jquery.

Берете любой html модуль и вставляете jquery код

<script>
var data = $('#search').clone();
$('#search').remove();
$('#id куда надо').html(data);
</script>

.append .prepend .before .after плюс  к селекторам :nth-child(номер)

 

Всё! И не надо ничего править

Share this post


Link to post
Share on other sites

Вот вы любите искать тяжелые пути...

Проще всего сделать через jquery.

Берете любой html модуль и вставляете jquery код

<script>
var data = $('#search').clone();
$('#search').remove();
$('#id куда надо').html(data);
</script>

.append .prepend .before .after плюс  к селекторам :nth-child(номер)

 

Всё! И не надо ничего править

Реклама - двигатель торговли)

Но упоминайте тогда сразу о 790.00 руб которые "облегчают пути" )

Share this post


Link to post
Share on other sites

Реклама - двигатель торговли)

Но упоминайте тогда сразу о 790.00 руб которые "облегчают пути" )

О чем вы говорите... задали, вопрос, я ответил, что не нравиться, в курилку на обсуждение. :) :-D

Я сказал "любой", но предложил свой как вариант так как там функционал больше (понимает php, поле привязки jquery, можно повесить не только на схемы но и на конкретный URL или словосочетание в URL  и т.п.).

Но, как я и написал  можно использовать любой html модуль

 

А решение это простое, без редактирования кода и изобретения велосипеда

Так что все по теме и по делу

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.