全国咨询热线:18720358503

ECStore二次开发设计随笔之3.二维码运用:电脑鼠

类别:行业新闻 发布时间:2021-04-04 浏览人次:

EcShopEX商城系统二次开发设计科学研究 华虫的快乐 EcShopEX二次开发设计科学研究(开发设计|实例教程|模版|小挂件|学习培训|淘宝网客|微运用|微官网|新浪微博营销推广|手机微信营销推广|手机微信手机游戏|手机微信营销推广) Interest OF ChinaBUG

自身ECStore系统软件是适用二维码买东西的,可是,他是后台管理查询产品时扫描仪二维码以后全自动加上到买东西车里,而前台接待确是扫描仪后入入产品

经营的同事期待电脑鼠标挪到产品的规格型号上,就需要显示信息出当今规格型号的二维码,扫描仪以后全自动加上到买东西车中。

要完成这一要求,大家分以下两步:

如何能够扫二维码立即添加买东西车 如何显示信息二维码 如何在产品规格型号上加上二维码的实际效果

依据查询WAP的买东西路程序发觉,假如一个产品连接后边含有qr主要参数得话,那麼扫描仪以后开启会全自动添加买东西车。

实际编码坐落于app b2c controller wap product.php内的大概74行:

        if( $_GET['qr'] ){
            $url = $this- gen_url(array('app'= 'b2c','ctl'= 'wap_cart','act'= 'qrCodeAddCart','arg0'= $productId));
            $this- redirect($url);
        }

分辨有主要参数立即转为~

那麼如今就剩余如何将二维码显示信息出去了。

<文档中的501行中:

var state;
container.addEvents({
......

这一编码中集中化监管了多规格型号的点一下恶性事件,那麼大家能否提升上来呢?

回答是毫无疑问的。

那麼大家提升的难题处理便会遇到此外一个难题便是,二维码的来源于,便是这一二维码在哪儿里呢?系统软件自身有吗?

行吧,历经剖析還是自身转化成吧,无论转化成缓存文件還是转化成照片文档,全是必须自身敲代码完成的。

综上所述上述,大家现阶段要处理的难题是:

如何完成二维码的转化成 如何完成启用二维码并展现

如今大家来处理第一个难题,怎样转化成大家必须的二维码。

ECStore系统软件中早已集成化了PHP QR Code库了,它是一个转化成二维码的PHP类库,实际使用方法立即百度搜索狗狗之,我这里不祥细详细介绍,便说一下怎样在ECStore中启用吧。

大家在app b2c controller site product.php文档中提升一个方式:

    /*
    2015.07.22 ChinaBUG 二维码转化成
    用以前台接待产品
    */
    function erweima( $pid = 29408,$gid = 0,$addToCart = 0,$debug = 0 )
    {
        header("Cache-Control:no-store, no-cache, must-revalidate"); // HTTP/1.1
        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");// 强制性查寻etag
        header('Progma: no-cache');
        //
        $url = array(
            'app'= 'b2c',
            'ctl'= 'wap_product',
            'full'= 1,
            'arg0'= $pid,
        );        
        $url = app::get('wap')- router()- gen_url( $url );
        // 全自动添加买东西车
        // $addToCart = false;
        if( $addToCart ) $url .= '?qr=1';
        // 缓存文件KEY
        $cacheKey = 'qrcode_'.$pid.'_'.$addToCart;
        if( !cachemgr::get( $cacheKey,$content ) )
        {
            cachemgr::co_start();
            //二维码改错级別
            $errorCorrectionLevel = 'L'; //L M Q H
            //二维码转化成照片尺寸 1-10
            $matrixPointSize = 4;
            ob_start();
                weixin_qrcode_QRcode::png( $url, false, $errorCorrectionLevel, $matrixPointSize, 2);
                $content = ob_get_contents();
            //ob_clean();
            ob_end_clean();
            cachemgr::set( $cacheKey, $content, cachemgr::co_end() );
        }
        //
        if($debug == 0){
            header("Content-type: image/png");
            echo $content;
        }else{
            print_r(array(
                        'pid'= $pid,
                        'gid'= $gid,
                        'addToCart'= $addToCart,
                        'cacheKey'= $cacheKey,
                        'cachemgr::get(errorCorrectionLevel:L)'= $errorCorrectionLevel,
                        'content'= $content,
                        'preview'= ' div style="height:132px;width:132px;background-image:url('data:image/png;base64,'.base64_encode($content).'')" /div '
                    ));
        }        
    }

这一方式用以前台接待的二维码启用,第一次启用会转化成缓存文件。

第二个难题便是怎样展现二维码,这一情况下大家必须考虑到的是,要立即用AJAX启用上边的方式,随后精准定位显示信息,還是立即輸出构造,再说显示信息呢?

我挑选的是輸出构造,随后用JS来操纵显示信息掩藏的方法,为何应选择这一,跟自己的考虑相关系,至少感觉速率快一点。

<文档,随后寻找:

              span {$item.spec_value} /span 
              {/if} 
              i /i 
            /a 

改成以下:一定要注意闭合的标识噢。

 span {$item.spec_value} /span 
              {/if} 
              i /i 
            /a 
                 div 
                     div 
                         img src=" {link app=b2c ctl=site_product act=erweima arg0=$item.product_id?$item.product_id:$page_product_basic.product_id arg1=$page_product_basic.goods_id arg2=1} "/ 
                     /div 
                     div 扫一扫 br/ 立即根据二维码提交订单 /div 
                 /div 

 

这一段编码主要用途是:在每个规格型号下边都輸出一个二维码照片,随后用以大家脚本制作的启用,脚本制作操纵他的显示信息跟掩藏哈。一定要注意关键是启用转化成二维码的方式噢。

如今大家再说看一下如何启用这一照片构造来显示信息二维码。

<文档中,寻找:

    'click:relay(.spec-attr)': function(e){
        if(this.hasClass('selected')) return;
        var a = this.getElement('a');
        var url = a.href;
        var id = a.rel;
        if(!id) return;
        if (window.history history.pushState) {
            e.stop();
            /*html5 history manage*/
            if(ajax){
                ajax.cancel();
            }
            else {
                state = {title: document.title, html: container.innerHTML, url: location.href, id: id};
            }
            ajax = Query.send(Router.basic(id), {
                method: 'post',
                ess: function(rs) {
                    try{
                        rs = JSON.decode(rs);
                        if(rs.error) {
                            return Message.error(rs.error);
                        }
                    }catch(e) {
                        updateBasic(rs, id, url);
                    }
                }
            });
        }
    }
});

