0

I am working on an ecommerce website. We are showing the nutrition facts for each product and most products are configurable products and these products have different flavors. Since they have different flavors that means there is different ingredients and the percentages are slightly different.

I have made a custom attribute that is visible on front end and will show up if I put it in the configurable product, but I want to put the different labels in each simple product and then have a drop down so swap between the flavors (same type of drop down for selecting the attributes). I have a drop down setup and that replaces the text where I want it, what I need help with is dynamically populating that drop down and the array with the custom attribute values.

take a look at this test product I have setup. I have the nutrition facts in the sidebar through a Static Block that then point to a php file I have setup. http://hyperionsupps.com/test/index.php/red-bull2.html

CODE FOR STATIC BLOCK

Nutritional Facts
{{block type="core/template" name="nutritionalfacts" template="nutritionalfacts.phtml"}}

SIDEBAR CODE (Right now I have the array hard coded with the nutrition tables)

 <script type="text/javascript">

 var textBlocks = new Array( 
 'Select from the list to change this box', 
 '<table id="label_outer_table" class="outer_label"><tbody><tr id="facts_outer_line" class="outer_label"><td id="facts_outer_cell" class="outer_label"><table id="facts_table" class="facts_label"><tbody><tr id="facts_line_0" class="facts_label"><td id="facts_cell_0_1" class="seq_span label_size"><span id="facts_span_0_1_1" class="seq_span label_size">1 - 2 Fl. Oz. Bottle</span></td><td id="facts_cell_0_3" class="seq_span label_flavor" colspan="2"><span id="facts_span_0_3_1" class="seq_span label_flavor">Pomegranate</span></td></tr><tr id="facts_line_1" class="facts_label"><td id="facts_cell_1_1" class="seq_span label_title" colspan="3"><span id="facts_span_1_1_1" class="seq_span label_title">Supplement Facts</span></td></tr><tr id="facts_line_2" class="facts_label"><td id="facts_cell_2_1" class="seq_span label_serving" colspan="3"><span id="facts_span_2_1_1" class="seq_span label_serving">Serving Size</span><span id="facts_span_2_1_2" class="seq_span_non_first label_serving">2</span><span id="facts_span_2_1_3" class="seq_span_non_first label_serving">Fl Oz</span></td></tr><tr id="facts_line_3" class="facts_label"><td id="facts_cell_3_1" class="seq_span label_serving" colspan="3"><span id="facts_span_3_1_1" class="seq_span label_serving">Servings Per Container</span><span id="facts_span_3_1_2" class="seq_span_non_first label_serving">1</span></td></tr><tr id="facts_line_4" class="facts_label"><td id="facts_cell_4_1" class="seq_span label_divider medium" colspan="3"></td></tr><tr id="facts_line_5" class="facts_label"><td id="facts_cell_5_1" class="seq_span label_heading_l"><span id="facts_span_5_1_1" class="seq_span label_heading_l">Amount Per Serving</span></td><td id="facts_cell_5_3" class="seq_span label_heading_r" colspan="2"><span id="facts_span_5_3_1" class="seq_span label_heading_r">% Daily Value</span></td></tr><tr id="facts_line_6" class="facts_label"><td id="facts_cell_6_1" class="seq_span label_divider narrow" colspan="3"></td></tr><tr id="facts_line_7" class="facts_label"><td id="facts_cell_7_1" class="seq_span label_ing"><span id="facts_span_7_1_1" class="seq_span label_ing">Calories</span></td><td id="facts_cell_7_2" class="seq_span label_qty"><span id="facts_span_7_2_1" class="seq_span label_qty"></span><span id="facts_span_7_2_2" class="seq_span_non_first label_qty">4</span></td><td id="facts_cell_7_3" class="seq_span label_dv"><span id="facts_span_7_3_1" class="seq_span label_dv"></span></td></tr><tr id="facts_line_8" class="facts_label"><td id="facts_cell_8_1" class="line_above seq_span label_ing line_indent"><span id="facts_span_8_1_1" class="seq_span label_ing line_indent">Calories From Fat</span></td><td id="facts_cell_8_2" class="line_above seq_span label_qty"><span id="facts_span_8_2_1" class="seq_span label_qty"></span><span id="facts_span_8_2_2" class="seq_span_non_first label_qty">0</span></td><td id="facts_cell_8_3" class="line_above seq_span label_dv"><span id="facts_span_8_3_1" class="seq_span label_dv"></span></td></tr><tr id="facts_line_9" class="facts_label"><td id="facts_cell_9_1" class="line_above seq_span label_ing"><span id="facts_span_9_1_1" class="seq_span label_ing">Niacin (As Niacinamide)</span></td><td id="facts_cell_9_2" class="line_above seq_span label_qty"><span id="facts_span_9_2_1" class="seq_span label_qty"></span><span id="facts_span_9_2_2" class="seq_span_non_first label_qty">30</span><span id="facts_span_9_2_3" class="seq_span_non_first label_qty">mg</span></td><td id="facts_cell_9_3" class="line_above seq_span label_dv"><span id="facts_span_9_3_1" class="seq_span label_dv">150%</span></td></tr><tr id="facts_line_10" class="facts_label"><td id="facts_cell_10_1" class="line_above seq_span label_ing"><span id="facts_span_10_1_1" class="seq_span label_ing">Vitamin B6 (As Pyridoxine Hydrochloride)</span></td><td id="facts_cell_10_2" class="line_above seq_span label_qty"><span id="facts_span_10_2_1" class="seq_span label_qty"></span><span id="facts_span_10_2_2" class="seq_span_non_first label_qty">40</span><span id="facts_span_10_2_3" class="seq_span_non_first label_qty">mg</span></td><td id="facts_cell_10_3" class="line_above seq_span label_dv"><span id="facts_span_10_3_1" class="seq_span label_dv">2,000%</span></td></tr><tr id="facts_line_11" class="facts_label"><td id="facts_cell_11_1" class="line_above seq_span label_ing"><span id="facts_span_11_1_1" class="seq_span label_ing">Folic Acid</span></td><td id="facts_cell_11_2" class="line_above seq_span label_qty"><span id="facts_span_11_2_1" class="seq_span label_qty"></span><span id="facts_span_11_2_2" class="seq_span_non_first label_qty">400</span><span id="facts_span_11_2_3" class="seq_span_non_first label_qty">mcg</span></td><td id="facts_cell_11_3" class="line_above seq_span label_dv"><span id="facts_span_11_3_1" class="seq_span label_dv">100%</span></td></tr><tr id="facts_line_12" class="facts_label"><td id="facts_cell_12_1" class="line_above seq_span label_ing"><span id="facts_span_12_1_1" class="seq_span label_ing">Vitamin B12 (As Cyanocobalamin)</span></td><td id="facts_cell_12_2" class="line_above seq_span label_qty"><span id="facts_span_12_2_1" class="seq_span label_qty"></span><span id="facts_span_12_2_2" class="seq_span_non_first label_qty">500</span><span id="facts_span_12_2_3" class="seq_span_non_first label_qty">mcg</span></td><td id="facts_cell_12_3" class="line_above seq_span label_dv"><span id="facts_span_12_3_1" class="seq_span label_dv">8,333%</span></td></tr><tr id="facts_line_13" class="facts_label"><td id="facts_cell_13_1" class="line_above seq_span label_ing"><span id="facts_span_13_1_1" class="seq_span label_ing">Sodium</span></td><td id="facts_cell_13_2" class="line_above seq_span label_qty"><span id="facts_span_13_2_1" class="seq_span label_qty"></span><span id="facts_span_13_2_2" class="seq_span_non_first label_qty">10</span><span id="facts_span_13_2_3" class="seq_span_non_first label_qty">mg</span></td><td id="facts_cell_13_3" class="line_above seq_span label_dv"><span id="facts_span_13_3_1" class="seq_span label_dv">&lt;1%</span></td></tr><tr id="facts_line_14" class="facts_label"><td id="facts_cell_14_1" class="line_above seq_span label_divider medium" colspan="3"></td></tr><tr id="facts_line_15" class="facts_label"><td id="facts_cell_15_1" class="seq_span label_ing"><span id="facts_span_15_1_1" class="seq_span label_ing">Energy Blend</span></td><td id="facts_cell_15_2" class="seq_span label_qty"><span id="facts_span_15_2_1" class="seq_span label_qty"></span><span id="facts_span_15_2_2" class="seq_span_non_first label_qty">1870</span><span id="facts_span_15_2_3" class="seq_span_non_first label_qty">mg</span></td><td id="facts_cell_15_3" class="seq_span label_dv"><span id="facts_span_15_3_1" class="seq_span label_dv">†</span></td></tr><tr id="facts_line_16" class="facts_label"><td id="facts_cell_16_1" class="line_above seq_span label_ing line_indent" colspan="3"><span id="facts_span_16_1_1" class="seq_span label_ing line_indent">Citicoline, Glucuronolactone, N-Acetyl L-Tyrosine, L-Phenylalanine, Taurine, Malic Acid, Caffeine</span></td></tr><tr id="facts_line_17" class="facts_label"><td id="facts_cell_17_1" class="seq_span label_divider hairline" colspan="3"></td></tr><tr id="facts_line_18" class="facts_label"><td id="facts_cell_18_1" class="seq_span label_ing"><span id="facts_span_18_1_1" class="seq_span label_ing">Enzyme Blend</span></td><td id="facts_cell_18_2" class="seq_span label_qty"><span id="facts_span_18_2_1" class="seq_span label_qty"></span><span id="facts_span_18_2_2" class="seq_span_non_first label_qty">1</span><span id="facts_span_18_2_3" class="seq_span_non_first label_qty">mg</span></td><td id="facts_cell_18_3" class="seq_span label_dv"><span id="facts_span_18_3_1" class="seq_span label_dv">†</span></td></tr><tr id="facts_line_19" class="facts_label"><td id="facts_cell_19_1" class="line_above seq_span label_ing line_indent" colspan="3"><span id="facts_span_19_1_1" class="seq_span label_ing line_indent">Amylase, Protease, Lipase, Cellulase, Lactase</span></td></tr><tr id="facts_line_20" class="facts_label"><td id="facts_cell_20_1" class="seq_span label_divider medium" colspan="3"></td></tr><tr id="facts_line_21" class="facts_label"><td id="facts_cell_21_1" class="seq_span label_notes_sm" colspan="3"><span id="facts_span_21_1_1" class="seq_span label_notes_sm">† Daily Value not established.</span></td></tr></tbody></table></td></tr><tr id="other_outer_line" class="outer_label"><td id="other_outer_cell" class="outer_label"><table id="other_table" class="other_label"><tbody><tr id="other_line_23" class="other_label"><td id="other_cell_23_1" class="seq_span label_title_2" colspan="3"><span id="other_span_23_1_1" class="seq_span label_title_2">Other Ingredients</span></td></tr><tr id="other_line_24" class="other_label"><td id="other_cell_24_1" class="seq_span label_ing_2"><span id="other_span_24_1_1" class="seq_span label_ing_2">Purified Water</span><span id="other_span_25_1_1" class="seq_span label_ing_2">, Natural And Artificial Flavors</span><span id="other_span_26_1_1" class="seq_span label_ing_2">, Sucralose</span><span id="other_span_27_1_1" class="seq_span label_ing_2">, Potassium Sorbate</span><span id="other_span_28_1_1" class="seq_span label_ing_2">, Sodium Benzoate</span><span id="other_span_29_1_1" class="seq_span label_ing_2">, EDTA (To Protect Freshness)</span></td></tr></tbody></table></td></tr></tbody></table>', 

 '<table class="outer_label" id="label_outer_table"><tbody><tr class="outer_label" id="facts_outer_line"><td class="outer_label" id="facts_outer_cell"><table class="facts_label" id="facts_table"><tbody><tr class="facts_label" id="facts_line_0"><td class="seq_span label_size" id="facts_cell_0_1"><span class="seq_span label_size" id="facts_span_0_1_1">     12 - 2 Fl. Oz. Bottles</span></td><td class="seq_span label_flavor" id="facts_cell_0_3" colspan="2"><span class="seq_span label_flavor" id="facts_span_0_3_1">Grape</span></td></tr><tr class="facts_label" id="facts_line_1"><td class="seq_span label_title" id="facts_cell_1_1" colspan="3"><span class="seq_span label_title" id="facts_span_1_1_1">Supplement Facts</span></td></tr><tr class="facts_label" id="facts_line_2"><td class="seq_span label_serving" id="facts_cell_2_1" colspan="3"><span class="seq_span label_serving" id="facts_span_2_1_1">Serving Size</span><span class="seq_span_non_first label_serving" id="facts_span_2_1_2">2</span><span class="seq_span_non_first label_serving" id="facts_span_2_1_3">Fl Oz</span></td></tr><tr class="facts_label" id="facts_line_3"><td class="seq_span label_serving" id="facts_cell_3_1" colspan="3"><span class="seq_span label_serving" id="facts_span_3_1_1">Servings Per Container</span><span class="seq_span_non_first label_serving" id="facts_span_3_1_2">12</span></td></tr><tr class="facts_label" id="facts_line_4"><td class="seq_span label_divider medium" id="facts_cell_4_1" colspan="3"></td></tr><tr class="facts_label" id="facts_line_5"><td class="seq_span label_heading_l" id="facts_cell_5_1"><span class="seq_span label_heading_l" id="facts_span_5_1_1">Amount Per Serving</span></td><td class="seq_span label_heading_r" id="facts_cell_5_3" colspan="2"><span class="seq_span label_heading_r" id="facts_span_5_3_1">% Daily Value</span></td></tr><tr class="facts_label" id="facts_line_6"><td class="seq_span label_divider narrow" id="facts_cell_6_1" colspan="3"></td></tr><tr class="facts_label" id="facts_line_7"><td class="seq_span label_ing" id="facts_cell_7_1"><span class="seq_span label_ing" id="facts_span_7_1_1">Calories</span></td><td class="seq_span label_qty" id="facts_cell_7_2"><span class="seq_span label_qty" id="facts_span_7_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_7_2_2">4</span></td><td class="seq_span label_dv" id="facts_cell_7_3"><span class="seq_span label_dv" id="facts_span_7_3_1"></span></td></tr><tr class="facts_label" id="facts_line_8"><td class="line_above seq_span label_ing line_indent" id="facts_cell_8_1"><span class="seq_span label_ing line_indent" id="facts_span_8_1_1">Calories From Fat</span></td><td class="line_above seq_span label_qty" id="facts_cell_8_2"><span class="seq_span label_qty" id="facts_span_8_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_8_2_2">0</span></td><td class="line_above seq_span label_dv" id="facts_cell_8_3"><span class="seq_span label_dv" id="facts_span_8_3_1"></span></td></tr><tr class="facts_label" id="facts_line_9"><td class="line_above seq_span label_ing" id="facts_cell_9_1"><span class="seq_span label_ing" id="facts_span_9_1_1">Niacin (As Niacinamide)</span></td><td class="line_above seq_span label_qty" id="facts_cell_9_2"><span class="seq_span label_qty" id="facts_span_9_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_9_2_2">30</span><span class="seq_span_non_first label_qty" id="facts_span_9_2_3">mg</span></td><td class="line_above seq_span label_dv" id="facts_cell_9_3"><span class="seq_span label_dv" id="facts_span_9_3_1">150%</span></td></tr><tr class="facts_label" id="facts_line_10"><td class="line_above seq_span label_ing" id="facts_cell_10_1"><span class="seq_span label_ing" id="facts_span_10_1_1">Vitamin B6 (As Pyridoxine Hydrochloride)</span></td><td class="line_above seq_span label_qty" id="facts_cell_10_2"><span class="seq_span label_qty" id="facts_span_10_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_10_2_2">40</span><span class="seq_span_non_first label_qty" id="facts_span_10_2_3">mg</span></td><td class="line_above seq_span label_dv" id="facts_cell_10_3"><span class="seq_span label_dv" id="facts_span_10_3_1">2,000%</span></td></tr><tr class="facts_label" id="facts_line_11"><td class="line_above seq_span label_ing" id="facts_cell_11_1"><span class="seq_span label_ing" id="facts_span_11_1_1">Folic Acid</span></td><td class="line_above seq_span label_qty" id="facts_cell_11_2"><span class="seq_span label_qty" id="facts_span_11_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_11_2_2">400</span><span class="seq_span_non_first label_qty" id="facts_span_11_2_3">mcg</span></td><td class="line_above seq_span label_dv" id="facts_cell_11_3"><span class="seq_span label_dv" id="facts_span_11_3_1">100%</span></td></tr><tr class="facts_label" id="facts_line_12"><td class="line_above seq_span label_ing" id="facts_cell_12_1"><span class="seq_span label_ing" id="facts_span_12_1_1">Vitamin B12 (As Cyanocobalamin)</span></td><td class="line_above seq_span label_qty" id="facts_cell_12_2"><span class="seq_span label_qty" id="facts_span_12_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_12_2_2">500</span><span class="seq_span_non_first label_qty" id="facts_span_12_2_3">mcg</span></td><td class="line_above seq_span label_dv" id="facts_cell_12_3"><span class="seq_span label_dv" id="facts_span_12_3_1">8,333%</span></td></tr><tr class="facts_label" id="facts_line_13"><td class="line_above seq_span label_ing" id="facts_cell_13_1"><span class="seq_span label_ing" id="facts_span_13_1_1">Sodium</span></td><td class="line_above seq_span label_qty" id="facts_cell_13_2"><span class="seq_span label_qty" id="facts_span_13_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_13_2_2">18</span><span class="seq_span_non_first label_qty" id="facts_span_13_2_3">mg</span></td><td class="line_above seq_span label_dv" id="facts_cell_13_3"><span class="seq_span label_dv" id="facts_span_13_3_1">&lt;1%</span></td></tr><tr class="facts_label" id="facts_line_14"><td class="line_above seq_span label_divider medium" id="facts_cell_14_1" colspan="3"></td></tr><tr class="facts_label" id="facts_line_15"><td class="seq_span label_ing" id="facts_cell_15_1"><span class="seq_span label_ing" id="facts_span_15_1_1">Energy Blend</span></td><td class="seq_span label_qty" id="facts_cell_15_2"><span class="seq_span label_qty" id="facts_span_15_2_1"></span><span class="seq_span_non_first label_qty" id="facts_span_15_2_2">1870</span><span class="seq_span_non_first label_qty" id="facts_span_15_2_3">mg</span></td><td class="seq_span label_dv" id="facts_cell_15_3"><span class="seq_span label_dv" id="facts_span_15_3_1">†</span></td></tr><tr class="facts_label" id="facts_line_16"><td class="line_above seq_span label_ing line_indent" id="facts_cell_16_1" colspan="3"><span class="seq_span label_ing line_indent" id="facts_span_16_1_1">Taurine, Glucuronolactone, Malic Acid, N-Acetyl L-Tyrosine, L-Phenylalanine, Caffeine, Citicoline</span></td></tr><tr class="facts_label" id="facts_line_17"><td class="seq_span label_divider medium" id="facts_cell_17_1" colspan="3"></td></tr><tr class="facts_label" id="facts_line_18"><td class="seq_span label_notes_sm" id="facts_cell_18_1" colspan="3"><span class="seq_span label_notes_sm" id="facts_span_18_1_1">†† Daily Value not established</span></td></tr></tbody></table></td></tr><tr class="outer_label" id="other_outer_line"><td class="outer_label" id="other_outer_cell"><table class="other_label" id="other_table"><tbody><tr class="other_label" id="other_line_20"><td class="seq_span label_title_2" id="other_cell_20_1" colspan="3"><span class="seq_span label_title_2" id="other_span_20_1_1">Other Ingredients</span></td></tr><tr class="other_label" id="other_line_21"><td class="seq_span label_ing_2" id="other_cell_21_1"><span class="seq_span label_ing_2" id="other_span_21_1_1">Purified Water</span><span class="seq_span label_ing_2" id="other_span_22_1_1">, Natural And Artificial Flavors</span><span class="seq_span label_ing_2" id="other_span_23_1_1">, Sucralose</span><span class="seq_span label_ing_2" id="other_span_24_1_1">, Potassium Sorbate</span><span class="seq_span label_ing_2" id="other_span_25_1_1">, Sodium Benzoate</span><span class="seq_span label_ing_2" id="other_span_26_1_1">, And EDTA (To Protect Freshness)</span></td></tr></tbody></table></td></tr></tbody></table>');

 function changeText(elemid) { 
 var ind = document.getElementById(elemid).selectedIndex; 
 document.getElementById("display").innerHTML=textBlocks[ind]; 
 } 
 </script>

 </head><body>
 <?php $_helper = $this->helper('catalog/output'); ?>
 <?php $_product = Mage::registry('current_product'); ?>
 <?php //echo $_product->getNutrionfacts(); ?>

 <form> 
 <select id="whatever" onChange="changeText('whatever');"> 
 <option value="0">Select</option> 
 <option value="1">One</option> 
 <option value="2">Two</option> 
 </select><br> 
 </form> 

 <div id="display">Select from the list to change this box</div>
