Как перенести поле поиска и корзину

А кто может объяснить, желательно пошагово, как сделать так:

 

присоединяюсь. интересует как что то на линейку засунуть? в данном случае поиск

 

@cjdns, @Alex17.
Чтобы перенести поиск надо в файле /.../catalog/view/theme/default/template/common/header.php найти вот это место:

PHP:

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">
          <?php if ($logo) { ?>
          <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
          <?php } else { ?>
          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>
      <div class="col-sm-5"><?php echo $search; ?>
      </div>
      <div class="col-sm-3"><?php echo $cart; ?></div>
    </div>
  </div>
</header>

и перенести

PHP:

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

в раздел

PHP:

<div class="container">
  <nav id="menu" class="navbar">

либо в класс (между тегами div), либо после окончания класса collapse navbar-collapse navbar-ex1-collapse (после его завершающего тега </div>)

Затем добавляем тэги, чтобы расположить окно поиска в нужном месте.
Аналогично поступаем и с

PHP:

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

только не переносим его, а сразу тегами выравниваем на другую сторону экрана.

Ну это все в общих чертах...

 

а теги добавлять сюда: catalog/view/theme/default/stylesheet/stylesheet.css ?
У меня Поиск вставился в линейку меню, но выровнен влево, а надо вправо.
Я stylesheet.css нашел /* search */ а в нем три #search.... , но с их помощью выровнять вправо не сумел.
Помогите разобраться, пжалста((

Спасибо!

 

Уважаемый Ravilr или кто знает, помогите, пожалуйста, с http://forum.opencart-russia.ru/threads/umenshit-polja-v-xeder-i-futere.117/#post-1055
Очень надо
Спасибо

 

прямо в шаблоне можно так для поиска col-sm-3 pull-right
т.е будет у вас так

HTML:

<div class="col-sm-3 pull-right"><div class="input-group" id="search">
  <input type="text" class="form-control input-lg" placeholder="Поиск" value="" name="search">
  <span class="input-group-btn">
    <button class="btn btn-default btn-lg" type="button"><i class="fa fa-search"></i></button>
  </span>
</div></div>

 

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

 

А вы пробовали

PHP:

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

вставить сразу после

PHP:

<div class="container">
  <nav id="menu" class="navbar">

 

естественно. Есть ведь условие в коде

PHP:

<?php if ($categories) { ?>

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

 

Плохая идея перенести поиск в Меню
Если потом открывать сайт с телефона, то Поиска не видно, он вложен в свернутое Категории. см. картинки.

Решение наверное и есть... но стоит игра свеч?
ЗЫ. А можно слово Категории на слово Меню поменять? Надо ... а то не понятно, как это в Категориях Акция сидит.. а я еще хотел туда О нас засунуть (см вторую картинку)

 

Сам себе отвечу: Можно поменять... в catalog/view/theme/default/template/common/header.tpl найти:

Код:

<div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>

и заменить $text_category на другую переменную, в которой записано слово "Меню" (переменную предварительно создать в language ).

Гуру, я правильно излагаю?

 

конечно есть. Есть же в бутстрапе информация как спрятать блок при различных разрешениях http://getbootstrap.com/css/#responsive-utilities
т.е создаете два поиска, один показывается, а второй спрятан, а потом наоборот.

и еще в контролере ее объявить... Т.е все верно ))

 

Все получилось. (см картинки)
добавить в код visible-xs
<div class="col-sm-3 visible-xs"><?php echo $search; ?> <a> <br> </a> </div>

это: <a> <br> </a> пришлось добавить, т.к. Корзина и Поиск слиплись

 

Еще бага
Когда Поиск попадает на линейку Меню, то поиск перестает работать, т.е ничего не находит!
А когда уменьшаешь экран(окно браузера) и появляется Поиск как в начальном варианте - то поиск есть.
Значит что то в коде пропущено

Код:

<ul class="nav navbar-nav">
...
<ul >
<!-- Поиск в Меню на Home -->    
<div class="col-sm-3 pull-right hidden-xs "><div class="input-group" id="search">
         <input type="text" class="form-control input-lg" placeholder="Поиск" value="" name="search">
         <span class="input-group-btn">
            <button class="btn btn-default btn-lg" type="button"><i class="fa fa-search"></i></button>
         </span>
      </div></div>

хотя если вставить "родную" строку поиска, все равно не ищет
<div class="col-sm-3 ><?php echo $search; ?> <a> <br> </a> </div>

 

И еще бага, когда поиск в Меню вставлен
на картинке:
красным - запрещено установить галочку (значок выскакивает, если попробовать щелкнуть)
зеленым - разрешено

 

надо немного поменять поиск, точнее для поиска добавить класс . А потом изменить в common.js

Попробуйте изменить на <div class="input-group" id="search" class="my-search">
а потом в common.js найти $('#search input[name=\'search\']') и заменить на $('.my-search input[name=\'search\']')

 

Кто нибудь помогите перенести поиск под корзину и сделать его компактней! Плииз. Пробовала перенести поиск на линейку а над ним корзину, как просит автор вопроса. Но не нашла код, который надо изменить

Версия 2.0.1.1.

Хочется что то вроде этого

 

это удаляем

Код:

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

вместо этого, добавляем

Код:

      <div class="col-sm-8">
     
      <div class="row">
      <div class="col-sm-5 pull-right"><?php echo $cart; ?></div>
      </div>
     
      <div class="row">
      <div class="col-sm-5 pull-right"><?php echo $search; ?></div>
      </div>

      </div>

 

Благодарю!

 

не совсем по теме вопрос, но где меняется фон корзины? По умолчанию он черный, а мне надо в другой цвет. Нашёл где меняется шрифт,цвет,размер текста, рамка данной кнопки. А где сам фон поменять не могу найти