本帖最后由 jfx 于 2014-4-12 16:01 编辑
$ U- H4 l: C7 [9 ~& l" D, w- q' r: k" H5 x, z6 }) g F# m3 Z
以前在Zencart上提问这个问题,刚开始还以为是个Zencart插件,后来才知道这个是修改就可以做到,经过努力,终于做好了,所以分享出来。其实也很简单,首先网站要做成像图一的效果,首先申明的是我们用的是zen-cart1.3.9中文插件版(我想只要是1.3.9的都应该可以)默认模板,根据不同的模板修改不同的文件。 1:打开attributes.php(在includes/modules/classic下面),找到大概595行把zen_draw_pull_down_menu修改为: 9 i0 ^8 z; Y' S" V1 z) O5 C l! r- zen_draw_pull_down_menu_options
复制代码
- h& Z/ x3 ~( e& F* C! |: q$ E9 w3 j- Z! [& q2 u }
! s4 j9 z" K2 c7 {' k- J; a# |1 Y
1 G" u# [( @9 n
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;
- }
复制代码
+ | ]' `7 ]" D
9 G( H8 P- k2 b& H6 h
\2 M" k9 n l6 n3:找到tpl_product_info_display.php(在includes/templates/classic/template - <div id="selectsize"></div> <input type="hidden" value="0" id="attrivalues" name="id[1]"/>
复制代码
* }6 C& X$ ?, N$ e) D' y0 z4 _; k
f) T# V0 G9 _0 J& K4 R+ r% Q1 w+ K- Z9 x' H& k
4:打开stylesheet.css(在includes/templates/classic/css下面),添加如下样式,这个可以根据不同网站进行修改: 6 o- L5 c/ p1 G. u5 h; i) p; u-
- .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;
- }
复制代码 7 T. _& `* P' _: i$ w x
: ^9 T# q& R! t+ e- u! s
" e3 R: e3 U7 [# g9 d1 h1 M6 x6 a1 _9 l1 z5 E q4 e0 y9 f$ u2 I/ M' }2 o" `
( X% I0 w d7 b0 G$ s" i/ @3 G& r. R- W
5:添加一个jscript_size.js文件,放到includes/templates/classic/jscript文件夹下,代码如下: $ @( @1 b2 B4 v0 ]function AttribUpdate(id)
& b E t+ y6 [3 G{document.getElementById('attrivalues').value=id;
; T8 K$ k. @7 Z0 F; x% rdocument.getElementById('selectsize').innerHTML=: V# P9 d% u, g( b" L
"<div class='text'>Your Choice Size: "+document.getElementById('Attrtext'+id).className+"</div>";% E$ E* C7 {/ D- S
for(i=1; i <=(document.getElementById('attrib-1').getElementsByTagName('li').length); i++). I& A0 y' r- \
{if(i == id)document.getElementById('attribs'+i).className =
/ R! G- L& v- C [9 j; f"select";7 e3 }6 @2 f1 s2 {
elsedocument.getElementById('attribs'+i).className =, u, j4 S& l0 W# h ?1 k# v& U
"selectAttr";}}5 b$ ?& s; N* W: K. P
( U$ J/ x, ?8 q; d( ^
- l9 g3 w; r" P0 c9 I( N* K' ~9 @( @$ u" F2 V
4 E( e8 R* M- W) d
# }$ Q( R2 o$ A7 ?0 d5 x& j4 n2 |8 Q
这样算是完成了,看下效果图:
. z* w9 r$ t( J& M$ s) K4 T
) T, m) a9 P% `3 g参考:http://www.51qcweb.com/zencart-size-changes-to-the-table.html |