私はeコマースWebサイトに取り組んでいます。各製品の栄養成分を表示していますが、ほとんどの製品は構成可能な製品であり、これらの製品にはさまざまなフレーバーがあります. フレーバーが異なるため、成分が異なり、パーセンテージもわずかに異なります。
フロントエンドに表示されるカスタム属性を作成し、構成可能な製品に配置すると表示されますが、単純な製品ごとに異なるラベルを配置し、ドロップダウンを作成してフレーバーを交換したい (同じ)属性を選択するためのドロップダウンのタイプ)。ドロップダウンの設定があり、必要なテキストを置き換えます。助けが必要なのは、そのドロップダウンと配列にカスタム属性値を動的に入力することです。
私がセットアップしたこのテスト製品を見てください。静的ブロックを介してサイドバーに栄養の事実があり、セットアップしたphpファイルを指しています。http://hyperionsupps.com/test/index.php/red-bull2.html
静的ブロックのコード
Nutritional Facts
{{block type="core/template" name="nutritionalfacts" template="nutritionalfacts.phtml"}}
サイドバーコード(現在、栄養表で配列をハードコーディングしています)
<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"><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"><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>