1

You'll have to create an extension for this; there's no way Magento will do this out of the box for you.

Create a new extension with a controller that outputs the attribute of a certain product:

class My_Extension_AttributeController extends Mage_Core_Controller_Front_Action
{
    public function nutritionAction()
    {
        $productId = $this->getRequest()->getParam('product');
        $product = Mage::getModel('catalog/product')->load($productId);
        $helper = Mage::helper('catalog/output');
        echo $helper->productAttribute($product, $product->getNutritionfacts(), 'nutritionfacts');
    }
}

Then in the template file make use of Ajax.Updater() to change the contents of your div:

<select id="nutritionSelect">
    <!-- For now I, suppose you know how to populate this one with the value being the product id -->
    <option value="123">Name of first child product</option>
    <option value="124">Name of second child product</option>
    <option value="125">Name of third child product</option>
</select>
<div id="display"></div>

<script type="text/javascript">
    $('whatever').observe('change', function() {
        new Ajax.Updater('display', '<?php echo $this->getUrl('extension/attribute/nutrition'); ?>', {
            product: this.value
        });
    });
</script>

I haven't tested this code, so maybe I forgot some bracket or colon somewhere :)

  • and this will pull the Custom Attributed from the Associated Products of the Configurable product? – Nick Darley Apr 3 '13 at 15:27
  • The controller will pull the 'nutritionfacts' from any requested product. I didn't cover the code for populating the select box on the product view page. Are you having problems with populating the select box? – Mark van der Sanden Apr 5 '13 at 10:36
  • Thank you, but I have figured everything out and will be posting my answer soon. – Nick Darley Apr 5 '13 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.