ecshop商品页商品属性分类选择的制作教程

ecshop商品页商品属性分类选择的制作教程 - html

来源：自学PHP网时间：2015-04-14 14:50 作者：阅读:次

[导读] 这两天用ecshop制作一个商城站时想把里面的商品属性值做成很多大商城常见的可选择分类那种，搜了不少没有提供这方面教程的，找到的也不能使用。有的都是作为插件卖的，竟然没人...

这两天用ecshop制作一个商城站时想把里面的商品属性值做成很多大商城常见的可选择分类那种，搜了不少没有提供这方面教程的，找到的也不能使用。有的都是作为插件卖的，竟然没人分享出来，自己研究了下搞定了，决定在红黑联盟免费分享给每位遇到同样问题的朋友，希望能帮助到你。

修改步骤：

1、将下面这个图片上传到 themes/您当前模板/images文件夹里面，这里我命名为test.gif。如果你自己改为其他文件名，那么在下面的修改中就要保持一致。

2、找到 themes/您当前模板/goods.dwt文件，做如下修改：

找到下面这段代码：

<li class="padd loop">
      <strong>{$spec.name}:</strong><br />
        
                    
                      
                        
                        <label for="spec_value_{$value.id}">
                        <input type="radio" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" {if $key eq 0}checked{/if} onclick="changePrice()" />
                        {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
                        
                        <input type="hidden" name="spec_list" value="{$key}" />
                        
                        <select name="spec_{$spec_key}" onchange="changePrice()">
                          
                          <option label="{$value.label}" value="{$value.id}">{$value.label} {if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option>
                          
                        </select>
                        <input type="hidden" name="spec_list" value="{$key}" />
                      
                    
                      
                      <label for="spec_value_{$value.id}">
                      <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />
                      {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
                      
                      <input type="hidden" name="spec_list" value="{$key}" />
                    
      </li>

将上面这段代码替换为以下代码：

<li style="border:1px solid #FBD2D2; float:left; width:315px; margin-left:5px; background:#FCF0F0; padding:10px;">
      
      {$spec.name}：
     <div class="catt">
        
        
        
        
        <a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this)" href="javaｓｃｒｉｐｔ:;" name="{$value.id}" title="{$value.label}">{$value.label}
        <input style="display:none" id="spec_value_{$value.id}" type="radio" name="spec_{$spec_key}" value="{$value.id}" {if $key eq 0}checked{/if} /></a>
        
        <input type="hidden" name="spec_list" value="{$key}" />
        
        <select name="spec_{$spec_key}">
        
        <option label="{$value.label}" value="{$value.id}">{$value.label} {if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option>
        
        </select>
        <input type="hidden" name="spec_list" value="{$key}" />
        
        
        
        <label for="spec_value_{$value.id}">
        <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />
        {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label>
        <br />
        
        <input type="hidden" name="spec_list" value="{$key}" />
        
</div>
      
      </li>

再找到下面这段代码：

/**
* 接收返回的信息
*/
function changePriceResponse(res)
{
if (res.err_msg.length > 0)
{
alert(res.err_msg);
}
else
{
document.forms['ECS_FORMBUY'].elements['number'].value = res.qty;

if (document.getElementById('ECS_GOODS_AMOUNT'))
document.getElementById('ECS_GOODS_AMOUNT').innerHTML = res.result;
}
}

在上面这段代码下增加以下代码：

/**
* 颜色选择器
*/
function changeAtt(t) {
t.lastChild.checked='checked';
for (var i = 0; i<t.parentNode.childNodes.length;i++) {
        if (t.parentNode.childNodes[i].className == 'cattsel') {
            t.parentNode.childNodes[i].className = '';
        }
    }
t.className = "cattsel";
changePrice();
}

3、打开themes/您当前模板/style.css，将下面的代码增加到最后（如果您的模板调用的css文件不是style.css，那么将下面的代码加到您调用的那个css文件里面去）：

/*--------------颜色选择器CSS添加-------------*/
#goodsInfo .catt {width:100%;height:auto;overflow:hidden;padding-bottom:5px;}
#goodsInfo .catt a {border: #c8c9cd 1px solid;text-align: center;background-color: #fff;margin-right:5px;margin-top:6px;padding-left: 10px;padding-right: 10px;display: block;white-space: nowrap;color: #666;text-decoration: none;float:left;}
#goodsInfo .catt a:hover {border:#ff6701 2px solid;margin: -1px;margin-right:4px;margin-top:5px;}
#goodsInfo .catt a:focus {outline-style:none;}
#goodsInfo .catt .cattsel {border:#ff6701 2px solid;margin: -1px;background: url(images/test.gif) no-repeat bottom right;margin-right:4px;margin-top:5px;}
#goodsInfo .catt .cattsel a:hover {border: #ff6701 2px solid;margin:-1px;background: url(images/test.gif) no-repeat bottom right;}
/**/

　　好了，更新完毕!然后再说说属性的添加方法：

　　1、在后台商品管理下的商品类型里面，先添加您的一个商品类型，比如包包，然后给这个类型添加可能出现的所有属性，比如，颜色和尺寸(需要客户购买时候选择的属性，添加的时候要选择单选属性，然后值选择从列表里面选择)，然后把所以可能用到的颜色和尺寸添加到列表里面。

　　2、添加或者编辑商品，在商品属性一栏里面选择包包这个类型，然后在根据这个商品的属性，点击颜色和尺寸前面的加号，该商品有几个属性，就新建几个，然后在下拉框里面选择这个商品拥有的属性即可。

　　说明：因为每个模板的布局和样式不一样，安装好后，如果样式和您的不是很协调，请自行根据您的模板更改样式。本文由郑州网络公司http://www.xw0371.com旭网科技首发于红黑联盟站长网，转载请保留此链接

KindEdito使用细节 - html/css语言栏目：html.css - 自学

div 添加滚动条 - html/css语言栏目：html.css - 自学

子栏目

ecshop商品页商品属性分类选择的制作教程 - html

最新评论

添加评论

更多文章推荐

添加评论