随后在尾部});这一正前方回车键添加一行,随后写上以下编码:

   'mouseenter:relay(.spec-attr a)': function(event){    
        var pro_qrcode = $('product-action-qrcode').getCoordinates();
        if( pro_qrcode.top == null ) return;
        console.log( '-----------------' );
        console.log( event.target.tagName );
        event.stopPropagation();
        var obj = $(event.target),
            marginWH = 0;
        Coord = obj.getCoordinates();
        console.log( '---'+Coord.top+'PX---'+Coord.left+'PX---'+Coord.width+'PX---'+Coord.height+'PX-----' );
        if( event.target.tagName == 'A' )
        {
            obj = obj.getNext();            
        }
        else if( event.target.tagName == 'IMG' || event.target.tagName == 'SPAN' )
        {
            obj = obj.getParent().getNext();
            if( event.target.tagName == 'SPAN' ) marginWH = 8;
        }
        else if( event.target.tagName == 'I' )
        {
            return;
        }
        //
        if( obj == null ) return;
        //
        obj.setStyles({
            top: Coord.top + 15 - marginWH,
            left:Coord.left - 15 - marginWH,
            position: 'absolute',
            'z-index': 999999,
            'background-color': '#fff'
        });
        //
        if( showqrState == false){
            showqrState = true;
            var myFx = new Fx.Elements( 
                obj,
                {
                    onComplete: function(){
                        showqrState = false;
                    }
                }
                ).start({
                0: {
                    top: [Coord.top + 15 - marginWH, pro_qrcode.top-41],
                    left:[Coord.left - 15 - marginWH,pro_qrcode.left-41],
                    width: [0,240],
                    height: [0,140],
                    opacity: [0,1]
                }
            });
        }
        console.log( '-----------------' );
    },
    'mouseleave:relay(.spec-attr)': function(event) {
        $$('.pre-qr').setStyles({
            width:0,
            height:0,
            overflow:'hidden'
        });
    }

一个是电脑鼠标移上来的恶性事件,一个是电脑鼠标移开后的恶性事件。

第一个恶性事件的基本原理是,有一个设置的部位,哪个部位的ID是product-action-qrcode,获得他的所属座标,随后把规格型号的二维码依照标准给他们显示信息在这里个座标上,遮盖他。要非常留意的是恶性事件目标的获得,便是编码中的event.target.tagName的分辨,原本要想撤销恶性事件冒泡,可結果在检测的应用出現动画特效矛盾,最终就艰辛一下了,所有分辨吧。实际为什么也不明白了。^_^

随后,储存,更新,你也就会发觉电脑鼠标移上来便会出現大家要想的二维码,随后扫描仪以后就立即手机上开启,并全自动加上到买东西车中了。

 

推荐阅读

ECStore二次开发设计随笔之3.二维码运用:电脑鼠

EcShopEX商城系统二次开发设计科学研究 华虫的快乐EcShopEX二次开发设计科学研究(开发设计|实例教程|模版|小挂件|学习培训|淘宝网客|微运用|微官网|新浪微博营销推广|手机微信营销推广...

2021-04-04
dede自定表格获得IP详细地址和递交時间【要是三

坚信大伙儿再用织梦cms建立网站的情况下都使用过自定表格做留言板留言,可是怎样查询顾客什么时候填好的表格,和顾客的IP详细地址呢?我还在在网上找了许多JS文档,但太繁杂了,...

2021-04-04
珠海市各大网站营销推广

小区社区论坛营销推广 运用社区论坛的这类互联网沟通交流服务平台,根据文本、照片、视頻等方法公布公司的商品和服务的信息内容,进而让总体目标顾客更为刻骨铭心地掌握公司的...

2021-04-04
【外部链接資源】新闻报道外部链接是扩展网外

本网站技术性精英团队七年织梦cmsCMS及王国仿站、二次开发设计工作经验。有着平稳的设计方案精英团队和技术性精英团队,确保您的售后服务技术性服务。仿站最少20零元,热烈欢迎...

2021-04-04
dedecms 百度搜索网站内部检索控制模块baidusitema

作用表明:百度搜索网站内部检索百度搜索网站内部检索致力于协助网站站长成本低地为网站客户出示高品质量的网网站内部检索服务。应用百度搜索网站内部检索专用工具,您能够轻...

2021-04-04
天虹团体,天虹大型商场

技术性:html5进到社区论坛探讨天虹大型商场股权比较有限企业共享日常生活之美天虹大型商场股权比较有限企业(个股通称:天虹股权,个股编码:002419)是东西方合资企业的连锁加...

2021-04-03
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信