Flexible Attributes addon support

gjh42:

Flexible Attributes has been submitted to Free Addons and should be available for download soon.

This mod allows control over the display of individual attributes on the product info page. Each attribute can be styled globally to affect it in all products which use it, or with a per-product stylesheet to affect its display in only one product.

All user customization is done through the stylesheet (example stylesheet included).

An optional SQL patch is included to allow longer Option Name comments if desired.
So color me tardy to the party!!!:laugh: This is SO much better than the method I used to achieve an improved layout for attributes.. As usual Glenn, you rock!!!:clap:

Glad you like it :)

gjh42:

Glad you like it :)I haven't used it yet, but I will.. :clap:(I can say this sight unseen since I have no doubt in my mind that anything you contribute is a top notch solution out the gate!!) I remember you talking about how this could be implemented using only CSS on that thread regarding my hack for creating a two column attribute layout..

THIS is way better than the hack I was using, and since it's using CSS to manage the layout, it's infinitely more flexible than my table solution..

I believe that this will be a part of my standard "must have" Zen Cart modules for any future Zen Cart stores I build..

To be fair, the majority of stores will do fine with the stock attribute layout controls... but this should take care of pretty much anything that needs more.

gjh42:

To be fair, the majority of stores will do fine with the stock attribute layout controls... but this should take care of pretty much anything that needs more.
Agreed..:yes::yes: For the most part so have I..:laugh::laugh: Let me clarify my previous statement.. I would like a LOT more control over the way the default attributes layout looks in general.. Especially since I have a few clients who have product pages for custom product which have many attributes.. Having the attributes in rows versus a super long vertical stack is ideal IMHO..

this is a test...

ok. great!

dear all,
I really need your help!

I am doing a e-store selling contactlenses and i have 2 core issues (for now) to solve:

1. to put (related) attributes horizontally, and

2. to get both my QTY (quantity) attribute for left eye and right eye add up to the shopping cart QTY total.

I found the flexible attributes module for doing the horizontal thing and did the following script:

/attribute layout/
.wrapperAttribsOptions label {font-size: 1.0em;}/make "label" elements match other text/
h3#attribsOptionsText {display: none;}/'Display: None;' to hide the "Please Choose:" heading/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/allow floated attributes to sit side by side if desired/
#wAttrib-20 {clear: left; float: left;}
#wAttrib-21 {float: left;}/this will sit beside #wAttrib-20/
#wAttrib-22 {float: left;}/this will sit beside #wAttrib-21/
#wAttrib-23 {float: left;}/this will sit beside #wAttrib-22/
#wAttrib-24 {float: left;}/this will sit beside #wAttrib-23/

#wAttrib-25 {clear: left; float: left}/this will sit on a new line/
#wAttrib-26 {float: left;}/this will sit beside #wAttrib-25/
#wAttrib-27 {float: left;}/this will sit beside #wAttrib-26/
#wAttrib-28 {float: left;}/this will sit beside #wAttrib-27/
#wAttrib-29 {float: left;}/this will sit beside #wAttrib-28/

#wAttrib-21 .back {float: none;}
#wAttrib-22 .back {float: none;}
#wAttrib-23 .back {float: none;}
#wAttrib-24 .back {float: none;}
#wAttrib-26 .back {float: none;}
#wAttrib-27 .back {float: none;}
#wAttrib-28 .back {float: none;}
#wAttrib-29 .back {float: none;}

/EOF/

This is what i get:

http://cplens.com/index.php?main_page=product_info&cPath=65&products_id=180

please help!

Oh yes, if anyone can solve my QTY attributes add up problem (or can direct me to anywhere for the solution), do tell me also. Thanks.

NOTE: dunno php; noob.

Happy Holidays!

...

my fault.

to be clear about my script:

attribute 20 = Right Eye.

attributes 21 to 24 are all Right Eye related attributes. They should be on one roll.

