Flexible Attributes addon support

have you modified the cart completely to look like your website, or have you embedded a Product into your website?Neither - the entire site is Zen Cart. This is an example of how the template can be modified, and without major code changes in this instance. Most of the site pages are ez-pages, while the application and registration/payment pages are products.

To move the comment text from above the name to below it, find these sections in tpl_modules_attributes.php```php

(bunch of code)

<div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>

and switch the 
 == '0')
and
 == '1')
```php
<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') {
?>
<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
<?php
  }
?>

(bunch of code)


<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?>

is there some advantage to doing that, over just using the cart on pages requiring payments?I only had to build the site once, with navigation and different page content all handled using stock Zen Cart functions like the ez-pages sidebox menu and the ez-page content editing system.

I have

<div class="wrapperAttribsOptions" id="wAttrib-8">

<div class="attribsOptions">
<h4 class="optionName back">Available Dates :</h4>
<div class="back">
<input type="radio" name="id[8]" value="13" checked="checked" id="attrib-8-13" /><label class="attribsRadioButton zero" for="attrib-8-13">Please select (dd/mm/yyyy)</label><br />
<input type="radio" name="id[8]" value="14" id="attrib-8-14" /><label class="attribsRadioButton zero" for="attrib-8-14">01/05/2011</label><br />

I want display:none for the <br /> on the radio buttons in this attribute only. This is the first step in trying to get the radio buttons to appear in columns (there are 18 of them).I tried both of the following

#wAttrib-8 .back+br {display:none}
#wAttrib-8 .attribsOptions.back+br {display:none}

that didnt work - clearly I havent fully understood something

can anyone help out please:blush:

Add to your stylesheet_flexible_attributes

#wAttrib-8 br+input+label+br {display:none;}

Thanks - now I'll have a go at getting the colums better spaced.

I dont understand why it is 'br+input+label+br'
perhaps you could enlighten me please.

