woocommerce中将可变商品的下拉选项框改为淘宝类似的款式点选
2017-09-18 10:32
435 查看
公司前段时间有个需求,在 woocommerce 购物时默认的对于可变商品的选择方法是使用select上传一个参数,希望可以改变成像淘宝一样的按钮带文字直接点击选择,这样可以平常就看到所有的选项,对于用户来说十分方便。在初期调用代码的时候想过用PHP去修改,但是这一部分的内容在wp-include中,官方好像并不希望去重写这个选择方法。再调研了woocommerce有用来解决这个问题的插件Variation Swatches and
Photos,可以直接下载付费使用,但是考虑到公司网站只有几个商品,购买一个插件性价比很低,所以直接利用JS和css配合来完成这一个功能
首先,设置正确的产品变量id,在jquery选择器中如果id为中文的转义字符串是无法被识别的,所以在这里将产品属性的名字改为英文名(暂时无解决办法),然后在页面对应的CSS中将用于选择款式属性的select的display设置为none,然后在页面中添加一个button,给他写一个函数让他修改select的值就好。应用jquery中的val()结合选择器完成$('.summer-class-1'.on('click',function(){
alert('change summerclass to 1st value');
$('#summerClassTime').val('八月老班');
alert($('summer-class').val());
})val中选择select包含的value值,即可完成
Photos,可以直接下载付费使用,但是考虑到公司网站只有几个商品,购买一个插件性价比很低,所以直接利用JS和css配合来完成这一个功能
首先,设置正确的产品变量id,在jquery选择器中如果id为中文的转义字符串是无法被识别的,所以在这里将产品属性的名字改为英文名(暂时无解决办法),然后在页面对应的CSS中将用于选择款式属性的select的display设置为none,然后在页面中添加一个button,给他写一个函数让他修改select的值就好。应用jquery中的val()结合选择器完成$('.summer-class-1'.on('click',function(){
alert('change summerclass to 1st value');
$('#summerClassTime').val('八月老班');
alert($('summer-class').val());
})val中选择select包含的value值,即可完成
相关文章推荐
- Android 多商品订单评价(类似淘宝)
- 集成网易云信实现自定义消息(类似淘宝聊天发送商品信息)
- 【商城开发三】Android 仿淘宝商品详情页下拉足迹修改版
- ios 类似的效果淘宝商品详细页面
- 环信集成自定义发送类似淘宝商品信息条目
- 随滚度条移动的浮动层(类似京东,淘宝商品介绍栏)
- android应用开发,类似美团商品详情下拉,顶部图片放大的效果
- 用php实现类似淘宝,拍拍,易趣的最近浏览商品的功能模型代码
- 类似淘宝商品展示,上面图片下面名字和标题的css样式设置
- android自定义视图之类似淘宝商品详情
- android:仿淘宝商品详情下拉展示浏览历史
- iOS 类似淘宝商品详情查看翻页效果的实现
- ios 类似淘宝商品详情页面的效果
- Cookies (php实现类似淘宝最近浏览商品的功能模型代码) 转
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
- 最近遇到一个类似淘宝购买商品加减数量然后还得实时更新数据到服务器的问题
- 仿淘宝商品详情页面标题下拉渐变效果
- 仿淘宝商品详情页面下拉黏滞效果
- 使用RecycleView加载不同的布局(类似淘宝京东购物车+推荐商品列表)
- Android 仿淘宝商品详情页下拉足迹Demo