ECSHOP商品详情页颜色、尺码 选择仿淘宝效果 _技术库 - 云建站超市

历史记录

清除

    热门搜索

    关注 提问

    当前位置: 首页 > 技术库 > ECSHOP商品详情页颜色、尺码 选择仿淘宝效果

    ECSHOP商品详情页颜色、尺码 选择仿淘宝效果

    云建站超市 / 2015-01-21

    效果如图:

    修改方法:

    在网站模板目录下打开 goods.dws 查找如下代码:

    <!-- {* 开始循环所有可选属性 *} -->
          <!-- {foreach from=$specification item=spec key=spec_key} -->
          <li class="padd loop">
          <strong>{$spec.name}:</strong><br />
            <!-- {* 判断属性是复选还是单选 *} -->
                        <!-- {if $spec.attr_type eq 1} -->
                          <!-- {if $cfg.goodsattr_style eq 1} -->
                            <!-- {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} onclick="changePrice()" />
                            {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
                            <!-- {/foreach} -->
                            <input type="hidden" name="spec_list" value="{$key}" />
                            <!-- {else} -->
                            <select name="spec_{$spec_key}" onchange="changePrice()">
                              <!-- {foreach from=$spec.values item=value key=key} -->
                              <option label="{$value.label}" value="{$value.id}">{$value.label} {if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option>
                              <!-- {/foreach} -->
                            </select>
                            <input type="hidden" name="spec_list" value="{$key}" />
                          <!-- {/if} -->
                        <!-- {else} -->
                          <!-- {foreach from=$spec.values item=value key=key} -->
                          <label for="spec_value_{$value.id}">
                          <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />
                          {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
                          <!-- {/foreach} -->
                          <input type="hidden" name="spec_list" value="{$key}" />
                        <!-- {/if} -->
          </li>
          <!-- {/foreach} -->
          <!-- {* 结束循环可选属性 *} -->

    修改为如下代码:

    <!-- {* 开始循环所有可选属性 *} -->
          <!-- {foreach from=$specification item=spec key=spec_key} -->
          <li class="padd">
          
            <!-- {* 判断属性是复选还是单选 *} -->
                        <!-- {if $spec.attr_type eq 1} -->
                          <!-- {if $cfg.goodsattr_style eq 1} -->
                  <div class="catt"><strong class="catb">{$spec.name}:</strong>
    <!-- {foreach from=$spec.values item=value key=key} -->
      <a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this)" href="javascript:;" name="{$value.id}">{$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>
                  <input type="hidden" name="spec_list" value="{$key}" />              
                          <!-- {/if} -->                      
                        <!-- {else} -->
                        <div class="blank10"></div>
                          <!-- {foreach from=$spec.values item=value key=key} -->
                  <label for="spec_value_{$value.id}">                      
              <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />
                          {$value.label}</label>
                          <!-- {/foreach} -->
                          <input type="hidden" name="spec_list" value="{$key}" />
                        <!-- {/if} -->
          </li>
          <!-- {/foreach} -->
          <!-- {* 结束循环可选属性 *} -->

    再在网站模板CSS里添加如下CSS

    /*--------------颜色选择器CSS添加-------------*/
    .catt .catb {
        height:auto;
        overflow:hidden;
        line-height:30px;
        float:left;
    }
    .catt {
        width:100%;
        height:auto;
        overflow:hidden;
        padding-bottom:5px;
        text-decoration:none;
    }
    .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;
    }

    再把如下图片另存为 test.gif 放入网站模板图片文件夹里

    最后,在页面内找到<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();
    }

     

    下一篇:ECSHOP 商品详情页购买数量 添加加减按钮 实用版
    上一篇:ecshop将属性价格改为直接价格,而非加的价格

    云建站超市

    诚信网站 可信网站 可信网站 实名认证 财付通