澳门新葡亰娱乐官网玩转EasyUi弹出框

澳门新葡亰娱乐官网 4

常常需要利用自定义页面来制作单页面,并放置在导航里,又希望能实现当前自定义页面高亮

澳门新葡亰娱乐官网 1

这两天在搞EasyUi的弹出框,弹出框之前也搞过很多个版本,总是觉得不那么完美,刚好最近有时间,就往多处想了想,功能基本上达到我的预期,并且在开发过程中遇到很多小技巧,特撰文如下。

[e:loop={'select id,path,title from [!db.pre!]enewspage where classid=1 order by id',20,24,0}]?php$pageurl=$public_r['newsurl'].str_replace('../../','',$bqr['path']);$css='pagecss';if($classid=='page'.$bqr[id]){ $css='selfpagecss';}?li class=?=$css?a href=?=$pageurl??=$bqr[title]?/a/li[/e:loop]

“自定义模块”这个功能从微分销上线之初就已经存在,但是有很多商家却不知道怎么去用它。这个功能究竟能给商家带来什么?

走起:在EasyUi的Grid中插入自定义列。

扩展阅读:帝国CMS使用技巧之自定义页面调用高级技巧

今天,小编请来产品部的同学把“自定义模块能干啥”、“如何运用好‘自定义模块’来提升店铺转化”等问题统统给大家梳理了一遍。下面,我们将从“自定义模块”
如何设置、装修等这类问题作为切入点,来分析如何提升店铺的品牌专业度与转化率。

代码如下:

自定义模块是什么?

    $('#SaList').datagrid({
        url: '/ForLog/WebShop/GetSaList',
        queryParams: null,
        pagination: true,
        pageSize: 15,
        singleSelect:true,
        showPageList: false,
        pageList: [15],
        rownumbers: true,
        nowrap: false,
        height: 400,        
        loadMsg: 'Load……',
        columns: [[
                    { field: 'SA', title: 'SA', width: 80 },
                    { field: 'ATDHK', title: 'Delivered from HK', width: 80 },
                    { field: 'ATAHK', title: 'ATA destination', width: 80 },
                    { field: 'HAWB', title: 'HAWB', width: 80 },
                    { field: 'STATUS', title: 'Confirm', width: 120 },
                    { field: 'ConfirmBtn', title: 'Confirm', width: 50,
                        formatter: function(val, rowData) {                            
                            return "<a href="javascript:openDialog('" + rowData.SA + "-OK');"><img  src='../Scripts/EasyUi/themes/defaulttree_dnd_yes.png'  /></a> <a href="javascript:openDialog('" + rowData.SA + "-NOK');"><img  src='../Scripts/EasyUi/themes/defaulttree_dnd_no.png'  /></a> "; 
                        }
                    },
                    { field: 'STATUS1', title: 'STATUS1', width: 120 },
                    { field: 'STATUS2', title: 'STATUS2', width: 120 },
                    { field: 'STATUS3', title: 'STATUS3', width: 120 }
                ]]
    });

自定义模块,是指除了店铺首页、商品列表、商品详情页以外,商家还可以根据自身的需求进行新建“自定义页面”,并按此页面的功能进行自定义装修,可以通过页面的链接地址装修到店铺的首页以及店铺导航。

请注意 field: ‘ConfirmBtn’,这一列,就是我自定义的列,效果如下:

自定义模块在哪里设置?

澳门新葡亰娱乐官网 2

微分销管理后台——店铺管理——自定义模块

当点击勾勾叉叉时,会传参,并有弹出框出来,效果如下:

自定义模块怎么用?

澳门新葡亰娱乐官网 3

自定义模块,首先可以设置页面的标题、背景颜色、页面布局;

在这里有几个小技巧。

其次,可以根据商家需求进行自定义的模块装修。

 技巧1,弹出框的内容是用本页面Div呢,还是iframe?

这么多的自定义装修模块,那么我们要怎样运用?

  如果我用本页面Div,那弹出框如何接收新传入的参数,如弹框上的SA号和状态,都是需要传参过来的。

敲黑板,划重点!

  正因为本页面Div无法满足接收传参且页面不刷新,所以我使用了iframe。

一、企业品牌宣传(例如:企业介绍、品牌故事)

  代码如下:

1、情感转化。

function openDialog(id) {
    $('#openReceiveFeedBack')[0].src = 'ReceiveFeedback/' + id;
    $('#ReceiveFeedBackDialog').dialog('open');
}

