Zen Cart下拉size属性改成全部展示的效果

 

 

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

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

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

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

1 function 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">
13 function 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 -->

- – - – - – - – - – - – - – - – - – - – - – - – - – - – -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";

改为

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