广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

ecshop产品页产品特性归类挑选的制作实例教程

日期:2021-05-11 浏览:

ecshop产品页产品特性归类挑选的制作实例教程


短视頻,自新闻媒体,达人种草1站服务 这两天用ecshop制作1个商城站时想把里边的产品特性值做成许多大商城普遍的可挑选归类那种,搜了很多沒有出示这层面实例教程的,寻找的也不可以应用。有的全是做为软件卖的,居然没人共享出来,自身科学研究了下搞定了,决策在A5完全免费共享给每位遇到一样难题的盆友,期待能协助到你。

改动流程:

1、将下面这个照片提交到 themes/您当今模版/images文档夹里边,这里我取名为test.gif。假如你自身改成别的文档名,那末在下面的改动中就要维持1致。

2、寻找 themes/您当今模版/goods.dwt文档,做以下改动:

寻找下面这段编码:

  !-- {* 刚开始循环系统全部可选特性 *} --
  !-- {foreach from=$specification item=spec key=spec_key} --
  li >   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} quot;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} quot;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} --
  !-- {* 完毕循环系统可选特性 *} --

将上面这段编码更换为下列编码 :

!-- {* 刚开始循环系统全部可选特性 *} --
  li >   !-- {foreach from=$specification item=spec key=spec_key} --
  {$spec.name}:
  div >   !-- {* 分辨特性是复选還是单选 *} --
  !-- {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} >   input >   !-- {/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} quot;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
  !-- {* 完毕循环系统可选特性 *} --

再寻找下面这段编码:

 

/**
 * 接受回到的信息内容
 */
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;
  }

在上面这段编码下提升下列编码:

/**
 * 色调挑选器
 */
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、开启themes/您当今模版/style.css,将下面的编码提升到最终(假如您的模版启用的css文档并不是style.css,那末将下面的编码加到您启用的那个css文档里边去):

/*--------------色调挑选器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: ⑴px;margin-right:4px;margin-top:5px;}
#goodsInfo .catt a:focus {outline-style:none;}
#goodsInfo .catt .cattsel {border:#ff6701 2px solid;margin: ⑴px;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:⑴px;background: url(images/test.gif) no-repeat bottom right;}
/**/

 

好了,升级结束!随后再说说特性的加上方式:

1、在后台管理产品管理方法下的产品种类里边,先加上您的1个产品种类,例如包包,随后给这个种类加上将会出現的全部特性,例如,色调和规格(必须顾客选购情况下挑选的特性,加上的情况下要挑选单选特性,随后值挑选从目录里边挑选),随后把因此将会用到的色调和规格加上到目录里边。

2、加上或编写产品,在产品特性1栏里边挑选包包这个种类,随后在依据这个产品的特性,点一下色调和规格前面的加号,该产品有几个特性,就新建几个,随后在往下拉框里边挑选这个产品有着的特性便可。

表明:由于每一个模版的合理布局和款式不1样,安裝好后,假如款式和您的并不是很融洽,请自主依据您的模版变更款式。本文由郑州互联网企业旭网高新科技首发于A5站长网,转载请保存此连接




新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系