attribute 25 = Left Eye.
attributes 26 to 29 are all the Left Eye related attributes. They should be on the same roll after RE's attributes.

Thanks.

Thinking as a customer, would it be more intuitive to have the left eye attributes on the left? Or is it an industry standard to always mention right eye first?

I'll look at your layout now.

You had clear: left; for the first left attribute, so it started a new line as the comment indicates. Just remove that.```
#wAttrib-25 {float: left; clear: left;}/this will sit on a new line/

#wAttrib-25 {float: left;}/*this will not sit on a new line*/
```

yup. right eye first and top of left eye. that's how they (... specialist who examine your eyesight when you make your spectacles. can't remember the name for it).

the layout is suppose to be in squence of what patient got from their eye-physician... or that spectacle man... -.-'...

gjh42:

You had clear: left; for the first left attribute, so it started a new line as the comment indicates. Just remove that.```
#wAttrib-25 {float: left; clear: left;}/this will sit on a new line/

#wAttrib-25 {float: left;}/*this will not sit on a new line*/
```

eh...
must be right eye attributes on top then left eye attributes below. its a instudry standard issue, not that i am fussy. try make a pair of specs and ask for your eye test result slip...

i wish it can be simpler... T_T...

windchaser:

yup. right eye first and top of left eye. that's how they (...** specialist who examine your eyesight when you make your spectacles. can't remember the name for it**).

the layout is suppose to be in squence of what patient got from their eye-physician... or that spectacle man... -.-'...

off topic post

An Optometrist is a Doctor of Optometry, an O.D. (not to be confused with a Doctor of Medicine, an M.D.). To become an optometrist, one must complete pre-professional undergraduate college education followed by 4 years of professional education in a college of optometry. Some optometrists also do a residency.

An Ophthalmologist is an eye M.D., a medical doctor who is specialized in eye and vision care. Ophthalmologists are trained to provide the full spectrum of eye care, from prescribing glasses and contact lenses to complex and delicate eye surgery. They may also be involved in eye research.

DivaVocals:

off topic post

An Optometrist is a Doctor of Optometry, an O.D. (not to be confused with a Doctor of Medicine, an M.D.). To become an optometrist, one must complete pre-professional undergraduate college education followed by 4 years of professional education in a college of optometry. Some optometrists also do a residency.

An Ophthalmologist is an eye M.D., a medical doctor who is specialized in eye and vision care. Ophthalmologists are trained to provide the full spectrum of eye care, from prescribing glasses and contact lenses to complex and delicate eye surgery. They may also be involved in eye research.

thanks. learnt something today.

so how can i get my attributes aligned just as the eye test slip we get from an optometrist -- RE top, LE bottom all in sequence... :dontgetit

I expect an examiner looks at the right eye (on the left from his viewpoint) first, so it makes sense that that is how reports are organized.

I thought you were saying you wanted all the attributes on one row. You already had them organized the way you are describing now... can you show in detail how you want it to look?

Okay so I'm not the only one who looked at the site and thought this very same thing.. I was going to make the same suggestion, but thought I was missing something.. LOL..

gjh42:

I expect an examiner looks at the right eye (on the left from his viewpoint) first, so it makes sense that that is how reports are organized.

I thought you were saying you wanted all the attributes on one row. You already had them organized the way you are describing now... can you show in detail how you want it to look?
Posted via Mobile Device

I just did the same thing with flexible attributes. I was also able to take out the ugly references to attribute names like "power range 2" (ie left)

