Align attributes in shopping cart

Hi,

Can I align the attribute options in the shopping cart?

And can I format the numbers to 2 decimal places?

Thanks,

Rick

Maybe just a teenzy bit more information and a look at what you're talking about?

dbltoe:

Maybe just a teenzy bit more information and a look at what you're talking about?

Here goes...

If you click below and add the product to the cart
http://www.eyefultower.co.uk/shop/index.php?main_page=product_info&cPath=5&products_id=18
you will note that the attribute options (which will all be 0.00) are staggered, I would like them to be aligned.

Plus I am working on another similar site
http://www.optiglaze.co.uk/order/index.php?main_page=product_info&cPath=1&products_id=2
where the same values are entered as text, if the user enters '2' I would like it changed to '2.00'.

I am not too concerned whether I can achieve either of the above but it would be nice.

Thanks in advance for any help.

The attributes are displayed in the cart as <li> list items, with no CSS way to distinguish between parts of each.
I presume that in one of the shopping cart php files the option name and value are combined to make up the list item, and in that code you could insert a <span class="cartAttName"></span> around the option name part so it could be styled with a width in CSS.

gjh42:

The attributes are displayed in the cart as <li> list items, with no CSS way to distinguish between parts of each.
I presume that in one of the shopping cart php files the option name and value are combined to make up the list item, and in that code you could insert a <span class="cartAttName"></span> around the option name part so it could be styled with a width in CSS.

I can see this in tpl_shopping_cart_default

<?php echo $product['attributeHiddenField']; if (isset($product['attributes']) && is_array($product['attributes'])) { echo '<div class="cartAttribsList">'; echo '<ul>'; reset($product['attributes']); foreach ($product['attributes'] as $option => $value) { ?>

Is there anything I can do with this?

Thanks,
Rick

Probably, although I'm not familiar enough with this part of the code to help on this...

It looks like you may want to be adding the span somewhere under the foreach statement, in the code you haven't included.

You can align the attribute options with css.
Here is part of my css.

.wrapperAttribsOptions {
margin:0 10px;
text-align:left;
background-color: ;
}

#attribsOptionsText {
margin:0em;
padding:0.5em 0px !important;
text-align:center;
background-color: ;
border: 1px solid #6BF878;
}

#productAttributes {
position: relative;  /*do not remove-fixes stupid IEbug*/
float: none;
margin-left: 90px; 
margin-right: 90px;
padding: 2px;
background-color: ;
border: 1px solid #6BF878;

}

Check it out here
A work in progress. I need to adjust the margins a little to get to line up right.
Mark

tophand:

You can align the attribute options with css.
Here is part of my css.

.wrapperAttribsOptions {
margin:0 10px;
text-align:left;
background-color: ;
}

#attribsOptionsText {
margin:0em;
padding:0.5em 0px !important;
text-align:center;
background-color: ;
border: 1px solid #6BF878;
}

#productAttributes {
position: relative; /do not remove-fixes stupid IEbug/
float: none;
margin-left: 90px;
margin-right: 90px;
padding: 2px;
background-color: ;
border: 1px solid #6BF878;

}

> A work in progress. I need to adjust the margins a little to get to line up right.
> Mark

Hi, thanks for showing an interest.

Lets say I added a Mud Girl tee shirt to my cart, the attributes would align as follows...

* Select  Color - Dark Heather-Black
* Select Size - Adult X-Large

But what I am after is

* Select  Color - Dark Heather-Black
* Select Size -...Adult X-Large

(without the full stops obviously)

Is this something I can do?

Cheers,

Rick

h4.optionName (width: 100px); /adjust to fit/

Oops... I was falling asleep when I typed that. Of course it should be

h4.optionName {width: 100px;}

and you can adjust it to fit your situation.

#productAttributes
control the layout.
Margin control the size.
But on one computer everything lines up the way you want, on another it is off by 1-2 spaces.
I get the same on Fire Fox as well Explorer depending what computer I'm on.

If you are using Fire Fox get the web developer toolbar and you can edit the style sheet on the fly and see the out come in real time.

hth,
Mark

Just reviewed the thread, and want to comment that all the recent CSS posts (including mine) are irrelevant to the posted question of attribute text alignment in the shopping cart display.

gjh42:

Just reviewed the thread, and want to comment that all the recent CSS posts (including mine) are irrelevant to the posted question of attribute text alignment in the shopping cart display.

Nonetheless many thanks for trying to help.

I like the css you posted and what it did with the border around the attributes on the product info page, so have shamelessly pinched it!