• 注册

人人商城会员中心头部模板显隐会员积分等项

人人商城的会员中心模板属于通用型的,我们想要修改一下贴合项目的风格,先从新增头部模板开始。

先看看默认的界面

一、模板及JS文件

会员中心前端模板,一个是默认的显示模板,另一个是后台店铺装修使用的模板。

//默认会员中心前端模板
/addons/ewei_shop/template/mobile/default/member/index.html

//diy自定义会员中心前端模板
/addons/ewei_shop/plugin/diypage/template/mobile/default/template/tpl_member.html

//diy模板操作项
/addons/ewei_shop/plugin/diypage/template/web_v3/_template_edit.html

后端店铺装修的DIY JS文件位置在:

/addons/ewei_shopv/plugin/diypage/static/js/diy.min.js

接着上一张店铺装修界面的修改情况截图

二、会员积分显隐

1、打开 /addons/ewei_shop/plugin/diypage/template/web_v3/_template_edit.html 文件,查找如下代码:

<script type="text/html" id="tpl_edit_member">

在其下对应添加一个“会员积分”的显隐选项,注意其中的参数。

<div class="form-group">
	<div class="col-sm-2 control-label">会员积分</div>
	<div class="col-sm-10">
		<label class="radio-inline"><input type="radio" name="headcredit" value="1" class="diy-bind" data-bind-child="params" data-bind="headcredit" data-bind-init="true" <%if params.headcredit=='1' || params.headcredit==''%>checked="checked"<%/if%>> 显示</label>
		<label class="radio-inline"><input type="radio" name="headcredit" value="0" class="diy-bind" data-bind-child="params" data-bind="headcredit" data-bind-init="true" <%if params.headcredit=='0'%>checked="checked"<%/if%> > 不显示</label>
	</div>
</div>

2、接着打开 /addons/ewei_shopv2/plugin/diypage/template/mobile/default/template/tpl_member.html 文件,查找如下代码:

{$diyitem['info']['textcredit']}

在此代码行的外围加一个判断条件,最终代码行是这样的:

{if !empty($diyitem['params']['headcredit']) || $diyitem['params']['headcredit']=='1'}
	<div class="credit">{$diyitem['info']['textcredit']}:<span style="color:{$diyitem['style']['textlight']};">{$diyitem['info']['credit']}</span></div>
{/if}

最后保存自定义页面模板即可。

三、会员等级显隐

重复上一步骤的操作即可完成。

1、打开 /addons/ewei_shop/plugin/diypage/template/web_v3/_template_edit.html 文件,查找如下代码:

<script type="text/html" id="tpl_edit_member">

在其下对应添加一个“会员等级”的显隐选项,注意其中的参数。

<div class="form-group">
    <div class="col-sm-2 control-label">会员等级</div>
	<div class="col-sm-10">
        <label class="radio-inline"><input type="radio" name="headlevel" value="1" class="diy-bind" data-bind-child="params" data-bind="headlevel" data-bind-init="true" <%if params.headlevel=='1' || params.headlevel==''%>checked="checked"<%/if%>> 显示</label>
        <label class="radio-inline"><input type="radio" name="headlevel" value="0" class="diy-bind" data-bind-child="params" data-bind="headlevel" data-bind-init="true" <%if params.headlevel=='0'%>checked="checked"<%/if%> > 不显示</label>
    </div>
</div>

2、接着打开 /addons/ewei_shopv2/plugin/diypage/template/mobile/default/template/tpl_member.html 文件,查找如下代码:

{$diyitem['info']['levelname']}

注意,这里可能涉及到 levellink 参数,在其外围加一个判断条件,最终代码行是这样的:

{if !empty($diyitem['params']['headlevel']) || $diyitem['params']['headlevel']=='1'}
	{if !empty($diyitem['params']['levellink'])}
		<a class="level" href="{$diyitem['params']['levellink']}" style="color:{$diyitem['style']['textcolor']};">[{$diyitem['info']['levelname']}] <i class="icon icon-question1" style="font-size:0.6rem;"></i></a>
	{else}
		<div class="level">[{$diyitem['info']['levelname']}]</div>
	{/if}
{/if}

最后保存自定义页面模板即可。

下图是隐藏相关项后的样子:

四、除了显隐,我们还可以修改整个模板

这里来个大拓展,修改整个头部模板,比如我们新增一个样式三,如图2。

1、打开 /addons/ewei_shop/plugin/diypage/template/web_v3/_template_edit.html 文件,查找如下代码:

<script type="text/html" id="tpl_edit_member">

在“样式选择”的子项中,添加如下代码,增加样式三的选项

<label class="radio-inline"><input type="radio" name="style" value="default3" class="diy-bind" data-bind-child="params" data-bind="style" data-bind-init="true" <%if params.style=='default3'%>checked="checked"<%/if%> > Y-样式三</label>

2、接着打开 /addons/ewei_shopv2/plugin/diypage/template/mobile/default/template/tpl_member.html 文件,将最后一个 {/if} 替换成如下代码段:

{elseif $diyitem['params']['style']=='default3'}
	<div class="headinfo style-3" style="background:{$diyitem['style']['background']}; {if !empty($diyitem['style']['background'])}border:none;{/if}">
		………这里是样式三的模板代码,自由发挥吧………
	</div>
{/if}

也就是添加选项三的模板代码,记得添加样式对应的CSS代码即可,这里老杨就不写了,各取所需。

 

发表评论 

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册