【ECSHOP插件】商品颜色尺寸仿淘宝选择功能免费发布
/themes/default/style.css
/themes/default/goods.dwt
一:控制样式
加添图片test.gif.
2.打开/themes/ecshop/style.css
最下面添加:
- /*--------------颜色选择器CSS添加-------------*/
- .catt{width:100%;height:auto;overflow:hidden;padding-bottom:5px;}
- .catt a{border: #c8c9cd 1px solid; text-align: center;
background-color: #fff; margin-left:5px;margin-top:6px;padding-left:
10px;padding-right: 10px;display: block; white-space: nowrap; color:
#000; text-decoration: none;float:left;} - .catt a:hover {border:#ff6701 2px solid; margin: -1px; margin-left:4px;margin-top:5px;}
- .catt a:focus {outline-style:none;}
- .catt .cattsel {border:#ff6701 2px solid; margin:
-1px;background: url("images/test.gif") no-repeat bottom right;
margin-left:4px;margin-top:5px;} - .catt .cattsel a:hover {border: #ff6701 2px solid;margin:-1px;background: url("images/test.gif") no-repeat bottom right;}
复制代码
注:以下修改以原版ecshop2.7.3版本default(模板名称)为基准
未修改前第367-371行
- <!-- {foreach from=$spec.values item=value key=key} -->
- <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} />
- {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif
$value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}]
</label><br /> - <!-- {/foreach} -->
复制代码
修改为
- <div class="catt">
- <!-- {foreach from=$spec.values item=value key=key} -->
- <a {if $key eq 0}class="cattsel"{/if}
onclick="changeAtt(this)" href="javascript:;" 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
style="display:none" id="spec_value_{$value.id}" type="radio"
name="spec_{$spec_key}" value="{$value.id}" {if $key eq 0}checked{/if}
/></a> - <!-- {/foreach} -->
- </div>
复制代码
二:增加js控制样式与选中行为
在页面内找到<script>这样的东西,在其后面添加一个js函数
此处是为了控制 选择页面上的颜色 同时也选中了对应的隐藏input 从而来更改商品属性.如:价钱...等.
如果是用户修改过的goods.dwt可搜索:function changePrice()在其上面添加.
说明:
1.以上修改会将商品属性部分所有radio修改.
2.由于用户goods.dwt可能都被修改过,用户请根据自己的实际情况修改.
3:对于颜色选择功能,这是目前最简单的实现方法.
【ECSHOP插件】商品颜色尺寸仿淘宝选择功能免费发布的更多相关文章
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- Android仿淘宝继续上拉进入商品详情页的效果,使用双Fragment动画切换;
仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。
前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
- 转::iOS 仿淘宝,上拉进入详情页面
今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- android版高仿淘宝客户端源码V2.3
android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
随机推荐
- 关于ListCtrol自绘的技巧
一.给控件添加排序功能report风格的list控件很多情况下都需要支持排序功能,而且最好支持按不同列进行排序.CListCtrl的类方法SortItems支持排序功能,但是在排序过程中,两个数据真正 ...
- 漫谈并发编程(六):java中一些经常使用的并发构件的介绍
CountDownLatch 它被用来同步一个或多个任务,强制它们等待其他任务运行的一组操作完毕. 你能够向CountDownLatch对象设置一个初始计数值,不论什么在这个对象上 ...
- Linux Socket编程注意事项
Socket API 是网络应用程序开发中实际应用的标准 API.虽然该 API 简单.可是开发新手可能会经历一些常见的问题.本文识别一些最常见的隐患并向您显示怎样避免它们. 隐患 1.忽略返回状态 ...
- Codeforces 475D CGCDSSQ 求序列中连续数字的GCD=K的对数
题目链接:点击打开链接 #include <cstdio> #include <cstring> #include <algorithm> #include < ...
- git flow 的使用
在这里主要讲一下我在项目中用到的关于gitflow的使用方法. 公司的项目中,专门有一台用来存放版本号库的server,路径是在默认的安装文件夹/opt/git/,那么在使用的时候,假设你是 ...
- Jar包转成Dll的方式(带嵌套的jar也能做)
研究很好几天,终于成功了.因为写了一个Java的项目,现在要求要改写成C#版本的.但是其中用到了svnkit,svnkit是java平台的.改写成C#的话,要使用SharpSVN,但是SharpSVN ...
- 用Python对体积较大的CSV文件进行比较的经验
用Python对体积较大的CSV文件进行比较的经验 » 进化的测试 | 进化的测试 用Python对体积较大的CSV文件进行比较的经验 python Add comments 八 032010 ...
- CodeForces 377B---Preparing for the Contest(二分+贪心)
C - Preparing for the Contest Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d ...
- servlet其工作原理和例子证明
servlet简单介绍 当我们在地址栏里面输入www.baidu.com,终于呈如今我们面前的是百度搜索的页面.在这些訪问过程中,都会有一个webserver来处理这些请求以及訪问处理后的结果. 而s ...
- Oracle定时执行存储过程(转)
定时执行存储过程在平时开发中经常会用到,年前的时候自己也做了一个,由于时间关系一直没能记录,现记录下来. 首先用一个完整的例子来实现定时执行存储过程. 任务目标:每小时向test表中插入一 ...