<div id="ReceiveFeedBackDialog" class="easyui-dialog" closed="true" buttons="#dlg-buttons" title="标题" style="width:500px;height:350px;">
     <iframe scrolling="auto" id='openReceiveFeedBack' name="openReceiveFeedBack" frameborder="0"  src="" style="width:100%;height:98%;"></iframe>
</div> 
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" onclick="formSubmit();">Save</a> <a href="#"
            class="easyui-linkbutton" onclick="closeDialog();">Close</a>
    </div>

好的企业品牌形象的塑造,更容易让广大消费者产生认同感,提升消费者对企业的认知度与好感度,从而有利于店铺产品的转化。

技巧2,如弹框页面所示,Save按钮是在父级页面上的,而Form表单是在iframe页中的,父级页面需要调用框架页的提交事件。

get装修技巧:

我的代码是这样写的:

1、新建自定义模块——设置“页面标题”

    function formSubmit() {
        frames["openReceiveFeedBack"].document.forms["form1"].submit();
    }

2、添加“图片广告”——设置“分开显示”——添加“设计好的图片”——设置”链接地址”链接到相应的内容页面。

技巧3,如果我对Input如下定义:disabled=”disabled”,那么在后台无法接收到此input,所以我改为:readonly=”readonly”

2、情怀转化。

技巧4,页面提交成功后,我希望给出成功的提示,并且弹出窗口自动关闭。

展示企业的创业经历、产品的人文情怀,用故事去感动和影响你的受众,让他们感受到产品的情怀价值。(例如:茶文化、文艺情怀、生态健康情结等)

  通常Mvc返回的要么是字符,要么是简单的JS提示,不足以关闭父级页面。

get装修技巧:

  所以这里又使用了一个小技巧,返回Js代码,调用父级页面的关闭函数。

1、新建自定义模块——设置“页面标题”

  后台代码是这样的。

2、添加“图片广告”——设置“分开显示”添加“设计好的图片”

        public ActionResult ReceiveFeedbackForm(FormCollection collection)
        {   
            orderDal.AddSaReceive(collection["txtSa"], collection["txtStatus"], collection["txtReason"],new CurrentUser().UserInfo.LoginName);
            return Content(@"<script>parent.ShowMsg();</script>", "text/html");
        }

3、添加“滑动导航”——可设置“文本”、“图片”两种形式——设置相应的链接地址

调用的父级页面代码是这样的。

4、添加“富文本”插入图片

function closeDialog() {
    $('#ReceiveFeedBackDialog').dialog('close');
}

function ShowMsg() {
    $.messager.alert('Success', 'Save Success!');
    closeDialog();
}

二、促销活动专题

So,效果是这样的。

针对某一促销活动,设置一个专题页面,直接装修在首页展示或者置于商城的导航上,减少消费者的操作成本,直奔主题。同时相应的优惠促销引流也能提升店铺的流量转化。

澳门新葡亰娱乐官网 4

get装修技巧:

弹出窗口已关闭,页面上只有信息提示按钮,点一下,这个事件就走完了。

1、本示例中,顶部依然采用“滑动导航”设置,插入广告图片

 

选择添加“商品”选择相应参与活动的产品

全剧终,谢谢观看,请随手点击推荐。

2、如何装修到导航栏。复制“自定义模块”的链接地址

 

3、店铺管理——店铺导航设置——添加“自定义链接”

 

三、分销商培训

微分销商城主要是基于微信庞大的用户基数,进行社群裂变营销。当商家发展到相应数量的粉丝的时候,就要对其进行管理、服务和培训。

如何让他们快速了解商城制度与分销模式、操作流程、产品素材等,这个时候我们就可以采用“自定义模块”来新建我们的培训学院,服务好我们的粉丝,提升他们的业务水平。良好的服务水平也是提升商城粉丝积累与转化的重要因素。

如何搭建?

get装修技巧:

以上示例效果需要美工进行相应的设计,里面主要用到的装修模块有:图片广告、标题栏、图片导航

四、售后服务

现在的消费者购物需求越来越大,对服务的要求也越来越高,如何做好服务指引,是商家要考虑的重要因素之一。

如何在消费者购买时告知他所享受的一系列服务?通过“自定义模块”建设一个“购物须知”就非常必要。这让消费者感受到贴心服务,同时对于“移动购物”不熟练的客户来说,也能够引导他们顺利完成下单,这不仅仅降低了客服的咨询成本,还提升了店铺的转化。

通过小编的梳理,大家的思路是不是更清晰了呢?“自定义模块”与“自定义专题分类”有相似之处,大家在装修过程中可以用起来,如有疑问,或者有其它功能建议,可在下方留言告知小编哦!

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图