Flexible Attributes addon support

gjh42:

I would copy the desired statement to replace the name statement for now:```php
if (PRODUCTS_OPTIONS_SORT_ORDER=='0') {
$options_order_by= ' order by LPAD(popt.products_options_sort_order,11,"0")';
} else {
//$options_order_by= ' order by popt.products_options_name';
$options_order_by= ' order by LPAD(popt.products_options_sort_order,11,"0")';
}

That seems to work as well. I have made that change. Thanks again for all your help!!!!

Could this mod be used to setup the attributes just like the left eye/right eye grid on this page:

http://www.clearlycontacts.ca/contact-lenses/acuvue-oasys/prod91399.html

This mod is awesome! I am having a difficult time doing a few things though. You can see my live page here: http://www.framesforlife.com/copy-examples-c-18/frame-example-1-p-11

Here is my flexible_attributes.css stylesheet coding:

/* Global Entries*/
.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;}/*allows floated attributes to sit side by side if desired. Without this each attribute has to go to new line*/

/*My Entries*/
#wAttrib-4 {clear: left;} /*Artwork Size Text Box. This starts on a new line*/
#wAttrib-1 {clear: left; float: left;}/*Select Width Drop-down*/
#wAttrib-2 {clear: left; float: left;}/*Select Height Drop-down*/
#wAttrib-3 {float: left;} /*Width Fractions. this will sit beside width drop-down*/
#wAttrib-5 {float: left;} /*Height Fractions. this will sit beside width drop-down*/
#wAttrib-42 .attribPrice {display: none;} /*this is not working yet*/
#wAttrib-78 .attribPrice {display: none;} /*this is not working yet*/
```Here are my issues:
1. Is it possible to make the text disappear for attribute #3 and attribute #5 (Width and Height Fractions)? I want the title text to be hidden from the visitors so the field can come closer to the first box (as both tie together). I tried this code: ```
#wAttrib-3 {float: left; display:none;}
``` but the whole box disappeared. My plan is to preferably hide this text so the visitor cannot see it.

2. Is is possible to make text appear to the right of the field instead instead of before the field?

3. The rules for attribute #42 and #78 above do not seem to be working. I am trying to hide the (+3.33) pricing in both of these drop-downs. All pricing in these two drop-down menus need to be hidden. The ID #'s are 42 and 78 and you can see I have them defined. I am following the rules of this post: <http://www.zen-cart.com/forum/showpost.php?p=907101&postcount=5> according to blackbelt.

Any ideas please?

Danielle - Yes, you can get that layout.
Set up the four headings as read-only attributes floated left, then the four right eye attributes floated left with the first one also clear:left;, then the left eye the same. You can hide attribute labels per the method I will show sports guy. (The details may differ for some kinds of attributes.)

sports guy - Use this rule for hiding text as you describe:

#wAttrib-3 label, #wAttrib-5 label {display: none;} /hide fraction text/

A rule like this will put the text to the right of its input:

#wAttrib-5 h4.optionName {float: right;} /text to right of input/

The pricing span in the define does not actually function, as I found when I tested it some time later. I have added a note to that thread to alert people.
You would need to go into the attributes code and add the span with class.

Hey gjh42 (or anyone else)...

Can you think of an implementation of the Flexible Attributes system that would allow me to have clickable images instead of radio buttons?

For instance, I would want the four smilies below to be clickable radio buttons to choose different product colors, and not have the actual radio button itself be displayed (unless entirely necessary).

These would be my four selectable image radio buttons:

:smile: :cool: :blink: :blush:

Thanks!

hockey2112:

Hey gjh42 (or anyone else)...

Can you think of an implementation of the Flexible Attributes system that would allow me to have clickable images instead of radio buttons?

For instance, I would want the four smilies below to be clickable radio buttons to choose different product colors, and not have the actual radio button itself be displayed (unless entirely necessary).

These would be my four selectable image radio buttons:

:smile: :cool: :blink: :blush:

Thanks!

I've gotten it pretty close to where I want it, but I am stuck on one last thing... how can I eliminate the text of the label, while allowing the background of the label to remain? I tried "font-size: 0", but that didn't work on all browsers.

http://tinyurl.com/87bxoxe

Thanks!

I like your solution of expanding the padding of the labels and giving them background images.

Since you do want the label text, only differently arranged, try substituting these two rules for the versions you have now in stylesheet_flexible_attributes.css:```
/current/#attrib-27-45 + label {
background: url("/includes/templates/kickstart/images/createprogram-4-sm.gif") no-repeat scroll 0 0 transparent;
bottom: 28px;
left: 160px;
padding: 70px 17px;
position: relative;
}
#attrib-27-45 {
left: 185px;
position: relative;
top: 28px;
z-index: 1000000;
}

