Jump to content

Cart is middle of screen

kpham501

By kpham501
in OUT - 1.6.0.11 [7 Jan 2015]

 Share

Recommended Posts

fng77 Newbie

fng77

Posted
Posted

Lol.  Yeah all my stuff is all jumbled up.  I'm going to take the image slider off.  I'm thinking that I need to reset the theme back to it's

defaults.

 

Yes I also had to disable the slider. Where do you reset the theme?

Link to comment
Share on other sites
w3bsolutions Collaborator

w3bsolutions

Posted
Posted

Just upgraded to 1.6 and working on getting my site to look right.  But for some reason it's in the middle of the screen.  How do I put it back on the upper right side like in the default 1.5 theme

 

I suggest you disable the "Permanent Links" block in the header (you can add those 2 links in the nav bar or the footer, and then open the file "themes/default-bootstrap/modules/blockcart/blockcart.tpl" and changes this line (27):

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

to this:

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

That should move your cart to the right as in PS 1.5 default theme.

  • Like 1
Link to comment
Share on other sites
scottm Newbie

scottm

Posted
Posted

Hello all,

 

I did an upgrade from stock 1.5 to 1.6 and got the same issue with the Cart block being in the center of the page.

 

Going to Modules > Positions > DisplayTop  and moving the Cart Block above the Horizontal Menu Bar moved the cart to the upper right, but only if I had it 'under' the search bar.  If the Quick Search Block option was under the Cart Block and Horizontal Menu Bar, the cart appeared more in the center of the header.

 

Using the DisplayTop, I moved both the Quick Search Block  and the Cart Block to the number 1 and 2 positions. This worked for me, aligning them properly on the page.

 

We created an article on how to solve the issue for our customers. Feel free to check it out and use it. You may need to play with the positioning as we did, but it worked out in the end.

 

http://www.inmotionhosting.com/support/prestashop-16/move-cart-block-after-upgrade

 

 

Scott M - InMotion Hosting Customer Community

Link to comment
Share on other sites
w3bsolutions Collaborator

w3bsolutions

Posted
Posted (edited)

Yeah, but the problem is when you don't want the quick search block, if you disable it there is no way to get the cart block to align totally to the right with just the module positioning in the backoffice, at least I didn't manager to achieve it.

 

Have you tried aligning it without the search block?

Edited by fire2 (see edit history)
Link to comment
Share on other sites
kpham501 Newbie

kpham501

Posted
  • Author
Posted

I rolled back to 1.5.6.1.  I'm going to wait for some of these issues to get sorted out.  I don't mind working on fixing some things but it seems like there's a lot of presentation/layout issues coming from 1.5 to 1.6.  BTW I love the new backoffice.

Link to comment
Share on other sites
thekamaster Newbie

thekamaster

Posted
Posted

I had the same problem, it also came with image sizes not being updated/created. A good solution is, after 1.6 migration, switch to another theme (choose a random free one that works with 1.5), then switch back to the default bootstrap theme. Modules, position, and images (they will have to be completely regenerated in order to get the correct sizes), will be OK. You'll also have to reconfigure some modules that came with the new theme, but nothing complicated.

Link to comment
Share on other sites
fng77 Newbie

fng77

Posted
Posted

I rolled back to 1.5.6.1.  I'm going to wait for some of these issues to get sorted out.  I don't mind working on fixing some things but it seems like there's a lot of presentation/layout issues coming from 1.5 to 1.6.  BTW I love the new backoffice.

 

Same here. I also liked the backoffice, but rolled back. Pretty amazed that the rollback function worked so good. Everything back to normal. Gonna do a fresh install on another domain, e-tek.se Im sure a fresh install will work better.

Link to comment
Share on other sites
scottm Newbie

scottm

Posted
Posted

Hello kpham501,

 

I have the same issue as you when I remove the Quick Search Bar, the Cart Block moves more towards the center.

 

From what I can see, it is simply because of CSS. Since there is not another block in between the logo and the cart block, it moves over to the left.

 

So far, even if all other blocks are above the Cart Block in the module positions, as long as the Quick Search Bar is removed, it will still slide to the left.

 

If we discover anything, we will post it.

 

Scott M - InMotion Hosting Customer Community

Link to comment
Share on other sites
dioniz Newbie

dioniz

Posted
Posted (edited)

If you want your cart on right open yourtheme/modules/blockcart/blockcart.tpl and change this:

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

to this:

<div class="col-sm-4 pull-right clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">
Edited by dioniz (see edit history)
  • Like 6
Link to comment
Share on other sites
Arnel Newbie

Arnel

Posted
Posted (edited)

(note:  see my updated response below or use Dioniz's solution - this solution doesn't work with the responsive of the theme).  

 

 

As another solution to this issue, you can simply edit the CSS for that section.  A great way to do this is simply to inspect the element using the Chrome browser, then you can make changes to the CSS and see how it affects the elements on the screen.  In this case, I removed the SEARCH box, and then went to the CSS file found here:

../themes/default-bootstrap/css/modues/blockcart.css

 

Edit the file in a text editor and look for the #header .shopping_cart{ section.  The top part of the file will look like this:

 

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

You will need to make the following changes:

 

#header .shopping_cart {
  position: absolute;
  float: right;
  padding-top: 50px;
  margin-left: 500px; }

 

