Zen Cart Logo
Forums / Setting Up Categories, Products, Attributes / Wrap DIV around attributes

Wrap DIV around attributes

Views: 2,774

Results 1 to 20 of 30
17 Jul 2014, 9:57 AM
#1
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Wrap DIV around attributes

Hi there, I'm looking for a way to wrap a DIV around several attributes as I want to create a button that will open and close a div with extra options inside it on my product page. Normally the DIV would be hidden until someone clicks a button. There will be attributes outside the closed DIV and also inside the closed DIV.

So you would have something like this:

Print Options (FIRST SET OF ATTRIBUTE OPTIONS):
Full Colour Single Sided
Full colour black & white reverse
Full colour both sides

<a href="OPENDIVBUTTON">Open</a>

<div id="MYHIDDENATTRIBUTESDIV">Finishing Options: Option 1, Option 2, Option 3</div>

Upload (LAST ATTRIBUTE OPTION)

I came across some code which says it targets an attribute name but I am unsure how to use it. This would enable me to start a div before an attribute name and end it where I wanted.

This is the code:

<?php if (stristr($attributes_values->fields['products_options_name'],'MYFIRSTATTRIBUTENAME')) { ?><div id="MYHIDDENATTRIBUTESDIV"><?php } ?> <?php if (stristr($attributes_values->fields['products_options_name'],'MYLASTATTRIBUTENAME')) { ?></div><?php } ?>
17 Jul 2014, 1:00 PM
#2
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

Nick1973:

Hi there, I'm looking for a way to wrap a DIV around several attributes as I want to create a button that will open and close a div with extra options inside it on my product page. Normally the DIV would be hidden until someone clicks a button. There will be attributes outside the closed DIV and also inside the closed DIV.

So you would have something like this:

Print Options (FIRST SET OF ATTRIBUTE OPTIONS):
Full Colour Single Sided
Full colour black & white reverse
Full colour both sides

<a href="OPENDIVBUTTON">Open</a>

<div id="MYHIDDENATTRIBUTESDIV">Finishing Options: Option 1, Option 2, Option 3</div>

Upload (LAST ATTRIBUTE OPTION)

I came across some code which says it targets an attribute name but I am unsure how to use it. This would enable me to start a div before an attribute name and end it where I wanted.

This is the code:

<?php if (stristr($attributes_values->fields['products_options_name'],'MYFIRSTATTRIBUTENAME')) { ?><div id="MYHIDDENATTRIBUTESDIV"><?php } ?> <?php if (stristr($attributes_values->fields['products_options_name'],'MYLASTATTRIBUTENAME')) { ?></div><?php } ?>

Slightly a different tact to this, but there is already a way to reference attributes without wrapping them in an additional div tag. It would require a sort of "consistency" to be considered across the implementation, but...

So let's assume that an attribute to be controlled is designated as option name 1, option value 127, then the following css would hide the button and the label associated with it. If this could be worked into your javascript, you would simply need to identify for the button to do the toggling, what attribute options to control at the specific detail necessary to get the end result. This seems like the "same" level of work that would be necessary to wrap the attributes to begin with. Add to that, if the desire is to hide all values of option name 1, I would think there is a way to consider all items matching the criteria of #attrib-1-

#attrib-1-127, #attrib-1-127+label { display: none; }

To address the break after the attribute, would add another item in the comma separated list with +br at the end (I think.

17 Jul 2014, 1:06 PM
#3
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

But, now that I have reread your code snippet, I think that would go into your attributes.php file that would get inur override directory such as includes/modules/YOUR_TEMPLATE/ folder.

The right side of the strstr statement that is in all caps, would be the text that indicates the last option and would be placed after the last option is displayed for the last option line, and before the first option is displayed for the first line.

17 Jul 2014, 1:10 PM
#4
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

Do have to realize, that if you use the method you have described that the sequence of adding attributes to a product is crucial as if the last one is displayed first and the first displayed last, then the sequence will be out of order and the "feature" may not work as desired. :/

17 Jul 2014, 1:16 PM
#5
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

mc12345678:

But, now that I have reread your code snippet, I think that would go into your attributes.php file that would get inur override directory such as includes/modules/YOUR_TEMPLATE/ folder.

The right side of the strstr statement that is in all caps, would be the text that indicates the last option and would be placed after the last option is displayed for the last option line, and before the first option is displayed for the first line.

Yeah I tried that but nothing happened...however I could have been doing it wrong which is why I am seeking help.

17 Jul 2014, 1:47 PM
#6
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

So, looking at an attributes.php file that was included with a different module (and I believe it is 1.5.1), towards the end of the file, almost like 5 lines from the end, you should see something like:

                // attributes images table
                $options_attributes_image[] = trim($tmp_attributes_image) . "\n";
                $products_options_names->MoveNext();
              }

