Need To Move The Cart And Search Elements To The Header Over My Banner Image.

[[email protected]]

Hi, I'm a new Prestashop user and really love the software so far. I have purchased some really great modules as well. I would like to move the Cart and Search to my header over the right side of my banner image and was hoping for a little guidance. If too much maybe a developer would like to make a quick buck. Please let me know.

 

My Front-Office is located at https://lingerie.gmp.fashion/index.php if you would like to take a look. I have also attached a screen shot of my landing page.

 

Jimmy Warren Jr.

Domain Technician

GMP Fashion Division

[aquahuang]

Please go to  ../themes/default-bootstrap/header.tpl   edit it, before edit copying it for backup file

find , (in line 74~84 )

----------------------------------------------------------------------------------------------------

{capture name='displayBanner'}{hook h='displayBanner'}{/capture}

{if $smarty.capture.displayBanner}

<div class="banner">

<div class="container">

<div class="row">

{$smarty.capture.displayBanner}

</div>

</div>

</div>

{/if} 

-----------------------------------------------------------------------------------------------------

cut them append to  line 105 , tag </header>  above.

then go to your back-office , left menu  Advanced Parameters > Performance , in SMARTY block , radio Recompile templates....., Cache -> NO, Save it.

 

 

[[email protected]]

Hi AquaHuang,

 

Thank you for the work you put into your response but you slightly mis-understood what I was requesting. I am desiring to put the "shopping_cart" element and the "search_block" element directly over the right side my header banner. I have attached two images in a zip file to show you exactly what I am talking about. Thank you for help what you replied with so far is a learning opportunity for me and even if this doesn't get resolved I appreciate gleaning some of your knowledge.

 

Also I attached an image of the result of your header.tpl modification so you can see what that looks like as well, file name is HeaderTPL_Mod_ScreenShot.png.

 

Thank you AquaHuang,

Jimmy Warren Jr.

Domain Technician

GMP Fashion Division

lingerie_gmp_fashion_cart_search_positioning.zip

[bpier_angelo]

Hi

 

Sorry for coming in to your post, but I am looking for something similar, so perhaps we can share experience and hopefully someone more skilfully can kindly help us.

    

The image I have attached shows 3 snapshots  of attempts to position the search block and cart on to the navbar.

 

First snapshot:   (ignore the search in the header). How can I move the phone number to the right, next to the "Contact us" and "Sign in"  ?

 

Second snapshot:  How can I move the search box to the right, near the cart?     Also is it possible have cart and search box one on top of the other and both on the right?

 

Third snapshot:  Same problem for the search box.  However, I would like to move the cart to the right, so in order I want: Contact us, Sign in, Shopping cart. I tried changing positions in the back office but it does nothing.

 

Thanks all

 

Pier

Presentation1.pdf

[[email protected]]

This is for the Prestashop 1.6.1.3 basic install using the default theme (default-bootstrap).

All these paths are from the web root of your store.

 

Move the phone number to the right.
Open the following file in text editor.
/themes/default-bootstrap/css/modules/blockcontact/blockcontact.css

On line 2 you will find the following:

Change the second line as follows:
.shop-phone {
  float: left;
TO
.shop-phone {
  float: right;

Save the file to your web server.

 

Move the shopping cart to the right.
Open the following file in your text editor:
/themes/default-bootstrap/css/modules/blockcart/blockcart.css

On line 28 change the following:

  @media (max-width: 1200px) {
    .shopping_cart {
      margin: 0 auto;
      float: none;
      width: 100%; } }
TO
  @media (max-width: 1200px) {
    .shopping_cart {
      margin: 0 auto;
      float: right;
      width: 100%; } }

Do not change any of the other @media tags so your responsive design will still work properly.

 

Move the Search Block to the right.
Open the following file in text editor.
/themes/default-bootstrap/css/global.css

On line 638 change the following:

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
  float: left; }

TO
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
  float: right; }

 

Save the file to your web server.

Go to your back-office menu -> Advanced Parameters -> Performance. At the top click on the radio button -> Force compilation, move the Cache toggle to -> No and click save. Time to test.

This change may effect your responsive design so you'll need to test the resposiveness of your theme and a good place to do that is at the following website.
https://www.responsinator.com - enter the URL of your store and check the different devices for functionality and cosmetics.

 

To answer the other question:

I added the Cart module to the displayNav block but positioning is all out of wack. You can add a module to a hook at the back-office menu -> Modules and Services -> Positions and then in the upper right click on 'Transplant a Module'. On the page that comes up choose the module you want to attach to a different hook-check it out and you'll see what I mean. Choose the hook you need if it is available and click save. Check your front-office for changes.

I extracted this information without any testing from my local files as my theme has changed dramatically since the beginning so if you have problems reply back.

Jimmy Warren Jr.
Domain Technician
GMP Fashion Division

[bpier_angelo]

Jimmy

 

First thing thank you for taking the time to reply in such as details.

 

I've made the changes and managed to mode the phone and contact details right to left and vice-versa. However, the "Move the Search Block to the right." did not make changes. Probably I am not sure what those lines (.col-xs-9, .col-xs-10  ect...) are exactly.

 

 

The image I attach is the default theme (with red background for more clarity); I've reloaded it as I lost track of the changes.

 

The cart still does not move to the rightmost position. The search bar is the same. It seems that whatever I do, they've reach the rightmost position possible.

 

Do you have any tip?

 

Regards

Pier

 

p.s. I'm using 1.6.1.3 too 

[[email protected]]

Move the shopping cart to the right.
Open the following file in your text editor:
/themes/default-bootstrap/css/modules/blocksearch/blocksearch.css

On lines 4 and 60 change the following:

#search_block_top {
  padding-top: 50px; }
  #search_block_top #searchbox {
    float: left;
    width: 100%; }
TO
#search_block_top {
  padding-top: 50px; }
  #search_block_top #searchbox {
    float: right;
    width: 100%; }

AND

form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: left; }

form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: right; }

See if modifying this will get you were you need to go.

Jimmy Warren Jr.

[aquahuang]

Hi Jimmy

sorry, i misunderstood, actually it's a little bit complicated, many things to do, can modify .css file or change hook position....

anyway, if it's done, it looks really good

[knettermesjokke]

Can anyone help me? I'm a new Prestashop user

I would like also to move Search to my header over the right side of my banner image.
 

What I have already done so far:
Move the Search Block to the right.

Open the following file in text editor.
/themes/default-bootstrap/css/global.css

On line 638 change the following:

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
  float: left; }

TO
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
  float: right; }

On lines 4 and 60 change the following:

#search_block_top {
  padding-top: 50px; }
  #search_block_top #searchbox {
    float: left;
    width: 100%; }
TO
#search_block_top {
  padding-top: 50px; }
  #search_block_top #searchbox {
    float: right;
    width: 100%; }

AND

form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: left; }

form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: right; }

My search bar stays in the middle.