/trial/
#attrib-27-45+label {
background: url("/includes/templates/kickstart/images/createprogram-4-sm.gif") no-repeat scroll 0 0 transparent;
padding: 110px 43px 10px 27px;
color: #0f8800;
width: 80px;
height: 30px;
position: relative;
top: -95px;
left: 160px;
display: inline-block;
}

#attrib-27-45 {
left: 185px;
position: relative;
top: -100px;
z-index: 1000000;
}

I think you will be able to get all of that set of attribute labels and inputs arranged as desired with the right style tweaking.

gjh42:

I like your solution of expanding the padding of the labels and giving them background images.

Since you do want the label text, only differently arranged, try substituting these two rules for the versions you have now in stylesheet_flexible_attributes.css:```
/current/#attrib-27-45 + label {
background: url("/includes/templates/kickstart/images/createprogram-4-sm.gif") no-repeat scroll 0 0 transparent;
bottom: 28px;
left: 160px;
padding: 70px 17px;
position: relative;
}
#attrib-27-45 {
left: 185px;
position: relative;
top: 28px;
z-index: 1000000;
}

/trial/
#attrib-27-45+label {
background: url("/includes/templates/kickstart/images/createprogram-4-sm.gif") no-repeat scroll 0 0 transparent;
padding: 110px 43px 10px 27px;
color: #0f8800;
width: 80px;
height: 30px;
position: relative;
top: -95px;
left: 160px;
display: inline-block;
}

#attrib-27-45 {
left: 185px;
position: relative;
top: -100px;
z-index: 1000000;
}

> I think you will be able to get all of that set of attribute labels and inputs arranged as desired with the right style tweaking.



Almost there! My one remaining issue is a ton of space just underneath the radio buttons, above the rest of the attributes. Any ideas on how I can fix that issue?

Also, I was wondering if it might be possible to change the background image of the radio button to the darker version of the image when the button is selected, and have that image remain unless a different button is selected. Thoughts on that?

Thanks again for your help!

Try this:

#wAttrib-27 .attribsOptions>.back {height: 70px;}

Highlighting the label for a selected input may not be possible, but if it is, it will take some research. I'll see if I can dig up anything, as it is of interest to me to find out.

gjh42:

Try this:

#wAttrib-27 .attribsOptions>.back {height: 70px;}

Highlighting the label for a selected input may not be possible, but if it is, it will take some research. I'll see if I can dig up anything, as it is of interest to me to find out.

Looks like that did the trick!! :clap:

Black Belt,

I have these css rules in my stylesheet:

/*My Entries*/
#wAttrib-4 {clear: left;} /*Artwork Size Text Box. This starts on a new line*/
#wAttrib-1 {clear: left; float: left;}/*Select Width Drop-down*/
#wAttrib-2 {clear: left; float: left;}/*Select Height Drop-down*/
#wAttrib-3 label, #wAttrib-5 label {display: none;} /*hide fraction text*/
```Which works but the two boxes are not exactly even. You can see what I am talking about here: <http://www.framesforlife.com/copy-examples-c-18/frame-example-1-p-11> For Some reason the fraction boxes are a little higher than the width and height boxes.

