How to Create a course for selecting product attribute categories on the ecshop product page

In the past two days, when I used ecshop to create a mall station, I wanted to make the product attribute values into the categories that many large malls can choose. I found many of them did not provide this tutorial, cannot be used either. Some of them are sold as plug-ins, and no one has shared them. After studying them, I decided to share them with everyone who encountered the same problem for free in the red/Black alliance, hoping to help you.

Modification steps:

1. Upload the following image to the themes/your current template/imagesfolder. Here I name it test.gif. If you change the file name to another one, you must keep the file name consistent in the following changes.

2. Find the themes/your current template/goods. dwt file and make the following modifications:

Find the following code:

<! -- {* All optional attributes of the Start loop *} -->
<! -- {Foreach from = $ specification item = spec key = spec_key} -->
<Li class = "padd loop">
<Strong >{$ spec. name }:</strong> <br/>
<! -- {* Check whether the attribute is checked or selected *} -->
<! -- {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} -->
<! -- {* Optional end loop attributes *} -->

Replace the above Code with the following code:

<! -- {* All optional attributes of the Start loop *} -->
<Li style = "border: 1px solid # FBD2D2; float: left; width: 315px; margin-left: 5px; background: # FCF0F0; padding: 10px;">
<! -- {Foreach from = $ specification item = spec key = spec_key} -->
{$ Spec. name }:
<Div class = "catt">
<! -- {* Check whether the attribute is checked or selected *} -->
<! -- {If $ spec. attr_type eq 1} -->
<! -- {If $ cfg. goodsattr_style eq 1} -->
<! -- {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 =" {$ value. label} "> {$ 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} -->
<Input type = "hidden" name = "spec_list" value = "{$ key}"/>
<! -- {Else} -->
<Select name = "spec _ {$ spec_key}">
<! -- {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} -->
</Div>
<! -- {/Foreach} -->
</Li>
<! -- {* Optional end loop attributes *} -->

Find the following code:

 

/**
* Receive returned information
*/
Function changePriceResponse (res)
{
If (res. err_msg.length> 0)
{
Alert (res. err_msg );
}
Else
{
Document. forms ['ecs _ formbuy']. elements ['number']. value = res. qty;

If (document. getElementById ('ecs _ GOODS_AMOUNT '))
Document. getElementById ('ecs _ GOODS_AMOUNT '). innerHTML = res. result;
}
}

Add the following code under the above Code:

/**
* Color selector
*/
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 ();
}

3. Open themes/your current template/style.cssand Add the following code to the very bottom (If your template is not style.css, add the following code to the css file you called ):

/* -------------- Add the color selector CSS -------------*/
# GoodsInfo. catt {width: 100%; height: auto; overflow: hidden; padding-bottom: 5px ;}
# GoodsInfo. catt a {border: # c8c9cd 1px solid; text-align: center; background-color: # fff; margin-right: 5px; margin-top: 6px; padding-left: 10px; padding-right: 10px; display: block; white-space: nowrap; color: #666; text-decoration: none; float: left ;}
# GoodsInfo. catt a: hover {border: # ff6701 2px solid; margin:-1px; margin-right: 4px; margin-top: 5px ;}
# GoodsInfo. catt a: focus {outline-style: none ;}
# GoodsInfo. catt. cattsel {border: # ff6701 2px solid; margin:-1px; background: url (images/test.gif) no-repeat bottom right; margin-right: 4px; margin-top: 5px ;}
# GoodsInfo. catt. cattsel a: hover {border: # ff6701 2px solid; margin:-1px; background: url (images/test.gif) no-repeat bottom right ;}
/**/

 

Now, update is complete! Then let's talk about how to add attributes:

1. In the product type under the background product management, add one of your product types, such as bags, and then add all possible attributes to this type, for example, color and size (the attributes selected by the customer at the time of purchase are required. When adding the attributes, select the single-choice attribute and select the values from the list ), then add the colors and sizes that may be used to the list.

2. Add or edit a product. In the Product Properties column, select the bag type. Then, click the plus sign before the color and size based on the product properties. The product has several attributes, create a few items, and then select the attributes of the product in the drop-down box.

Note: Because the layout and style of each template are different, after installation, if the style is not very consistent with yours, please change the style according to your template. This article by Zhengzhou network company http://www.xw0371.com xuwang technology first in the red and black Alliance webmaster network, reproduced please keep this link