Virtuemart Support :: Topic: AJAX shopping cart on the left (1/1)

Welcome, Guest

TOPIC: AJAX shopping cart on the left

AJAX shopping cart on the left 11 years 5 months ago #1097

William Chan	Hi all, If I put the shopping cart on the right, it will show everything in the cart to the left. However, if I place the shopping cart on the left column, it only show 1/2 of the cart and missed the left part. I think the left column is not wide enough to show the whole cart. Would it be easy to place the cart in both left and right column and showing the whole shopping cart? Thanks in advance.
	The topic has been locked.

AJAX shopping cart on the left 11 years 5 months ago #1114

Support

Hi,

I understand what you are saying, but we had to decide. And we have picked the "right" and designed our cart style by assuming it will be located on the right side of website.

Putting the cart on the right hand side was also the most appropriate way. If you look at amazon.com or any other well-known etores. The cart is always on the right side. Designing our Cart based on "right" alignment was our choice, if you are experienced enough to align the elements, with little customization you can have it looks good while it is on left side as well.

Cheers.

The topic has been locked.

AJAX shopping cart on the left 11 years 5 months ago #1145

William Chan	Yes, I can do the customization myself. Just give me so hint and direction will be alright. I understand cart is very common in the right but I only have the left + main layout. I can't change everything and start all over again because the cart is not flexible enough to put in the left. Many thanks.
	The topic has been locked.

AJAX shopping cart on the left 11 years 5 months ago #1155

Support

hmm. Okay, got you. Of course modifying our Shopping Cart would be much easier for your case.
Open this CSS file:
ROOT/templates/<yourjoomlatemplatefolder>/html/com_virtuemart/assets/css/flexibleVM2Global.css

And find this CSS rule:

.FlexibleDisplayCartContainerOut {
	position:absolute;
	right:0px;
	top:27px;
	background:#FFF;
	border:none;
	z-index:999997;
	min-width:350px;
	-webkit-box-shadow: 0px 2px 5px 0px #929292;
box-shadow: 0px 2px 5px 0px #929292; 
}

and change the right:0px; rule to left:0px;
So it is going to look like this:

.FlexibleDisplayCartContainerOut {
	position:absolute;
	left:0px;
	top:27px;
	background:#FFF;
	border:none;
	z-index:999997;
	min-width:350px;
	-webkit-box-shadow: 0px 2px 5px 0px #929292;
box-shadow: 0px 2px 5px 0px #929292; 
}