本帖最后由 jfx 于 2014-4-12 16:01 编辑
8 g7 q, `9 [; m! z
7 s: E3 B2 v" @7 S q d' `以前在Zencart上提问这个问题,刚开始还以为是个Zencart插件,后来才知道这个是修改就可以做到,经过努力,终于做好了,所以分享出来。其实也很简单,首先网站要做成像图一的效果,首先申明的是我们用的是zen-cart1.3.9中文插件版(我想只要是1.3.9的都应该可以)默认模板,根据不同的模板修改不同的文件。 1:打开attributes.php(在includes/modules/classic下面),找到大概595行把zen_draw_pull_down_menu修改为: 0 D2 A! T' G2 F1 g4 S- zen_draw_pull_down_menu_options
复制代码 " I1 L4 o6 |3 |! H/ m2 {( I+ j4 B( m/ k
2 \# A9 Y% V3 Z5 c/ l) j! c0 w
. z! E; D$ x2 j' k8 ~3 _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;
- }
复制代码
+ g% R1 i7 h, R% g7 o& P3 S( [' Z. ~0 D0 Z
; ]6 U8 e& i; Q1 x6 G3:找到tpl_product_info_display.php(在includes/templates/classic/template - <div id="selectsize"></div> <input type="hidden" value="0" id="attrivalues" name="id[1]"/>
复制代码
/ L/ a" h! x5 F( t2 u {. [/ f8 R% b' ^+ W" |
1 t" g# s2 m. ]* V3 X$ T
4:打开stylesheet.css(在includes/templates/classic/css下面),添加如下样式,这个可以根据不同网站进行修改: " T2 M' q1 m* d- s8 K-
- .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;
- }
复制代码 % M+ T$ b) g4 C
( m( ~; O3 m: V
1 f1 m( p4 d4 L, k$ P; ^3 y m t5 y9 \0 r
% M5 [* F2 ?. c8 q/ o. L) ^$ Z; r- C0 G
2 F$ D1 Y( e- k% q5:添加一个jscript_size.js文件,放到includes/templates/classic/jscript文件夹下,代码如下: ! U- z0 e1 L* j$ ] N& u1 G
function AttribUpdate(id)
( q S% y2 T( r# i1 G{document.getElementById('attrivalues').value=id;0 [* \2 w* A$ B$ }8 G9 }
document.getElementById('selectsize').innerHTML=( P4 C. ]2 h; V4 V
"<div class='text'>Your Choice Size: "+document.getElementById('Attrtext'+id).className+"</div>";5 ?' E _4 Y- X1 M1 x/ ]. U5 L* U
for(i=1; i <=(document.getElementById('attrib-1').getElementsByTagName('li').length); i++)5 x- @; G! z/ [( o% M8 n) w
{if(i == id)document.getElementById('attribs'+i).className =7 l7 Q/ A0 A: C9 h# k
"select";
0 l: j9 |" v/ r) Belsedocument.getElementById('attribs'+i).className =
2 y+ Y! z/ r3 @* W"selectAttr";}}
8 Z. p& y8 c8 O. b; V) m5 b
: A, t4 P3 q! j% | 3 }- g$ c( d3 ~3 z5 R' z# R" ~! p) _8 W& X2 a; {$ A1 R- |
p* S& v5 `/ d7 _
+ `: c% J3 E/ B4 r- m
这样算是完成了,看下效果图:$ C8 g0 w+ K7 u
2 G/ Z. K8 Y4 e* L5 j
参考:http://www.51qcweb.com/zencart-size-changes-to-the-table.html |