You'll need to change position from relative to absolute and then insert margin-left:500px.  The cart position then shifts over to the right edge.  If you become familiar with the CSS, you can easily position/format things in the theme.  I highly recommend the option of using Chrome to check out changes that you want to apply in CSS for any web page that's using it.  It allows you to find WHERE you need to make the changes, and how the changes will affect the display in the browser on the fly. And the changes you make in Chrome are not permanent.  

 

Remember that BEFORE you make any changes to files in your installation, you should make a BACKUP!!!  That way, you have some insurance should things go wrong.  

 

Please let us know if you still need help with this!

 

Regards,

Arnel C.

InMotion Hosting Community Support Team

Edited by arncus (see edit history)
Link to comment
Share on other sites
Arnel Newbie

Arnel

Posted
Posted (edited)

I don't think this is good idea because of mobile devices. On resolution around 800px cart disappear out of the screen.

 

 

Dioniz, you're absolutely right. My apologies!  I'll edit my post to point towards your solution, or if they want to try this one.  I double- checked this and reviewed how it can be changed in the CSS so that the theme remains appropriately responsive. Here are the required changes within the blockcart.css file (/themes/default-bootstrap/css/modules/blockcart):

 

@media (min-width: 768px) and (max-width: 991px) {
      .shopping_cart > a:first-child span.ajax_cart_product_txt, .shopping_cart > a:first-child span.ajax_cart_product_txt_s {
        display: none !important; }
        
        .shopping_cart { left: 110%; } 
        }
         
         
         @media (min-width: 992px) and (max-width: 1200px) {
      
        
        .shopping_cart { left: 110%; } 
        
         }
        
         
         @media (min-width: 1201px) {
      
        
        .shopping_cart { left: 110%; } 
        
         } 
         

These changes will work regardless of the screen size.  You can see the CART (kept at its original size of 270 px) until the screen width goes  below 768px mark.  At that point it reverts to a percentage of the screen width (width 100%) and is kept at that size.  If you enlarge the screen, the cart will remain on the  right edge.  

 

Hope that helps to explain everything!  

 

Arnel C.

 

 

 

 

Edited by arncus (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
sweetserendipity Newbie

sweetserendipity

Posted
Posted (edited)

I've been having the same issue with the cart moving to the middle when you remove the search bar.  Additionally, I was wanting to make my logo bigger and I wasn't finding a solution for the logo sizing. I'm also not much of coding expert, so I'm usually the one looking for a solution and not the one adding the solution.  But I found this work around for now until someone else can post something better.

 

To increase the size of your logo go to:

 

yourtheme/css/global.css

 

Find Row 703: 

.col-sm-4, header .row #header_logo {
    width: 33.33333%; }

 

Change it to:

.col-sm-4, header .row #header_logo {
    width: 50%; }
 
This will increase the size of the logo, but it will take up more width and thereby push the cart to the right.  If you don't like the logo so big, use Photoshop to add more canvas space to the right of the logo and decrease the canvas size of the length.  It may take a few tries with adjusting your logo canvas and playing around with the % width in the global.css. Hopefully you'll find something you're satisfied with.
 
This is how my header turned out.

 

 

post-735447-0-27563900-1396542067_thumb.jpg

 

UPDATE: Nevermind... This does make the logo look better, but it messes up the footer.  Maybe someone can develop further, but this is the extent of my capabilities.

Edited by sweetserendipity (see edit history)
Link to comment
Share on other sites
  • 2 months later...
Guid Newbie

Guid

Posted
Posted

 

If you want your cart on right open yourtheme/modules/blockcart/blockcart.tpl and change this:

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

to this:

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

Thanks a lot dioniz!

Link to comment
Share on other sites
  • 2 weeks later...
moraira Newbie

moraira

Posted
Posted

 

If you want your cart on right open yourtheme/modules/blockcart/blockcart.tpl and change this:

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

to this:

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

Great dioniz, problem solve :)

Link to comment
Share on other sites
razvancf Newbie

razvancf

Posted
Posted (edited)

 

If you want your cart on right open yourtheme/modules/blockcart/blockcart.tpl and change this:

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

to this:

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

Hi, i couldn't fine this line in blockcart.tpl. Any ideas how to solve this? I am using prestashop 1608 with the original theme, but i disabled the search module, so the cart has moved to the middle. Thank you in advance!

 

UPDATE: I was looking at the wrong blockcart.tpl, in another folder. I found the good one, i modified as you said, and it works just fine now, Thank very much!

Edited by razvancf (see edit history)
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...