参与价格增减的字段可以随便命名定义，字段输入表单替换元素需设置成多值字段，3列
peice: 商品价格（所有属性在此价格上增加扣除）一个input输入框
下载包中已经包含了模型，内容模板，插件目录
压缩包中的differPrice目录放到/e/extend/目录下， 新建一个内容模板，将压缩包中的模板.txt放进去。导入模型即可测试。
字段截图：
字段设置截图：
信息截图：
前台效果截图：
**********
这里讲下内容模板中的php程序和JQ插件：
内容模板中的php代码块说明：
$color = explode('||||||', $navinfor['color']); // 分割字段名为 “color”的多值字段的属性,字段color是3列的多值字段
$colorHtml = ''; // html模板中输出的变量名
$tpl = '<div class="btn btn-default" price="%s" condition="%s">%s</div>'; // html模板
$colorData = array(); // 分割属性
foreach ($color as $key => $value) { // 分割行内元素
$colorData[$key] = explode('::::::', $value);
$colorHtml .= sprintf($tpl, $colorData[$key][2], $colorData[$key][1], $colorData[$key][0]);
}
以颜色字段color说明：
在添加信息的时候其第一行是3列：
颜色名 操作方向 操作值
紫色 - 10
上述代码运行后得到的html就是
<div class="btn btn-default" price="10" condition="-">紫色</div>
jq脚本会抓取 price 和 condition 来运算
其他字段也一样拆分成这样的格式
页面构造的时候请按下面的格式：
<div id="differ">
<div>
<?=$colorHtml?>
</div>
<div>
***
</div>
</div>
js代码:
;(function($) {
$.fn.extend({
"differPrice" : function(opt) {
opt = $.extend({
btnElem: ".btn", // 参与选择的子元素class
princeElem: "#ExtendAttrPrice", // 显示价格的element元素
activeElem: ".btn-primary", // 选择元素后增加的class名称
notLoginElem: "#notLogin", // 未登录后提示的盒子element元素
member: {}, // 会员组优惠价格数组
groupid: 0 // 用户会员组
}, opt);
var price = $(opt.princeElem).attr("price");
opt.price = Number(price);
if (opt.groupid > 0) {
$(opt.notLoginElem).hide();
for(i in opt.member) {
if (opt.member[i].groupid == opt.groupid) {
if (opt.member[i].condition == '-') {
opt.price = opt.price - opt.member[i].price;
$(opt.princeElem).html(opt.price);
$(opt.princeElem).attr("price", opt.price);
}
}
}
}
$(this).find(opt.btnElem).on("click", function() {
var $parentElem = $(this).parent(); // 父元素
var $beforeSelect = $parentElem.find(opt.btnElem).is(opt.activeElem);
var price = $(opt.princeElem).attr("price");
price = Number(price);
if ($beforeSelect == true) {
var $beforeSelectData = {
"price": Number( $parentElem.find(opt.btnElem).filter(opt.activeElem).attr("price") ),
"condition": $parentElem.find(opt.btnElem).filter(opt.activeElem).attr("condition")
};
if ($beforeSelectData.condition == "+") {
price = price - $beforeSelectData.price;
$(opt.princeElem).html(price);
$(opt.princeElem).attr("price", price);
}
if ($beforeSelectData.condition == "-") {
price = price + $beforeSelectData.price;
$(opt.princeElem).html(price);
$(opt.princeElem).attr("price", price);
}
if ($(this).index() == $parentElem.find(opt.btnElem).filter(opt.activeElem).index()) {
$(this).parent().find(".btn-primary").removeClass("btn-primary");
return;
}
}
var selectData = {
"price" : Number( $(this).attr("price") ),
"condition" : $(this).attr("condition")
};
if (selectData.condition == "+") {
price = price + selectData.price;
$(opt.princeElem).html(price);
$(opt.princeElem).attr("price", price);
}
if (selectData.condition == "-") {
price = price - selectData.price;
$(opt.princeElem).html(price);
$(opt.princeElem).attr("price", price);
}
// 按钮选中样式
$(this).parent().find(".btn-primary").removeClass("btn-primary");
$(this).addClass("btn-primary");
});
}
});
})(jQuery);
*********************
使用说明:
$("#differ").differPrice({member, groupid});
js调用说明：
$("#differ") 为商品属性选择按钮的父元素
member: {}, // 会员组优惠价格数组
groupid: 0 // 用户会员组
会员组通过 <script src="/e/extend/differPrice/retUserGroupid.php"></script> 已经获取到登录用户的会员组
如果你的html模板不想用默认的ID 可以覆盖值:
$("#differ").differPrice({
btnElem: ".btn", // 参与选择的子元素class
princeElem: "#ExtendAttrPrice", // 显示价格的element元素
activeElem: ".btn-primary", // 选择元素后增加的class名称
notLoginElem: "#notLogin", // 未登录后提示的盒子element元素
member: {}, // 会员组优惠价格数组
groupid: 0 // 用户会员组
});
****
其他请参考压缩包中的内容模板。
每个网站其用户主的考虑角度都是不一样的，但是不同属性不同价格都可以在此插件上扩展。
主要是分割字段内容，按照字段中的规则运算价格。
******************************
商城订单、购物车自己巴拉巴拉改吧
