商品颜色属性选择2.7

在GOODS.DWT加入JS代码。

function getSelectedAttr(a, b, c) {
    var d = new Array();
        var j = 0;
        for (k = 0; k < a.elements.length; k++) {
            a.elements[k].checked = false
        }
        for (i = 0; i < a.elements.length; i++) {
            var f = a.elements.name.substr(0, 5);
            if (a.elements.value == c) {
                if (a.elements.checked == false) {
                    a.elements.checked = true
                }
            }
            if (f == 'spec_' && (((a.elements.type == 'radio' || a.elements.type == 'checkbox') && a.elements.checked) || a.elements.tagName == 'SELECT')) {
                d[j] = a.elements.value;
                j++
            }
        }
        return d

}
function changeP(a, b, c) {
    var d = getSelectedAttr(document.forms['ECS_FORMBUY'], b, c);
    var e = document.forms['ECS_FORMBUY'].elements['number'].value;
    for (var i = 0; i < a.parentNode.childNodes.length; i++) {
        if (a.parentNode.childNodes.className == 'selected') {
            a.parentNode.childNodes.className = ''
        }
    }
    a.className = "selected";
    Ajax.call('goods.php', 'act=price&id=' + goodsId + '&attr=' + d + '&number=' + e, changePriceResponse, 'GET', 'JSON')
}

再修改按钮

<a onclick="changeP(this,'spec_{$spec_key}',{$value.id})"  name={$value.id} title="[{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}]">{$value.label}
<input type="radio" style="display:none" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}"   /></a>

再加入CSS..

/*颜色选择*/
.key LI {
        POSITION: relative; PADDING-BOTTOM: 1px; LINE-HEIGHT: 30px; BACKGROUND-COLOR: #fff; MARGIN: 0px 4px 4px 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; FLOAT: left; VERTICAL-ALIGN: middle; PADDING-TOP: 1px;
}
.key LI A {
          BORDER: #c8c9cd 1px solid;  TEXT-ALIGN: center; BACKGROUND-COLOR: #fff; margin-left:5px;margin-top:6pxADDING-LEFT: 10pxADDING-RIGHT: 10px;DISPLAY: block; WHITE-SPACE: nowrap; COLOR: #000; TEXT-DECORATION: none; FLOAT: left;
}
.key LI A:hover {
        BORDER: #ff6701 2px solid; MARGIN: -1px; margin-left:4px;margin-top:5px;
}
.key LI A:focus {
        OUTLINE-STYLE: none
}

.key LI A.selected {
        BORDER: #ff6701 2px solid; MARGIN: -1px;BACKGROUND: url("images/test.gif") no-repeat bottom right; margin-left:4px;margin-top:5px;
}
.key LI.selected A:hover {
        BORDER: #ff6701 2px solid;  MARGIN: -1px;BACKGROUND: url("images/test.gif") no-repeat bottom right;
}
.key LI.selected I {
        POSITION: absolute; TEXT-INDENT: -9999em; WIDTH: 12px; BOTTOM: 0px; DISPLAY: block; BACKGROUND-POSITION: 0px -101px; HEIGHT: 12px; OVERFLOW: hidden; RIGHT: 0px
}

下一篇: 屏蔽ecshop云提示no_license 上一篇: 各大搜索引擎提交地址