首页 » ZenCart » ZenCart教程 » 阅读文章

Zen Cart下拉尺码表的修改

2011-11-22 17:29 177762 30 发表评论

标签：Zen Cart插件，Zen Cart教程

Zen Cart我们一般用下拉框属性来做size属性

但有很多网站都是用一种全部展示的效果来给客户做选择

下面来教大家怎样实现上图的效果，在Zen Cart里是使用zen_draw_pull_down_menu函数来实现下拉框的，由于这个函数Zen Cart在其他地方还有用到，所以我们自己做一个全部展示的自定义函数

在includes\functions\html_output.php里,在原zen_draw_pull_down_menu函数下面添加（大约513行）

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

然后将输出产品属性下拉框的函数改下，在includes\modules\attributes.php中（大约596行）将zen_draw_pull_down_menu改为zen_draw_pull_down_menu_options

改下显示的样式，在css中添加

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    }

到此就可以看到属性值全部展示的效果，要实现选择的效果还需要js辅助

includes\templates\template_default\templates\tpl_product_info_display.php，在将原来的属性调用

1<?php
2/**
3 * display the product atributes
4 */
5  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
6<?php
7  }
8?>

修改为

1<!--bof Attributes Module -->
2<div id="selectsize"></div>
3<input type="hidden"  value="0" id="attrivalues" name="id[1]"/>
4<?php
5  if ($pr_attr->fields['total'] > 0) {
6?>
7<?php
8  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
9<?php
10  }
11?>
12<script type="text/javascript">
13function AttribUpdate(id){
14    document.getElementById('attrivalues').value=id;
15    document.getElementById('selectsize').innerHTML= "<div class='text'>Your Choice Size: "+document.getElementById('Attrtext'+id).className+"</div>";
16    for(i=1; i <=(document.getElementById('attrib-1').getElementsByTagName('li').length); i++) {
17    if(i == id)
18    document.getElementById('attribs'+i).className = "select";
19    else
20    document.getElementById('attribs'+i).className = "selectAttr";}
21    }
22</script>
23<!--eof Attributes Module -->

附修改样本下载地址：

zencart下拉属性修改.rar (1.5 KB, 732 次)

转载：http://www.fuyahui.com/post/wlbc/Zen-cart-ChiMaBiaoDeXiuGai.html

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -2011-12-10修正 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

由于每个网站中对于的size的id和value值都不相同，所以导致购物车页面中没有属性显示的bug

后台-->Catalog-->Option Name Manager查找size的id

如上图示例中size的id值为2,所以修改includes\templates\template_default\templates\tpl_product_info_display.php添加部分

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

将name中的id值改为2,即

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

后台-->Catalog-->Option Value Manager查找size的value对于的id最大值和最小值

如上图示例中最大值为37，最小值为18，所以修改includes\templates\template_default\templates\tpl_product_info_display.php添加部分

`1`	`for(i=1; i <=(document.getElementById('attrib-1').getElementsByTagName('li').length); i++)`

将for循环改为对应的最大值和最小值，即示例中改为

`1`	`for(i=18; i <=37; i++)`

将

`1`	`document.getElementById('attribs'+i).className =` `"selectAttr";`

改为

1if(document.getElementById('attribs'+i)){
2    document.getElementById('attribs'+i).className = "selectAttr";
3}

声明: 本文由Ezencart原创,转载请保留链接:Zen Cart下拉尺码表的修改

本文链接地址: http://www.ezencart.com/pages/574.html

评论共30条 (RSS 2.0) 发表评论

jerron 说道：

2011/12/09 21:31

你好，十分感谢你的插件！我是1.39 安装成功！
但是有个小问题，就是选择属性购买后，在购物车页面所购商品的属性不显示了。安装插件之前是显示的。现在只有 -

回复
- E-zencart 说道：
  
  2011/12/10 10:57
  
  已修正
  
  回复
  - jerron 说道：
    
    2011/12/10 11:20
    
    太感谢啦。
    
    回复
swming6 说道：

2012/01/09 11:25

你好，你这个插件很不错，但有个小问题想咨询下，就是顾客没选择尺码，而是直接购买，但系统不会提示，请问要怎么解决？谢谢

