付亞輝：Zen-cart下拉尺碼錶的修改

   以前在zen-cart上提問這個問題，剛開始還以爲是個插件，後來才知道這個是別人修改就可以做到，經過半天的努力，今天終於做好了，所以分享出來。其實也很簡單，不過js我有點弱，所以有點喫力。
        首先網站要做成像圖一的效果，首先申明的是我用的是zen-cart1.3.9中文插件版（我想只要是1.3.9的都應該可以）默認模板，根據不同的模板修改不同的文件。

然後就開始修改了，
1：打開attributes.php（在includes/modules/classic下面），找到大概595行把zen_draw_pull_down_menu修改爲zen_draw_pull_down_menu_options
2：打開html_output.php（在includes/functions下面），找到大概533行 ，在下面添加如下一個函數

/*
 *  Output a form pull down menu_options
 *  by    www.fuyahui.com
 */
  function zen_draw_pull_down_menu_options($name, $values, $default = '', $parameters = '', $required = false) {
    $field = '<ul name="' . zen_output_string($name) . '"';

    if (zen_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= '>' . "\n";

    if (empty($default) && isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) ) $default = stripslashes($GLOBALS[$name]);

    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
     // $field .= '  <option value="' . zen_output_string($values[$i]['id']) . '"';
   $field .= ' <li class="selectAttr" id="attribs' . zen_output_string($values[$i]['id']) . '" οnclick="AttribUpdate(' . zen_output_string($values[$i]['id']) . ')"';
      if ($default == $values[$i]['id']) {
        $field .= ' selected="selected"';
      }

     // $field .= '>' . zen_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</li>' . "\n";
   $field .= '><span id="Attrtext' . zen_output_string($values[$i]['id']) . '" class="' . zen_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '">' . zen_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</span>'. "\n";
    }
    $field .= '</ul>' . "\n";

    if ($required == true) $field .= TEXT_FIELD_REQUIRED;

    return $field;
  }

3：找到tpl_product_info_display.php（在includes/templates/classic/templates下面），打開以後找到129行，添加如下代碼

<div id="selectsize"></div>  
<input type="hidden"  value="0" id="attrivalues" name="id[1]"/>  

4：打開stylesheet.css（在includes/templates/classic/css下面），添加如下樣式，這個可以根據不同網站進行修改

.back ul li {
float: left;
line-height: 20px;
margin: 0 4px 4px 1px;
min-width: 22px;
padding: 1px;
position: relative;
vertical-align: middle;
list-style:none;}
.back ul li span {
display:block;padding:3px;}
.back ul li.selectAttr {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
cursor: pointer;}
.back ul li.selectAttr:hover {
background-color: #FF6600;
border: 1px solid #FFA500;}
.back ul li.select {
background-color: #FFA500;
}

5：添加一個jscript_size.js文件，放到includes/templates/classic/jscript文件夾下，代碼如下

function AttribUpdate(id)
{document.getElementById('attrivalues').value=id;
document.getElementById('selectsize').innerHTML=
"<div class='text'>Your Choice Size: "+document.getElementById('Attrtext'+id).className+"</div>";
for(i=1; i <=(document.getElementById('attrib-1').getElementsByTagName('li').length); i++)
{if(i == id)document.getElementById('attribs'+i).className = "select";
elsedocument.getElementById('attribs'+i).className = "selectAttr";}}

OK.，就這樣算是完成了，看下我做的效果圖 圖2所示

以上css可以根據自己網站的情況進行修改的。

付亞輝個人博客，原文鏈接http://www.fuyahui.com/post/wlbc/Zen-cart-ChiMaBiaoDeXiuGai.html