服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > zencart教程 >

ZenCart产品页下拉尺码改为文本单击选择方式

时间:2016-04-15 14:20来源: 作者: 点击:
ZenCart产品页下拉尺码改为文本单击选择方式,相信很多做服装,鞋类B2c网站比较喜欢这种方式。 下面就直奔主题吧 1:打开attributes.php(在includes/modules/模板名/下面,如果没有就去include

ZenCart 产品页下拉尺码改为文本单击选择方式,相信很多做服装,鞋类B2c网站比较喜欢这种方式。
下面就直奔主题吧

1:打开attributes.php(在includes/modules/模板名/下面,如果没有就去includes/modules下复制一个过来),找到大概595行把zen_draw_pull_down_menu修改为

zen_draw_pull_down_menu_options

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']) . '"' =>
   '&quot;', '\'' => '&#039;', '<' => '&lt;', '>' => '&gt;')) . '">
   ' . zen_output_string($values[$i]['text'],
   array('"' => '&quot;', '\'' => '&#039;', '<' => '&lt;', '>' => '&gt;')) . '</span>'. "\n";
    }
    $field .= '</ul>' . "\n";
    if ($required == true) $field .= TEXT_FIELD_REQUIRED;
    return $field;
  }

3:找到tpl_product_info_display.php(在includes/templates/模板名/templates下面),打开以后找到129行,添加如下代码

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

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

.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;
}

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

function AttribUpdate(id)
{document.getElementById('attrivalues').value=id;
document.getElementById('selectsize').innerHTML=
"<div class='text'>Your Choice Size: "+document.getElementById('Attrtext'+id).className+"</div>";
for(i=1; i <=(document.getElementById('attrib-1').getElementsByTagName('li').length); i++)
{if(i == id)document.getElementById('attribs'+i).className = "select";
elsedocument.getElementById('attribs'+i).className = "selectAttr";}}

完成了,看看下面的效果图吧

2013092694352984

排版布局div+css样式可以根据自己网站的情况进行修改的,试试吧,看是不是成功啦。

(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容