I would consider adding the custom code as such to just before the $options_attributes_image[] line:

if (stristr($attributes_values->fields['products_options_name'],'MYFIRSTATTRIBUTENAME')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = '<div id="MYHIDDENATTRIBUTESDIV">' . $options_name[$last_id];
} elseif (stristr($attributes_values->fields['products_options_name'],'MYLASTATTRIBUTENAME')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = $options_name[$last_id] . '</div>';
}

This may work...

17 Jul 2014, 2:33 PM
#7
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

On second thought, I might change the previous a little... Notice the change of the second if...

So, looking at an attributes.php file that was included with a different module (and I believe it is 1.5.1), towards the end of the file, almost like 5 lines from the end, you should see something like:

                // attributes images table
                $options_attributes_image[] = trim($tmp_attributes_image) . "\n";
                $products_options_names->MoveNext();
              }

I would consider adding the custom code as such to just before the $options_attributes_image[] line:

if (stristr($attributes_values->fields['products_options_name'],'MYFIRSTATTRIBUTENAME')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = '<div id="MYHIDDENATTRIBUTESDIV">' . $options_name[$last_id];
} 

if (stristr($attributes_values->fields['products_options_name'],'MYLASTATTRIBUTENAME')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = $options_name[$last_id] . '</div>';
}

This may work... Also, the change was made, in the event for some reason the first attribute is the last attribute. Otherwise, the div would never be closed when it had the elseif statement... (Sorry)

17 Jul 2014, 3:42 PM
#8
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

mc12345678:

On second thought, I might change the previous a little... Notice the change of the second if...

So, looking at an attributes.php file that was included with a different module (and I believe it is 1.5.1), towards the end of the file, almost like 5 lines from the end, you should see something like:

            // attributes images table
            $options_attributes_image[] = trim($tmp_attributes_image) . "\n";
            $products_options_names->MoveNext();
          }
