$7.49 .com domain with free InstantPage Website Builder$1.99 Web Hosting   捷飞网络官方淘宝店   Godaddy 优惠码
返回列表 发帖
分享到:




[开发经验技巧分享] 分享zen-cart 产品页尺码表选择修改为链接形式

本帖最后由 jfx 于 2014-4-12 16:01 编辑 $ j- x+ f7 A  p5 I7 h( _

# R+ d1 w% L$ |7 T2 ^$ E4 O( l. b

以前在Zencart上提问这个问题,刚开始还以为是个Zencart插件,后来才知道这个是修改就可以做到,经过努力,终于做好了,所以分享出来。其实也很简单,首先网站要做成像图一的效果,首先申明的是我们用的是zen-cart1.3.9中文插件版(我想只要是1.3.9的都应该可以)默认模板,根据不同的模板修改不同的文件。

1:打开attributes.php(在includes/modules/classic下面),找到大概595行把zen_draw_pull_down_menu修改为:

, I0 z5 b  p6 k) _

  1. zen_draw_pull_down_menu_options
复制代码

  n  J3 l# q7 ]/ `4 l/ H$ A

( [( V& F% V; [2 Y7 X  W
7 |* Q6 g1 g/ l! K; P+ z; ~
- O. ^: t: S# `+ d4 `' I

2:打开html_output.php(在includes/functions下面),找到大概533行 ,在下面添加如下一个函数:

  1. function zen_draw_pull_down_menu_options($name, $values, $default = '',
  2.   $parameters = '', $required = false) {
  3.     $field = '<ul name="' . zen_output_string($name) . '"';
  4.     if (zen_not_null($parameters)) $field .= ' ' . $parameters;$field .= '>' . "\n";
  5.     if (empty($default) && isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) )
  6. $default = stripslashes($GLOBALS[$name]);
  7.     for ($i=0, $n=sizeof($values); $i<$n; $i++) {
  8. $field .= ' <li id="attribs' . zen_output_string($values[$i]['id']) . '"
  9. onclick="AttribUpdate(' . zen_output_string($values[$i]['id']) . ')"';
  10. if ($default == $values[$i]['id']) {
  11.         $field .= ' selected="selected"';
  12.       }
  13.    $field .= '><span id="Attrtext' . zen_output_string($values[$i]['id']) . '"' =>
  14.    '&quot;', '\'' => ''', '<' => '&lt;', '>' => '&gt;')) . '">
  15.    ' . zen_output_string($values[$i]['text'],
  16.    array('"' => '&quot;', '\'' => ''', '<' => '&lt;', '>' => '&gt;')) . '</span>'. "\n";
  17.     }
  18.     $field .= '</ul>' . "\n";
  19.     if ($required == true) $field .= TEXT_FIELD_REQUIRED;
  20.     return $field;
  21.   }
复制代码

/ ^# N9 \$ P$ l4 E

8 Z- ^2 `. s) [; D( p7 O9 k" a1 c9 z) }5 O2 C2 q" W$ Z5 r0 @

3:找到tpl_product_info_display.php(在includes/templates/classic/template

  1. <div id="selectsize"></div> <input type="hidden" value="0" id="attrivalues" name="id[1]"/>
复制代码

2 n; A+ z( f! ]0 p0 o  }+ g) }

/ m. w! m3 T$ \; Q8 r  H
  f& A! p7 I3 T+ s1 O9 C

4:打开stylesheet.css(在includes/templates/classic/css下面),添加如下样式,这个可以根据不同网站进行修改:

* ?' O4 ~* R& R$ f) _/ b


  1. .back ul li {
  2. float: left;
  3. line-height: 20px;
  4. margin: 0 4px 4px 1px;
  5. min-width: 22px;
  6. padding: 1px;
  7. position: relative;
  8. vertical-align: middle;
  9. list-style:none;}
  10. .back ul li span {
  11. display:block;padding:3px;}
  12. .back ul li.selectAttr {
  13. background-color: #FFFFFF;
  14. border: 1px solid #CCCCCC;
  15. cursor: pointer;}
  16. .back ul li.selectAttr:hover {
  17. background-color: #FF6600;
  18. border: 1px solid #FFA500;}
  19. .back ul li.select {
  20. background-color: #FFA500;
  21. }
复制代码


. [" {/ a+ G3 Q( \% k3 O7 q

/ ^8 [/ m1 o4 U8 C
# ^! H6 D$ @3 r3 @/ J

) Y+ @$ ]/ K* G7 \" t% R8 H; {
! T3 }8 ?' ?+ Q" p
& w. o: [- g8 p: D2 m: H
) Q1 ^" V1 A; T  Z: u9 w0 G

5:添加一个jscript_size.js文件,放到includes/templates/classic/jscript文件夹下,代码如下:

3 J- S2 z+ p0 A0 E. a

function AttribUpdate(id)( L+ e) |/ J, v% f  J6 h  L' |
{document.getElementById('attrivalues').value=id;
, Q  d3 R. c9 T# y2 T' W. ]document.getElementById('selectsize').innerHTML=
; \0 p# `' l' z# B! t3 r/ B; C"<div class='text'>Your Choice Size: "+document.getElementById('Attrtext'+id).className+"</div>";) B$ V* B# n3 E, U3 Y
for(i=1; i <=(document.getElementById('attrib-1').getElementsByTagName('li').length); i++)4 U: b/ b1 J) T. d3 a
{if(i == id)document.getElementById('attribs'+i).className =3 m4 `& q' x, @" e
"select";

7 F; U; F1 `2 E9 L+ M; [3 e: p# _elsedocument.getElementById('attribs'+i).className =2 g$ Y1 s: @0 M4 m; J/ j) t
"selectAttr";}}
( c& Q* \- [- D. f
$ U; m) n, Y+ d

' w# v3 l" R& R$ }" M! G; x

, \& H0 B" L& n  l9 ^6 K% D
5 e. R& J- d* g+ C% r' k) I8 D; ~5 g0 G4 b+ m1 u

这样算是完成了,看下效果图:
9 f! e% A  B. X

# k7 F7 m7 K" Q; g6 _! G

参考:http://www.51qcweb.com/zencart-size-changes-to-the-table.html

美国VPS、域名代购:http://tu8l.taobao.com

返回列表
Namecheap
Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting
互联网安全