/*attribute layout*/
.wrapperAttribsOptions label {font-size: 1.0em;}/*make "label" elements match other text*/
h3#attribsOptionsText {display: none;}/*hide the "Please Choose:" heading*/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
#wAttrib-3 {
clear: left; 
float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/bc.gif);
border: 1px solid #cccccc;
}
#wAttrib-3 h4 {display: none;}
#wAttrib-2 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/power.gif);
border: 1px solid #cccccc;}
#wAttrib-2 h4 {display: none;}
#wAttrib-4 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/cyl.gif);
border: 1px solid #cccccc;}
#wAttrib-4 h4 {display: none;}
#wAttrib-5 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/axis.gif);
border: 1px solid #cccccc;}
#wAttrib-5 h4 {display: none;}
#wAttrib-6 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/adds.gif);
border: 1px solid #cccccc;}
#wAttrib-6 h4 {display: none;}
#wAttrib-13 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/qty.gif);
border: 1px solid #cccccc;}
#wAttrib-13 h4 {display: none;}
#wAttrib-7 h4 {display: none;}
#wAttrib-8 {
clear: left; 
float: left;
padding: 10px 10px 10px 40px;
border: 1px solid #cccccc;
background-image: url(../images/bc.gif);
}
#wAttrib-8 h4 {display: none;}
#wAttrib-9 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/power.gif);
border: 1px solid #cccccc;}
#wAttrib-9 h4 {display: none;}
#wAttrib-10 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/cyl.gif);
border: 1px solid #cccccc;}
#wAttrib-10 h4 {display: none;}
#wAttrib-11 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/axis.gif);
border: 1px solid #cccccc;}
#wAttrib-11 h4 {display: none;}
#wAttrib-12 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/adds.gif);
border: 1px solid #cccccc;}
#wAttrib-12 h4 {display: none;}
#wAttrib-14 {float: left;
padding: 10px 10px 10px 40px;
background-image: url(../images/qty.gif);
border: 1px solid #cccccc;}
#wAttrib-14 h4 {display: none;}
#wAttrib-15 {display: none;}

this worked wonders for me, and allowed me to hide names with images. you will of course have to set it according to your own attribute layout, and either make images for it, or find another way to display your attribute names.

gjh42:

I expect an examiner looks at the right eye (on the left from his viewpoint) first, so it makes sense that that is how reports are organized.

I thought you were saying you wanted all the attributes on one row. You already had them organized the way you are describing now... can you show in detail how you want it to look?

This is how it is supposed to be:

Right Eye (RE/OD) QTY(RE) PWR(RE) BC(RE) DIA(RE) CYL(RE) AXS(RE)

Left Eye (LE/OS) QTY(LE) PWR(LE) BC(RE) DIA(LE) CYL(LE) AXS(LE)

Not all lenses have CYL and AXS discription. Most of them ends at DIA (Diameter). CYL and AXS are for Toric Lenses for people who have astigmatism.

So you want the dropdown boxes in the same line with their labels? From your stylesheet, it looked like you had added rules to specifically put them below their labels. Delete or comment out these rules:```
/Aline Dropdown Box Below Attribute's OptionName/
/
#wAttrib-21 .back {float: none;}
#wAttrib-22 .back {float: none;}
#wAttrib-23 .back {float: none;}
#wAttrib-24 .back {float: none;}
#wAttrib-26 .back {float: none;}
#wAttrib-27 .back {float: none;}
#wAttrib-28 .back {float: none;}
#wAttrib-29 .back {float: none;}
/

If that is not what you want, maybe you mean to have the Right/Left Eye line up with the labels that follow?

Right Eye QTY (RE) PWR (RE) BC (RE) DIA (RE)
. . . . . . . . . . [] . . . . . [] . . . . . . [] . . . . . []

Your stylesheet comments out the rules and properties that would do just that:```
/#wAttrib-20 {clear: left; float: left;}/
/#wAttrib-20, #wAttrib-21, #wAttrib-22, #wAttrib-23, #wAttrib-24 {float: left;}/
#wAttrib-21, #wAttrib-22, #wAttrib-23, #wAttrib-24 {float: left;}

#wAttrib-25 {clear: left; /float: left;/}/this will sit on a new line/
#wAttrib-26, #wAttrib-27, #wAttrib-28, #wAttrib-29 {float: left;}