回复
- E-zencart 说道：
  
  2012/01/09 12:11
  
  js判断下
  查看源代码
  打印帮助
  1 <div id="selectsize"></div>
  
  中内容为空时，返回false，并弹出警告框或者其他提示内容
  
  回复
  - swming6 说道：
    
    2012/01/09 14:38
    
    非常感谢你的回复，不过你能帮忙写下全部的代码吗？程序方面我是菜鸟
    
    回复
  - john 说道：
    
    2012/03/29 17:00
    
    请问js判断代码怎么写，找了很多资料，弄了半天还是无法实现
    
    回复
    - E-zencart 说道：
      
      2012/03/29 20:33
      
      javascript中最基本的判断了
      
      查看源代码
      打印帮助
      1 function check(){
      2 if(document.getElementById('selectsize').value=''){
      3 document.getElementById('selectsize').innerHTML='please selcet size';
      4 return false;
      5 }
      
      然后form表单中增加onsubmit=”return check()”
      
      回复
      - elias 说道：
        
        2012/06/07 23:22
        
        onsubmit=”return check()”,这个加在哪里，我发现form是调用函数的，
        
        回复
        
        ezencart 说道：
        
        2012/06/10 14:19
        
        查看源代码
        打印帮助
        1 enctype="multipart/form-data"
        
        后面
        
        回复
        
        ly 说道：
        
        2013/01/28 22:24
        
        enctype=”multipart/form-data”
        这句在哪个文件里？
        能否实现颜色、尺码同时显示这样的样式？
        点击后能否像淘宝一样有打钩？
        
        回复
      - 阿魔说道：
        
        2013/03/21 12:08
        
        我按照你那样做了,但点击add to cart后还是没弹出那个JS,我想add to cart不是一个submit吧
        
        回复
hello 说道：

2012/02/21 17:29

您好！按步骤来是设置成功了。可是如果多加一个型号或是一个颜色，只能选择一个。选其它都会替换掉，不知道这个要怎么解决。

回复
- E-zencart 说道：
  
  2012/02/21 20:24
  
  js部分修改下就OK了，默认的id=selectsize区域是选择最后一次点击获取的内容
  
  回复
elias 说道：

2012/06/05 19:22

我安装了之后，与Ultimate SEO URLs冲突，无法静态化，静态化后，无法添加购物车，使用的zencart 1.5的，英文版

回复
- E-zencart 说道：
  
  2012/06/05 22:52
  
  zencart 1.5，要用Ultimate SEO URLs 对应的1.5版插件，下拉框的修改对伪静态是没有影响的
  
  回复
  - 英文SEO 说道：
    
    2012/06/10 23:51
    
    我没有按照你的去修改，但也出现了冲突问题，冲突问题出在1.5版本伪静态插件添加在HTML_OUT.php中的代码上，研究了很久没研究出来，希望帮忙研究一下这段代码的问题在哪里
    
    查看源代码
    打印帮助
    1 Locate:
    2
    3     function zen_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true, $static = false, $use_dir_ws_catalog = true) {
    4
    5 Replace with:
    6
    7     function zen_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true, $static = false, $use_dir_ws_catalog = true) {
    8
    9         /* QUICK AND DIRTY WAY TO DISABLE REDIRECTS ON PAGES WHEN SEO_URLS_ONLY_IN is enabled IMAGINADW.COM */
    10         $sefu = explode(",", preg_replace( '/ +/', '', SEO_URLS_ONLY_IN ));
    11         if((SEO_URLS_ONLY_IN!="") && !in_array($page,$sefu)) {
    12             return original_zen_href_link($page, $parameters, $connection, $add_session_id, $search_engine_safe, $static, $use_dir_ws_catalog);
    13         }
    14
    15         if (!isset($GLOBALS['seo_urls']) && !is_object($GLOBALS['seo_urls'])) {
    16             include_once(DIR_WS_CLASSES . 'seo.url.php');
    17
    18             $GLOBALS['seo_urls'] = &new SEO_URL($_SESSION['languages_id']);
    19         }
    20
    21         return $GLOBALS['seo_urls']->href_link($page, $parameters, $connection, $add_session_id, $static, $use_dir_ws_catalog);
    22     }
    23
    24     /*
    25      * The HTML href link wrapper function
    26      */
    27     function original_zen_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true, $static = false, $use_dir_ws_catalog = true) {
    
    回复
    - E-zencart 说道：
      
      2012/06/11 14:07
      
      1.5版是不冲突的，1.5版里的尺码表修改我自己就在用，includes\functions\html_output.php里添加的内容你可以放在html_output.php，可以单独建立一个文件存储，将文件放在includes\functions\extra_functions下
      
      回复
Lili 说道：

2012/08/03 15:54

可以有办法实现像这个网页这样的吗？

回复
Lili 说道：

2012/08/03 15:55

http://www.cheapjerseysonline.us/chicago-blackhawks-21-stan-mikita-stitched-black-new-third-jerseys-p-3031.html

回复
- E-zencart 说道：
  
  2012/08/03 18:55
  
  属性分栏模块 Product Attribute Grid可以解决
  
  回复
  - Lili 说道：
    
    2012/08/04 10:20
    
    能不能给给具体步骤之类的我下了Product Attribute Grid ，但是也不会用，不懂怎么去实现那样每个尺码下有个数量框框。
    
    回复
    - sss 说道：
      
      2021/07/22 14:44
      
      css要在哪里添加
      
      回复
joy 说道：

2012/08/12 23:54

如果有两个size 只显示一个size 改怎么解决！

回复
- E-zencart 说道：
  
  2012/08/13 16:08
  
  你是想一个点击显示，一个下拉？
  
  回复
我想知道说道：

2012/12/11 16:36

我想知道为什么li可以提交原来的zencart用select当你有$_post可以接受数据但是li可以接收数据吗

回复
- ezencart 说道：
  
  2012/12/14 00:21
  
  查看源代码
  打印帮助
  1 <input type="hidden" value="0" id="attrivalues" name="id[1]"/>
  
  隐藏表单上传
  
  回复
eric 说道：

2013/01/14 23:29

如果写成插件就完美了增加属性名称时直接定义显示方式这样就不用后面去修改SIZE的ID了

回复
广州大道说道：

2014/07/08 01:14

怎么会出现乱码啊

回复
lvbag 说道：

2014/07/08 01:15

先谢谢了，按照步骤试下

回复

E-zencart，一起进步

首页 » ZenCart » ZenCart教程 » 阅读文章

Zen Cart下拉尺码表的修改

评论共30条 (RSS 2.0) 发表评论

发表评论

联系我 Contact Me

标签云 Tag Cloud 更多...

E-zencart，一起进步

首页 » ZenCart » ZenCart教程 » 阅读文章

Zen Cart下拉尺码表的修改

评论 共30条 (RSS 2.0) 发表评论

发表评论

联系我 Contact Me

标签云 Tag Cloud 更多...

评论共30条 (RSS 2.0) 发表评论