Design and CSS styles
Version 5.x > Design and CSS styles > ShoppingCartItemSelector and positioning ProductOptions View modes: 
User avatar
Member
Member
Tillotto - 3/28/2011 5:02:48 PM
   
ShoppingCartItemSelector and positioning ProductOptions
Hello,
I have a product with 4 options and I want to put an option collection at each corner of the central product image. Could anyone give me a clue as to how I could achieve this, please? I think I need a <div> and position:absolute for each one but I can't quite work out how to apply it. ProductOptionSelector.cs possibly?
Many thanks for any suggestions.

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 3/29/2011 6:58:56 AM
   
RE:ShoppingCartItemSelector and positioning ProductOptions
Hello,


You could see the code of our defaul product option selector in:

~\App_Code\CMSModules\Ecommerce\ProductOptionSelector.cs

in the private Control GetSelectionControl() method.

Possibly, you could add a custom html elements to your page and add a link on them which will add that product with the required option like:

<a href="~/shoppingcart.aspx?productId=10&quantity=1&options=12,24">image or text</a>

Regrettably, there is no easy method to achieve a custom layout of product option selector.


Best regards,
Helena Grulichova

User avatar
Member
Member
Tillotto - 3/29/2011 9:28:51 AM
   
RE:ShoppingCartItemSelector and positioning ProductOptions
Hello,
thankyou for the prompt reply. I may try your suggestion, which I think I've understood :-) if I can't get my initial idea to work. I've put some scarily unprofessional hard-coding in ProductOptionSelector.cs like this


if (this.OptionCategory.CategoryName == "garmentPrintColour")
{
buttonListHorizontal.RepeatColumns = 12;
buttonListHorizontal.CssClass = "cmPC";
}


to change the class used by each option. Then I've got some CSS like this


#cmC {position:relative; top:200px; height:700px; width:680px;}
.cmPC {position:absolute; top:350px; left:300px;}


to position each option. This works, after a fashion, except that the Option Display Names aren't associated with the actual option anymore which is a puzzle.
I'll keep at it for a bit.
Cheers,

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 3/30/2011 3:29:17 PM
   
RE:ShoppingCartItemSelector and positioning ProductOptions
Hello,


what does it mean "the Option Display Names aren't associated with the actual option anymore"? A screenshot would be helpful.


Best regards,
Helena Grulichova

User avatar
Member
Member
Tillotto - 3/30/2011 3:59:27 PM
   
RE:ShoppingCartItemSelector and positioning ProductOptions
Hello,
here's a screenshot from my dev machine, so please accept that some words and images are for my convenience rather than a finished article :-)

User image

which I may change at http://www.slopeseeker.com/images/inprogress.png.

What I meant was that, e.g. the words 'Choose your hoodie colour' didn't seem to be in the same object as the associated option collection. I have sorted that now, as you can see.
~CMSModules\Ecommerce\Controls\ProductOptions\ProductOptionSelector.ascx
and
~App_Code\CMSModules\Ecommerce\ProductOptionSelector.cs
and
~CMSModules\Ecommerce\Controls\ProductOptions\ProductOptionSelector.ascx.cs
needed a bit of tweaking.
It's coming on OK so far. But I have various other things to add and test so it's not guaranteed to use this approach.
Thank you for your interest and advice.
Cheers,