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

}