category specific css for different browsers

[niccol]

So, pretty much as detailed above?

[gjh42]

Yes, same principle except it avoids character issues by using the (unique) option id.

I haven't used attribute images, and notice that the mod also doesn't identify them. You could rectify this by moving the </div> to include the image, or by adding a div to the image:

<?php
if ($options_attributes_image[$i] != '') {
?>
<div id="<?php echo $options_wrapper_id[$i] . 'Image';//gjh42 ?>">
<?php echo $options_attributes_image[$i]; ?>
</div>
<?php
}
?>

[niccol]

So, pretty much as detailed above?

[gjh42]

attributes.php is insanely complex, but after careful study, it appears that either $options_menu[$i] or $options_attributes_image[$i] will hold the attribute output, and the other will be empty. I don't know why $options_attributes_image[$i] was originally put after the (non-functional) lower comment output in tpl_modules_attributes.php, but it seems that it would be best to move that within the main div so that it would apply in either case.

The mod has moved .wrapperAttribsOptions and the id to enclose the whole attribute (comments, name and menu), with a .attribsOptions class in the original location, so .wrapperAttribsOptions should logically enclose $options_attributes_image[$i] as well. I will test and update the mod to handle that. Thanks for this discussion which brought the issue to light.

[eVelt]

thank you all

Nicole
the images hack you made is a bit off
this shall do it

take

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>

and replace it with

<?php
if ($options_attributes_image[$i] != '') {
?>
<div class="swatch_wrapper_<?php echo $i;?>"><?php echo $options_attributes_image[$i]; ?></div>
<?php
}

this will create an image wrapper div, and name it's class on an array
swatch_wrapper_0, swatch_wrapper_1 and so on

But it will create after each option a empty div plus the clearer, and will mess up ie7 (and some times ie8)unless you declare all un-necessary swatch_wrapper_? divs display:none

that is because the swatch_wrapper div is not in the IF / ELSE condition

this is what i did some time ago and it works nicely
https://www.voucher-checks.com/quick...n-top-p-8.html (tested on Firefox & ie8 only)

[niccol]

You're right that putting the <div> inside the conditional is a much better idea.

I wonder if this will produce the same Ids for the same attribute for different products? What I mean if one product has 'blue', red, pink and green and another product has blue yellow and green then doesn't green have a different ID? This may not be a problem but it is why I went with attribute names (edited) and Glenn's solution I believe goes with a created ID number.

[eVelt]

yes
but it will not be IDs it will be Classes
all images will be in a signal div named
swatch_wrapper_0 till swatch_wrapper_100000
and it will contain all images for that option

but if you will add an option above the option with the images
it will be called swatch_wrapper_2 instead of swatch_wrapper_1 thus screwing up the css unless you add a product-only- css

if we will be able to add a IF condition to the whole div, we would do it with an id using your NEW4 method
rather than a class running on an array

[gjh42]

Flexible Attributes uses the option name id as a base, which will be the same for every product where it appears. The individual attribute choices are inside this, and not singled out by FA code; they are given global ids based on their option value id plus option name id, by default ZC code. This doesn't usually include the label, though - something that has caused me annoyances in the past. You could manipulate the input individually, but not usually its label.

The swatch_wrapper_# looks like it works nicely there, though as Nick mentioned it would apply to different attributes on different products if they didn't have the identical option order.
Looking at attributes.php, $options_attributes_image[$i] will never be empty, because even if there is no real content, it will have a "\n" to output.

$options_attributes_image[] = trim($tmp_attributes_image) . "\n";

I think the whole array does not get output at once anywhere, so formatting could better be handled at output time (if in a div, no further output formatting is needed) and the conditional allowed to work as intended to hide the div unless it has real content.

$options_attributes_image[] = trim($tmp_attributes_image);

Alternatively, the if test could check for the content being just "\n" as well as being empty ('').

[eVelt]

I'm setting up a new test store just to test your mod
it should work fine on 1.3.9

tell me if i got you correct.

every time the attributes loop true the code
an image output will be created regardless if you use an image or not, the only thing is; that it is plain white space, till we came along and created a div so now its visible

if this is so, we might work on a solution based on a css declaration
that will hide all divs with IDs not containing the option id (ie. image_wrapper_ w/o any addition)

we will also rename the clearer so that the empty ones will be Display:none as well

[gjh42]

That would be great! If you could use my latest version of the files, I would appreciate it, as I have not been able to test the recent changes yet. The only change to attributes.php is the shortened line (around line 609 in the mod file). This snippet shows where the change is (along with the mod's original line in the file - the only change from the core version).

                $options_wrapper_id[] = 'wAttrib-' . $products_options_names->fields['products_options_id'];//gjh42

                // attributes images table
                //$options_attributes_image[] = trim($tmp_attributes_image) . "\n";//commented out for test - substitute next line
                $options_attributes_image[] = trim($tmp_attributes_image);//test 20100713
                $products_options_names->MoveNext();
              } 

The effect of this line should be to allow $options_attributes_image[$i] to actually be empty when appropriate, so the if test will not output an empty div.
My tpl_modules_attributes.php is a short file, so I will just post it here.

<?php
/**
 * Module Template
 *
 * Template used to render attribute display/input fields
 *
 * @package templateSystem
 * @copyright Copyright 2009 Glenn Herbert
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.gnu.org/licenses/ GNU Public License V3.0
 * @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
 * Modified for Flexible Attributes by Glenn Herbert (gjh42)  20091228    test 2010-07-12
 */
?>
<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

<?php
    for($i=0;$i<sizeof($options_name);$i++) {
?>
<div class="wrapperAttribsOptions" id="<?php echo $options_wrapper_id[$i];//gjh42 ?>">
<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
?>
<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
<?php
  }
?>

<div class="attribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
</div>

<?php
if ($options_attributes_image[$i] != '') { //  test 2010-07-12
  echo ' debug: image ' . $i;
  echo '<div class="attribsOptionsImage">' . $options_attributes_image[$i] . '</div>' . "\n";
} else {//debug line
  echo ' debug: no image ' . $i;
}
?>
<br class="clearBoth" />


<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?>
</div><?php //end of  wrapperAttribsOptions ?>
<br class="clearBoth" />
<?php
    }
?>


<?php
  if ($show_onetime_charges_description == 'true') {
?>
    <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
<?php } ?>


<?php
  if ($show_attributes_qty_prices_description == 'true') {
?>
    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
<?php } ?>
</div>

This puts the wrapper around all parts of one attribute, including comment, option name, menu content and image content.