> 
> I would consider adding the custom code as such to just before the $options_attributes_image[] line:
> 
> ```
if (stristr($attributes_values->fields['products_options_name'],'MYFIRSTATTRIBUTENAME')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = '<div id="MYHIDDENATTRIBUTESDIV">' . $options_name[$last_id];
} 

if (stristr($attributes_values->fields['products_options_name'],'MYLASTATTRIBUTENAME')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = $options_name[$last_id] . '</div>';
}

This may work... Also, the change was made, in the event for some reason the first attribute is the last attribute. Otherwise, the div would never be closed when it had the elseif statement... (Sorry) Ok will try this and see if this solves my issue. I will get back to you.

17 Jul 2014, 4:05 PM
#9
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

Nick1973:

Ok will try this and see if this solves my issue. I will get back to you.

I've I tried this in modules/MYTEMPLATENAME/attributes.php

// grouped attributes wrapper //
if (stristr($attributes_values->fields['products_options_name'],'Finishing Options')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = '<div id="MYHIDDENATTRIBUTESDIV" style="background-color:#ffffcc;">' . $options_name[$last_id];
}

if (stristr($attributes_values->fields['products_options_name'],'Upload your artwork')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = $options_name[$last_id] . '</div>';
}

            // attributes images table
            $options_attributes_image[] = trim($tmp_attributes_image) . "\n";
            $products_options_names->MoveNext();
          }
          // manage filename uploads
          $_GET['number_of_uploads'] = $number_of_uploads;
          //      zen_draw_hidden_field('number_of_uploads', $_GET['number_of_uploads']);
          zen_draw_hidden_field('number_of_uploads', $number_of_uploads);
        }

This doesn't do anything.

If you go here it might be easier for you to see what I am trying to achieve.

http://www.online-printing-services.co.uk/index.php?main_page=product_info&cPath=14_83&products_id=1

I need the div to start at Finishing Options and end just before Upload your artwork.

So where you see Folds, for different products this might be something else before Upload your artwork.

17 Jul 2014, 4:13 PM
#10
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

Nick1973:

I've I tried this in modules/MYTEMPLATENAME/attributes.php

// grouped attributes wrapper //
if (stristr($attributes_values->fields['products_options_name'],'Finishing Options')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = '<div id="MYHIDDENATTRIBUTESDIV" style="background-color:#ffffcc;">' . $options_name[$last_id];
}

if (stristr($attributes_values->fields['products_options_name'],'Upload your artwork')) {
end($options_name);
$last_id=key($options_name);
$options_name[$last_id] = $options_name[$last_id] . '</div>';
}

            // attributes images table
            $options_attributes_image[] = trim($tmp_attributes_image) . "\n";
            $products_options_names->MoveNext();
          }
          // manage filename uploads
          $_GET['number_of_uploads'] = $number_of_uploads;
          //      zen_draw_hidden_field('number_of_uploads', $_GET['number_of_uploads']);
          zen_draw_hidden_field('number_of_uploads', $number_of_uploads);
        }

This doesn't do anything.

If you go here it might be easier for you to see what I am trying to achieve.

http://www.online-printing-services.co.uk/index.php?main_page=product_info&cPath=14_83&products_id=1

I need the div to start at Finishing Options and end just before Upload your artwork.

So where you see Folds, for different products this might be something else before Upload your artwork.

Yeah, on retrospect that won't do anything, the variable $attributes_values doesn't exist in this scope. Need to change $attributes_values to $products_options_names

:)

17 Jul 2014, 4:25 PM
#11
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

I haven't viewed the source code for the page, but I do notice that the above code doesn't have: MYHIDDENATTRIBUTESDIV defined/replaced.

17 Jul 2014, 4:37 PM
#12
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

mc12345678:

Yeah, on retrospect that won't do anything, the variable $attributes_values doesn't exist in this scope. Need to change $attributes_values to $products_options_names

:)

That kind of works BUT it puts it in the wrong place.

See this line <h4 class="optionName back"><div id="MYHIDDENATTRIBUTESDIV" style="background-color:#ffffcc;">Finishing Options</h4>

I need it outside <h4 class="optionName back">

So like this

<div id="MYHIDDENATTRIBUTESDIV" style="background-color:#ffffcc;"><h4 class="optionName back">Finishing Options</h4>

and for the end

currently it is like this <h4 class="optionName back"><label class="attribsUploads" for="attrib-46-0">Upload your artwork</label></div></h4>

and should be

</div><h4 class="optionName back"><label class="attribsUploads" for="attrib-46-0">Upload your artwork</label></h4>
17 Jul 2014, 4:45 PM
#13
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

So, then back to having to put that code (probably as originally written in the file that calls attributes.php, which I seem to think is a template file. Possibly the easier way to identify that is to use the variable I said to replace in a search through tools->developer's toolkit. And see which file(s) that appears in. Then in the loop that displays al of the applicable attributes, add that code.

17 Jul 2014, 4:56 PM
#14
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

mc12345678:

So, then back to having to put that code (probably as originally written in the file that calls attributes.php, which I seem to think is a template file. Possibly the easier way to identify that is to use the variable I said to replace in a search through tools->developer's toolkit. And see which file(s) that appears in. Then in the loop that displays al of the applicable attributes, add that code.

Well that would be tpl_modules_attributes.php wouldn't it?

17 Jul 2014, 5:07 PM
#15
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

Nick1973:

Well that would be tpl_modules_attributes.php wouldn't it?

Well I tried this and nothing happened

<?php if (stristr($products_options_name->fields['products_options_name'],'Finishing Options')) { ?><div id="MYHIDDENATTRIBUTESDIV"><?php } ?>
17 Jul 2014, 5:30 PM
#16
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

Nick1973:

Well I tried this and nothing happened

<?php if (stristr($products_options_name->fields['products_options_name'],'Finishing Options')) { ?><div id="MYHIDDENATTRIBUTESDIV"><?php } ?>

My guess and sorry I don't have a copy of tpl_modules_attributes.php redily available, is that the variable ($products_options_name) would be something different in that file, ie back to what was in your earlier post.

17 Jul 2014, 5:46 PM
#17
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

mc12345678:

My guess and sorry I don't have a copy of tpl_modules_attributes.php redily available, is that the variable ($products_options_name) would be something different in that file, ie back to what was in your earlier post.

This is the full code for tpl_modules_attributes.php. Note I have added coded and used $options_name

<?php /** * Module Template * * Template used to render attribute display/input fields * * @package templateSystem * @copyright Copyright 2003-2005 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $ */ ?> <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 id="<?php echo $options_wrapper_id[$i];//gjh42 ?>" class="wrapperAttribsOptions"> <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') { ?> <h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3> <?php } ?> <?php /* MY CODE STARTS HERE */ ?> <?php if (stristr($options_name->fields['products_options_name'],'Finishing Options')) { ?><div id="MYHIDDENATTRIBUTESDIV"><?php } ?> <?php /* MY CODE ENDS HERE */ ?> <h4 class="optionName back"><?php echo $options_name[$i]; ?></h4><div style="clear:both;" /></div><div class="back"><div id="productattributesheaderbg"></div><div id="productattributesmidbg"><?php echo "\n" . $options_menu[$i]; ?><br style="clear:both;" /></div><div id="productattributesfooterbg"></div></div> <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
<div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?> <?php if ($options_attributes_image[$i] != '') { ?> <?php echo $options_attributes_image[$i]; ?> <?php } ?> <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) . ' ' . '<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><br class="clearBoth" />
17 Jul 2014, 5:55 PM
#18
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

Nick1973:

This is the full code for tpl_modules_attributes.php. Note I have added coded and used $options_name

<?php /** * Module Template * * Template used to render attribute display/input fields * * @package templateSystem * @copyright Copyright 2003-2005 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $ */ ?> <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 id="<?php echo $options_wrapper_id[$i];//gjh42 ?>" class="wrapperAttribsOptions"> <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') { ?> <h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3> <?php } ?> <?php /* MY CODE STARTS HERE */ ?> <?php if (stristr($options_name->fields['products_options_name'],'Finishing Options')) { ?><div id="MYHIDDENATTRIBUTESDIV"><?php } ?> <?php /* MY CODE ENDS HERE */ ?> <h4 class="optionName back"><?php echo $options_name[$i]; ?></h4><div style="clear:both;" /></div><div class="back"><div id="productattributesheaderbg"></div><div id="productattributesmidbg"><?php echo "\n" . $options_menu[$i]; ?><br style="clear:both;" /></div><div id="productattributesfooterbg"></div></div> <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
<div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?> <?php if ($options_attributes_image[$i] != '') { ?> <?php echo $options_attributes_image[$i]; ?> <?php } ?> <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) . ' ' . '<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><br class="clearBoth" />

Good choice, but not quite. At this point $options_name is referenced as an array through [$i] so would need to use $options_name[$i] instead. That and placed where desired should work though I. Also don't remember how stristr works. I assume it means if the text on the right is in the string to the left, then return true.

17 Jul 2014, 8:45 PM
#19
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: Wrap DIV around attributes

Haven't heard back, assume this resolved the issue?

18 Jul 2014, 8:43 AM
#20
nick1973 avatar

nick1973

Totally Zenned

Join Date:
Sep 2008
Location:
Cleethorpes
Posts:
1,230
Plugin Contributions:
3

Re: Wrap DIV around attributes

mc12345678:

Haven't heard back, assume this resolved the issue?

No, I'd just finished for the day.

Come back to it this morning and have tried a few options but none seemed to work.

Then tried this which although doesn't what I want does display the DIV outside the h4 tag, it just displays on every attribute.

<?php if ($options_name[$i] != 'Finishing Options') { echo '<div id="MYHIDDENATTRIBUTESDIV" style="background-color:#ffffcc;">'; ?><?php

}
?>

Also tried this:

<?php if ($options_name[$i] != fields['products_options_name'],'Finishing Options') { echo '<div id="MYHIDDENATTRIBUTESDIV" style="background-color:#ffffcc;">'; ?><?php

}

And this:

<?php if ($options_name[$i] != fields['options_name'],'Finishing Options') { echo '<div id="MYHIDDENATTRIBUTESDIV" style="background-color:#ffffcc;">'; ?><?php

}
?>
?>