[SOLVED] Move Cart block below Quick Search block

[kaheng]

Hi,

 

I doing customization in PrestaShop v1.6.0.5.

I am trying to move the Cart block below Quick Search block. I've tried few ways as per the following but i could not make it work;

1. In the PrestaShop back office, I goto modules => positions => displayTop and also displayHeader hook to rearrange the Cart and Quick Search block

2. Tried add in "pull-right" into <div> class attribute in following files;

- blocksearch-top.tpl (line no 26) <div id="search_block_top" class="col-sm-4 clearfix">

- blockcart.tpl (line no 27) <div class="col-sm-4 clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

3. Clear cache after changes been made.

 

No matter what I did, both Quick Search and Cart block still stay in the side by side rather top-bottom position.

Can anyone give me some advise on how to achieve.

[vekia]

hello

due to the changes that you did

can you share url to your shop?

i think that now we have to cahnge css styles only.

[kaheng]

Hi Vekia, thanks for reply. This is the url;

http://hershop.co/

 

Could you please advise which css file and which area in css should I change?

Edited April 24, 2014 by kaheng (see edit history)

[dioniz]

I would suggest you to change in Hershop-theme/modules/blocksearch/blocksearch-top.tpl

<div id="search_block_top_hs" class="pull-right clearfix"> 

to

<div id="search_block_top" class="col-sm-8 clearfix"> 

and in Hershop-theme/css/modules/blocksearch/blocksearch.css change

#search_block_top {
    padding-top: 50px;
}

to

#search_block_top {
    padding-top: 30px;
}

This way your theme will remain responsive

[kaheng]

Hi Dioniz,

 

Thanks for reply! I manage move the Cart block below Quick Search block as per your suggestion.

 

However, the Search input box width is quite long (refer to PS-LongSearchInput.png screen shot).

I tried to modified the Hershop-theme/css/modules/blocksearch/blocksearch.css, I able to make the width shorter but the input box appear in middle of the screen rather than align on the right side (refer to PS-SearchModified.png screen shot).

 

How can I align the Search input box to right and make the width shorter?

 

[dioniz]

Now add to #search_block_top #search_query_top

 

width:300px;

float:right;

[kaheng]

Hi Dioniz,

 

Great and it work perfectly!

Thank you so much!

[dioniz]

You are welcome

[dudemon]

Hi dioniz,

 

I am struggling to have car and search aligned as well.

I followed your instructions, but currently I have the situation as you can see in the following link:
http://www.laranaviola.it/ambiente_di_test

 

How can I have cart and search bar aligned one of top of another and without so much space between?

Ciao and thanks,

 

dudemon

[dioniz]

Hey dudemon

 

To move cart  to right open themes/default-bootstrap/modules/blockcart/blockcart.tpl and find this line:

<div class="col-sm-4 clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

change it to this

<div class="col-sm-4 pull-right clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

This will make your cart move to right.

 

Then you need to open themes/default-bootstrap/css/modules/blockcart/blockcart.css

 

and find this

#header .shopping_cart {
    float: right;
    padding-top: 50px;
    position: relative;
}

Change padding-top to lower number.

[dudemon]

Great it worked!!

 

What about if I'd like to move both cart and search higher in the header?

 

Ciao,

dudemon

[dioniz]

 

in yourtheme/css/modules/blocksearch/blocksearch.css change

#search_block_top {
    padding-top: 50px;
}

to

#search_block_top {
    padding-top: 30px;
}

or less

 

[vekia]

thank you dioniz for another great post solutions

i marked topic title as solved.

 

dudemon you can also mark own topics as solved.

instructions are here:
 

 

 

[sOLVED] Topic
If, after posting a topic, you find a solution to your problem, please indicate it in your post and describe the solution.
Furthermore if you are the author of the topic for which a solution has been found, please edit your topic title to mark it as [sOLVED].

To mark a topic as [solved] :
- Edit the first post of your topic by clicking on the "Edit" button,
- Click on the "Use full editor" button,
- Add the "[solved]" string at the beginning of your topic title and click on the "Submit Modified Post" button.

it's not necessary - but it's a good practice here

[Veneau Sylvain]

 

Hey dudemon

 

To move cart  to right open themes/default-bootstrap/modules/blockcart/blockcart.tpl and find this line:

<div class="col-sm-4 clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

change it to this

<div class="col-sm-4 pull-right clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

This will make your cart move to right.

 

Then you need to open themes/default-bootstrap/css/modules/blockcart/blockcart.css

 

and find this

#header .shopping_cart {
    float: right;
    padding-top: 50px;
    position: relative;
}

Change padding-top to lower number.

 

Hi sorry but i follow this <div class="col-sm-4 pull-right....etc after refresh i have white page,,,,????

 

edit sorry its my fault its solved for this one...

Edited November 15, 2014 by Veneau Sylvain (see edit history)

[Veneau Sylvain]

Actually i have : http://mpc-store.com/fr/ i center logo in global.css i want move search bar below cart, and reduce size of search bar same size that cart

 

sorry for bad english and thanks in advance

 

EDIT

 

ok search bar is in right i have apply <!-- Block search module TOP -->
<div id="search_block_top" class="col-sm-4 pull-right clearfix">

for blocksearchtop.tpl

 

but i need move cart under search bar always..

Edited November 15, 2014 by Veneau Sylvain (see edit history)

[Antonio_T]

Hello I have problem with move searchbar to right side of header under CARTblock 

This is ma code from blocksearch.css:

#search_block_top {

  padding: 50px 0 0 0;

}

  #search_block_top #searchbox {

    float: right;

    width: 200px; }

 

And code from blockcart.css:

#header .shopping_cart {

  position: relative;

  float: right;

  padding: 20px 0 0 0;

 }

 

Page URL: www.vinarnatura.sk

Edited December 1, 2014 by Antonio_T (see edit history)