先放效果图,如此实用的功能是不是迫不及待的要添加到自己的网店中了呢

 

牵涉到的修改文件(default模板为例)
/themes/default/style.css
/themes/default/goods.dwt
(只需修改这两个文件)
修改步骤:
一:控制样式
【ecshop是您自己的模板名称】
1.打开/themes/ecshop/images
加添图片test.gif.

2.打开/themes/ecshop/style.css
最下面添加:

  1. /*--------------颜色选择器CSS添加-------------*/
  2. .catt{width:100%;height:auto;overflow:hidden;padding-bottom:5px;}
  3. .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;}
  4. .catt a:hover {border:#ff6701 2px solid; margin: -1px; margin-left:4px;margin-top:5px;}
  5. .catt a:focus {outline-style:none;}
  6. .catt .cattsel {border:#ff6701 2px solid; margin:
    -1px;background: url("images/test.gif") no-repeat bottom right;
    margin-left:4px;margin-top:5px;}
  7. .catt .cattsel a:hover {border: #ff6701 2px solid;margin:-1px;background: url("images/test.gif") no-repeat bottom right;}

复制代码

3.打开/themes/ecshop/goods.dwt

注:以下修改以原版ecshop2.7.3版本default(模板名称)为基准

未修改前第367-371行

  1. <!-- {foreach from=$spec.values item=value key=key} -->
  2. <label for="spec_value_{$value.id}">
  3. <input type="radio" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" {if $key eq 0}checked{/if} />
  4. {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif
    $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}]
    </label><br />
  5. <!-- {/foreach} -->

复制代码

修改为

  1. <div class="catt">
  2. <!-- {foreach from=$spec.values item=value key=key} -->
  3. <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>
  4. <!-- {/foreach} -->
  5. </div>

复制代码

此处为是了将radio换成淘宝上那种小矩形样式显示在页面.

二:增加js控制样式与选中行为
在页面内找到<script>这样的东西,在其后面添加一个js函数

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();
}
注意:上面代码中的全角字符的括号标签【】改成半角字符的[]括号标签

此处是为了控制 选择页面上的颜色 同时也选中了对应的隐藏input 从而来更改商品属性.如:价钱...等.
如果是用户修改过的goods.dwt可搜索:function changePrice()在其上面添加.

说明:
1.以上修改会将商品属性部分所有radio修改.
2.由于用户goods.dwt可能都被修改过,用户请根据自己的实际情况修改.
3:对于颜色选择功能,这是目前最简单的实现方法.

【ECSHOP插件】商品颜色尺寸仿淘宝选择功能免费发布的更多相关文章

  1. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  2. Android仿淘宝继续上拉进入商品详情页的效果,使用双Fragment动画切换;

    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...

  3. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  4. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。

    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...

  5. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  6. 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

    高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...

  7. 转::iOS 仿淘宝,上拉进入详情页面

    今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...

  8. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  9. android版高仿淘宝客户端源码V2.3

    android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...

随机推荐

  1. 关于ListCtrol自绘的技巧

    一.给控件添加排序功能report风格的list控件很多情况下都需要支持排序功能,而且最好支持按不同列进行排序.CListCtrl的类方法SortItems支持排序功能,但是在排序过程中,两个数据真正 ...

  2. 漫谈并发编程(六):java中一些经常使用的并发构件的介绍

    CountDownLatch      它被用来同步一个或多个任务,强制它们等待其他任务运行的一组操作完毕.      你能够向CountDownLatch对象设置一个初始计数值,不论什么在这个对象上 ...

  3. Linux Socket编程注意事项

    Socket API 是网络应用程序开发中实际应用的标准 API.虽然该 API 简单.可是开发新手可能会经历一些常见的问题.本文识别一些最常见的隐患并向您显示怎样避免它们. 隐患 1.忽略返回状态 ...

  4. Codeforces 475D CGCDSSQ 求序列中连续数字的GCD=K的对数

    题目链接:点击打开链接 #include <cstdio> #include <cstring> #include <algorithm> #include < ...

  5. git flow 的使用

     在这里主要讲一下我在项目中用到的关于gitflow的使用方法.   公司的项目中,专门有一台用来存放版本号库的server,路径是在默认的安装文件夹/opt/git/,那么在使用的时候,假设你是 ...

  6. Jar包转成Dll的方式(带嵌套的jar也能做)

    研究很好几天,终于成功了.因为写了一个Java的项目,现在要求要改写成C#版本的.但是其中用到了svnkit,svnkit是java平台的.改写成C#的话,要使用SharpSVN,但是SharpSVN ...

  7. 用Python对体积较大的CSV文件进行比较的经验

    用Python对体积较大的CSV文件进行比较的经验 » 进化的测试 | 进化的测试 用Python对体积较大的CSV文件进行比较的经验  python  Add comments 八 032010   ...

  8. CodeForces 377B---Preparing for the Contest(二分+贪心)

    C - Preparing for the Contest Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d ...

  9. servlet其工作原理和例子证明

    servlet简单介绍 当我们在地址栏里面输入www.baidu.com,终于呈如今我们面前的是百度搜索的页面.在这些訪问过程中,都会有一个webserver来处理这些请求以及訪问处理后的结果. 而s ...

  10. Oracle定时执行存储过程(转)

    定时执行存储过程在平时开发中经常会用到,年前的时候自己也做了一个,由于时间关系一直没能记录,现记录下来.       首先用一个完整的例子来实现定时执行存储过程. 任务目标:每小时向test表中插入一 ...