This might be asking a lot but is it possible to have the inch symbol (") just barely to the right of both fraction boxes? This would show that these measurements are in inches. As of now I call theses Width Fractions and Height Fractions. I don't want to change what they are called overall, just what they are called on this page (so as not to confuse my visitors). Width fractions and height fractions are a little wordy. 

When I used your recommendation of: ```
#wAttrib-5 h4.optionName {float: right;} /*text to right of input*/
``` it put the text all the way to the right instead of right next to the attribute box which is where I was hoping to place it. If I could get the text barely to the right of the box I could call these: " Wide and " High which would work for the fractions.

For the alignment, find this

stylesheet.css (line 277)
.wrapperAttribsOptions {
margin: 0.3em 0;
}
Change to
margin: 0 0 0.6em;
which puts all the margin at the bottom.

These rules will keep the fraction text from moving too far to the right. Change the text from Width Fraction to " and adjust the measurements as required.

#wAttrib-3 , #wAttrib-5 {width: 24em;} /limit float-right distance/
#wAttrib-3 h4, #wAttrib-5 h4 {float: right;} /move fraction text/

For the alignment, find this

stylesheet.css (line 277)
.wrapperAttribsOptions {
margin: 0.3em 0;
}
Change to
margin: 0 0 0.6em;
which puts all the margin at the bottom.

These rules will keep the fraction text from moving too far to the right. Change the text from Width Fraction to " Wide and adjust the measurements as required.

#wAttrib-3 , #wAttrib-5 {width: 24em;} /limit float-right distance/
#wAttrib-3 h4, #wAttrib-5 h4 {float: right;} /move fraction text/

Thank you black belt. I decided just to remove the text after much playing and now both are lined up properly.

This is what I have for my product page:

#wAttrib-4 {clear: left;} /*Artwork Size Text Box. This starts on a new line*/
#wAttrib-1 {clear: left; float: left;}/*Select Width Drop-down*/
#wAttrib-2 {clear: left; float: left;}/*Select Height Drop-down*/
#wAttrib-3 label, #wAttrib-5 label {float: left; display: none;} /*hide fraction text*/
```You can see it in action here: <http://www.framesforlife.com/copy-examples-c-18/frame-example-1-p-11>

Now, is it possible to apply this look to the shopping cart page and the orders area as well?

The 3 attribute is called: Width Fraction and the 5 attribute is called: Height Fraction, that's why I wanted to hide these from the product page.

As of now the cart page and order confirmation page looks like this: 

Frame Example 3"

Frame Width - 13
Width Fraction - 5/16
Frame Height - 18
Height Fraction - 11/16

No, the attribute styling only applies to the product info page. Any other place attributes are displayed would need totally separate custom coding.

Hi gjh42,

Love Flexible Attributes!

I have a couple of questions. After the install and setup of F_A, I lost 'Please Choose: '. It is listed in the product_info.php but not showing. What did I screw up?

http://daedosouth.com/index.php?main_page=product_info&cPath=1&products_id=2

TIA,

David

Second Question:

In the belt dropdown, I originally ordered 'Select' the lowest to be the first in the list (default). This worked in all of my dropdowns. However, this dropdown keeps defaulting to the last item item in the list so I reordered 'Select' to be last in the list as a temporary fix.

I am at a total lose here????

David

The demo stylesheet (stylesheet_flexible_attributes.css) ships with this rule: ```
h3#attribsOptionsText {display: none;}/hide the "Please Choose:" heading/

Flexible Attributes does not affect the option value sort order. Are you sure the list items are all set correctly for the "Default" box in Attributes Controller?

Hi gjh42,

Thanks for the quick response.
Problem is resolve. Thank you!

Concerning problem #2:

The first 3 dropdowns (DOB) work perfectly.
The last 3 are defaulting to the highest ordered number regardless of how I set it up.

'Select' is no longer ordered properly as a quick fix.

'Belt' was set this way:
Select 10
White 20
Yellow 30
...
Brown 80
Red 90

During testing, the dropdown would default 'Red'.
When I removed red, it defaulted to 'Brown'.
I added 'Red' back and changed 'Select' to 110 and now it defaults to 'Select' as a quick fix.

The next to dropdowns are behaving the same way.

I am clueless?????

Thanks for helping,

David