:(:(
Initially I had all radio buttons in a single column to the right of the 'available dates' name.

I used your mod to override the 'br' - and found IE and FF respond differently.
IE leaves all the radio buttons in a block to the right of the attribute name.
FF moves all the radio buttons to the left under the attribute name, still all in a block:ohmy:

This can be seen athttp://www.freight-stop-shop.co.uk/tickets/index.php?main_page=product_info&cPath=9&products_id=83

I prefer the FF layout, with that there is the room I need for 6 columns - which is what I am trying to achieve.

I tried to give the 'label' items a 'width' (also tried 'min-width'), in order to get 6 radio buttons per line but that had no effect.

I tried to override the override in order to get a 'br' after every 6radio buttons that didnt work

I currently have the following css.

#wAttrib-8 .optionName {margin-top: -0.2em; margin-right: 4.5em;} /* note aligns text with label */
#wAttrib-8 br+input+label+br {clear:both; display:none;} /* takes out <br /> and makes buttons next o each other */
/* #attrib-8-13 {display: none;}  note hides the radio button on the first one */
#wAttrib-8 input+label {width:10em; background:yellow;} /* make the columns the same width */
#attrib-8-19+label+br {display:block; } /* turn <br /> on again */

After a couple of hours trying - nuff :wacko:- time for a beer.

ANy help for a depressed old man would be appreciated.

I don't know how much I can help with IE CSS bugfixing... which version of IE are you using? I have to run now - will check back in a day or two.

br+input+label+br

This means "a break following a label following an input following a break". The first br is there so that the radiobuttons don't ride up next to the first "select" label.

Add !important to your stylesheet to force this rule to overrule the generic one:

#attrib-8-19+label+br {display:block !important; } /* turn <br /> on again */

Thanks for the explanation.

After a lot of trying I failed to find a way with the classess and ids available to get the layout I wanted.

In the end I saved the served page locally and messed with it until I found a way to get it to work. Take a look at
http://www.freight-stop-shop.co.uk/tickets/index.php?main_page=product_info&cPath=9&products_id=83
I found that the simplest solution was to add

<div id="....">........</div> around each radio button.

I did this by hacking the code in attributes.php as follows

switch ($products_options_names->fields['products_options_images_style']) {

case '0':
$tmp_radio .= '<div id="wDivAttrib-'.$products_options_names->fields['products_options_id'] . '-' . $products_options_value_id.'" >'.zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton zero" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br /></div>' . "\n";
break;

case '1':
$tmp_radio .= '<div id="wDivAttrib-'.$products_options_names->fields['products_options_id'] . '-' . $products_options_value_id.'" >'.zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton one" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . ($products_options->fields['attributes_image'] != '' ? zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) . '  ' : '') . $products_options_details . '</label><br /></div>' . "\n";
break;

case '2':
$tmp_radio .= '<div id="wDivAttrib-'.$products_options_names->fields['products_options_id'] . '-' . $products_options_value_id.'" >'.zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton two" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . ($products_options->fields['attributes_image'] != '' ? '<br />' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) : '') . '</label><br /></div>' . "\n";
break;

this abt line 232 - what do you think - can you see any problems with that?

I then used the following CSS

#attrib-8-13{display: none;}  /* note hides the radio button on the first one */

/* March */
#wDivAttrib-8-14,#wDivAttrib-8-15,#wDivAttrib-8-16,#wDivAttrib-8-17,#wDivAttrib-8-18,#wDivAttrib-8-19 {
width:8.5em; float:left; }

(some lines omitted - duplicates of above for other buttons)

/* First day in month  - to start on new line */
#wDivAttrib-8-14,#wDivAttrib-8-20,#wDivAttrib-8-26,#wDivAttrib-8-32,#wDivAttrib-8-38,#wDivAttrib-8-44,#wDivAttrib-8-50 {
clear:both;	}

It looks greate in FF and in IE 9 (64bit) under Win 7(64bit)
but on IE9 (32 bit) under win 7 (32bit) its a bit odd - although on XP with IE 8 its fine.

I would appreciate some feedback on how it appears for other users. It should be multiple columns across the whole width. On my odd on it is every button next to the previous in the right hand half of the window.

Just booted my wifes computer WIn7(32bit) + IE9(32bit) - looks OK on that one - weird - probably one of the addons I have interfering.

Turning on 'compatibility view' in my IE9 fixed it - dont know why it is required.

This may mean that the code hack wasnt required - however
adding the div wrapper made the CSS so much cleaner and simpler.

I don't know why you couldn't make it work. The rule described in post 95 made it work exactly as desired when I tested it on your site in Firefox Web Developer, starting a new line after attribute 8-19.

Indeed it did, but not in IE (at least not on the pc Iwas using). As I said turning on compatibility mode resolved some isues and may have made the code hack unnecessary. However since discovering that turning compatibility on helped I havent taken the step of going bac to pre-hack

The CSS for post-hack is much simpler, there being no need for the long '+' sequences and no need to turn br off and on again.
I just hid one div to hide the first entry, and added the float and clear to the divs to get entries alongside or on a new line.

I could not find a way of getting the width of the button+label defined even in FF, pre-hack but again this was easy with the new divs post hack.

Ok - I have taken the time to go back to pre-hack.
The website now - should you care to look - uses the following css

#wAttrib-8 .optionName {margin-top: -0.2em; margin-right: 4.5em;} /* note aligns text with label */
#wAttrib-8 br {display:none;} /*turn off All br on this set of buttons */
#attrib-8-13, #attrib-8-13+label {display:none;} /* hide first button and label */
#attrib-8-13+label+br {display:block !important; } /* turn this br on again */
#attrib-8-30+label+br {display:block !important; } /* turn this br on again */
#attrib-8-34+label+br {display:block !important; } /* turn this br on again */
#attrib-8-41+label+br {display:block !important; } /* turn this br on again */
#attrib-8-46+label+br {display:block !important; } /* turn this br on again */
 

It works - almost - I cannot find a way to align the buttons for equal column width the 'label' does not seem to respond to 'width'settings.

It is the same in both FF and IE.

Since the labels are inline elements, they cannot use the width property. You can get around this by making them "inline-block":```
#wAttrib-8 label {display: inline-block; width: 5em;}
#wAttrib-8 #attrib-8-13+label {display: inline;}

You then need to set the first label back to inline so it can take the width it needs to stay on one line.
...Or
#wAttrib-8 #attrib-8-13+label {display: none;}
if you want that hidden.

well that all seems to work., I appreciate the tutorial.

There is a 'discrepancy' between FF and other browsers. FF is the odd one out, IE, Opera, Safari, Google, all leave a gap between the name and the first row of buttons. FF does not leave this extra row gap.

I have ```
#wAttrib-8 .optionName {margin-top: -0.2em; margin-right: 4.5em;} /* note aligns text with label */
#wAttrib-8 br {display:none;} /*turn off All br on this set of buttons /
#wAttrib-8 label {display: inline-block; width: 5.5em;} / set widths /
#attrib-8-13, #attrib-8-13+label {display:none !important;} / hide first button and label /
#attrib-8-13+label+br {display:block !important; } / turn this br on again */

I set the hidden label to 'g' (arbitary - its hidden) in case it was an artifact of the text being too long for the block-width - it obviously isnt that.

I can live with it though.

I still say the CSS was much simpler with divs around each button - maybe a thought for future release.

Once again many thanks for the help:clap::clap:

I only modified what was necessary when I first built the mod, but I agree that a wrapper for each button would make it easier to handle them as units. I probably will do that when I do a new version of it.

Hello
When I first started using zen cart I could not set my attributes the way I wanted and gave up on zen cart. Now im back and this MOD is exactly what I have been looking for!!:yes:

There are a few things I cant figure out how to set.
My test site is
http://xlegends.com/beta/index.php?main_page=product_info&cPath=25_40&products_id=5
What I want to do is...

1. Center the attribute name
2. Create spacing between one attribute and another
3. Make everything look like it is in a table
4. Color the background of the option name (not just the text area but the entire length.

I've tried everything I can think of but maybe my css skills are lacking. I think creating spacing between the attribute value can be done by adding <br> somewhere in the attribute code but cant seem to find where.

My attribute name is set to text only and radio button on the side.

:bigups: any help would be greatly appreciated.

Replace your stylesheet_flexible_attributes.css content with this:```
/attribute layout/
.wrapperAttribsOptions label {font-size: 1.0em;}/make "label" elements match other text/

/.back {font-size: 1.3em; background-color: #FFFFff;
text-decoration: none;
margin:0.0em;
display:inline-block;
padding:0em;
align:center;
border:0px solid #e05030;}/

h3#attribsOptionsText {text-align: center; font-size: 1.6em;}/hide the "Please Choose:" heading/
/* display: center; is invalid - do you want text centered?*/

h4.optionName {font-size: 1.3em; background-color: #FFFF00;
text-decoration: none;
margin:0;
padding:0;
border:0px solid #e05030;
float:none; /Color the background of the option name - full width/
text-align:center;/Center the attribute name/
}

.optionName+br/to eliminate the effect of your unnecessary added <br>/, .optionName+br+.back+br/to eliminate the extra space from standard <br class="clearBoth" />/ {display: none;}

.wrapperAttribsOptions {/move common style properties here/
font-size: 1.4em;
float:left;
padding:4px;
margin-right: 0.5em;
border:1px solid #e05030;
line-height: 2.0;
}

.attribsOptions .back {float:none;}

.wrapperAttribsOptions+br.clearBoth {display: none;}/allow floated attributes to sit side by side if desired/

#wAttrib-1 { /only need properties in these when different from common/
}
#wAttrib-2 {
}
#wAttrib-3 {
text-decoration:line-through;
}
#wAttrib-4 {
padding:2px;
color:#e05830;
font-weight:bold;
border:2px solid #e05030;
}
#wAttrib-5 {
}
#wAttrib-6 {
border:1px solid #ffffff;
line-height: 3.0;
}

.attribsCheckbox {
display: none;
}
.attribsRadioButton {
display: none;
}