ZenCart 产品页下拉尺码改为文本单击选择方式,相信很多做服装,鞋类B2c网站比较喜欢这种方式。 1:打开attributes.php(在includes/modules/模板名/下面,如果没有就去includes/modules下复制一个过来),找到大概595行把zen_draw_pull_down_menu修改为 zen_draw_pull_down_menu_options 2:打开html_output.php(在includes/functions下面),找到大概533行 ,在下面添加如下一个函数 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 .= ' <li id="attribs' . zen_output_string($values[$i]['id']) . '" onclick="AttribUpdate(' . zen_output_string($values[$i]['id']) . ')"'; if ($default == $values[$i]['id']) { $field .= ' selected="selected"'; } $field .= '><span id="Attrtext' . zen_output_string($values[$i]['id']) . '"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '"> ' . 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/模板名/templates下面),打开以后找到129行,添加如下代码 <div id="selectsize"></div> <input type="hidden" value="0" id="attrivalues" name="id[1]"/> 4:打开stylesheet.css(在includes/templates/模板名/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/模板名/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";}} 完成了,看看下面的效果图吧
排版布局div+css样式可以根据自己网站的情况进行修改的,试试吧,看是不是成功啦。 (责任编辑:最模板) |