ECSHOP商品詳情頁顏色、尺碼 選擇仿淘寶效果

效果如圖：

 

修改方法：

在網站模板目錄下打開 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();
}