Basket Component/Attribute placing

[dave_finlayson]

I am trying to align components/attributes directly under the product description in the checkout.

Currently, because of the product image, this information is displayed undermeath the image/description in seperate tables (Colour-Colour: Powder Blue | Size-Size:8 in example image)

What I need to do is get these tables inside the Product Description table cell if possible. Have tried numerous different thing but can't see to work it out.

Any suggestions?

Current code and screenshot attached + Screenshot of how I would like it ti look (basketnew.gif)

[cdicken]

Hi Dave

Your shopping cart looks really awesome. Unfortunately, there's no way I know to get the layout as you need it as the same 'ProductLine' table is used for product lines and also component details - so you can't insert a 'ProductLine' table within itself.

The only thing I can suggest is maybe putting the image above the product line, rather than beside it. At least that way the three product lines will be together - although the image will no longer be to the left.

[dave_finlayson]

Chris,

Thanks for that. Since I am not as busy as I could be today I had a little play around with removing the tables completely from the View Cart Bulk Area and replacing them with CSS. Whilst it looks terrible at the moment it does seem to work apart from the fact that it wants to display an image next to the components as well. Before I go to far in sorting CSS layouts etc can you just advise whether this will actually work, or am I just wasting my time? Oh and why is it trying to display an image beside the components?

Code attached

[cdicken]

Hi Dave

You just need to add the <Actinic:REMOVE TAG="ImageLine"> and </Actinic:REMOVE> back into the layout - surrounding your image code.

[dave_finlayson]

Chris,

Thanks for your pointers here. I have managed create the desired effect by doing the following:-

1. Removing all the table cells and rows from 'Cart Product Details'
2. Putting the contents of 'Cart Product Details' with in a 100% table (including 1 row and 1 cell)
3. Using CSS to float the image left and the Quantity right
4. Adding '<tr><td colspan="6" background="ckline.gif"></td></tr>' to the end of 'Product Line Row In Cart' Layout to create the line after each basket entry

If anyone else wnats to do this too I am happy to post completed code for them. I've attached an image of the final look.

[fatoftheland]

Hi David

Could you post that code as i'd love to do this to our cart!

[dave_finlayson]

OK, first of all

Points to note:-

1. I have not as yet tested this to any great extent. If it breaks your website, don't blame me!
2. This only covers the Shopping Basket. The same can be done in the actual cart pages but I haven't got round to that yet.
3. Any images referenced in the code you will have to create yourself.
4. You should be fairly comfortable with amending (and reverting if needed) layouts within actinic if you plan to do this. A resonable knowledge of CSS and HTML would be useful to so you can amend to your requirements.
5. This assumes you are not displaying product codes in your checkout. If you are it will probably require some fiddling but should be fairly simple.
6. This has been produced to fit into our site, you might have to play around with it a bit to match the widths, style etc of your site.
7. You obviously have create thumbnails for your products.
7. STOP READING NOW AND TAKE A SNAPSHOT OF YOUR SITE.

Now, the instructions:-

1. Replace everything in 'Cart Product Details' with the contents of Cart Product Details.txt attached.
2. Add the following to your actinic stylesheet:-

.cartbox{
float:left;
margin-right:5px;
}

3. If you would like a line inbetween each basket product add:-

<tr><td colspan="6" background="checkoutbreaker.gif"></td></tr>

to 'Product Line Row In Cart'. You will need to create the relevant image.

This should give you the basic layout. The Cart headers are simply new tables added above the code in 'View Cart Page Shopping Cart Grid'. Again you may have to fiddle a bit to get it to display properly.

Any probs post them here!

[cdicken]

Am I OK to put this in the Advanced User Guide? I'll test it myself first.

[dave_finlayson]

Of course Chris, as I am sure you will see, it's basically the same for the basket in the checkout pages!

[cdicken]

Thanks - I'll add it when I next upgrade the guide.