201baza

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

Рекомендуемые сообщения

201baza    0

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

 

b6f3ac996ee1.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    1 920

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
201baza    0

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    1 920
Кстати, пользуясь моментом хочу спросить, зачем в Опенкарте категории товаров выводятся два раза

 

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

 

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
201baza    0

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    1 920

http://themeforest.net/item/mega-shop-responsive-opencart-theme/6507132

 

 

вот готовый шаблон (один из многих)

 

Или купить или проинспектировать что бы понять что и как.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AlexFisher    194

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
201baza    0

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

 

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

bb1bb86ceefa.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
krumax    181

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
201baza    0

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

 

весь сайт!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
krumax    181

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

 

2b7ba839edc737c0fed27a95b3591ebac014e5bd

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
krumax    181

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

 

 Открываем 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) {

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
201baza    0

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

<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>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
krumax    181

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

<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.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
201baza    0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
mrkos021    0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
krumax    181

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
markimax    1 381

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

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
krumax    181

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

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

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

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

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

 

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
markimax    1 381

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

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

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

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу