opencart 百度登录和百度钱包支付插件响应式适应pc/mobile

梦里梦外; 2021-11-02 02:52 282阅读 0赞

OpenCart（[http://www.opencart.com/][http_www.opencart.com]，[http://www.opencartchina.com/][http_www.opencartchina.com]）是国外著名的开源电子商务系统, 优势在于前台界面的设计非常适合欧美购物者的浏览习惯：简洁，直观，唯美;后台简洁明了，而且功能强大。对于初学者来说非常容易上手，对于大多数经验丰富的网店经营者来说，OpenCart的后台管理功能也基本能满足其需求，并且有大量的插件满足不同用户的需求，可以说是最适合国内用户建设电商网站的开源框架。

经过几天的学习后，决定也要动手写个插件，浏览下大家在OpenCart社区内发的插件，发现对于第三登录，有QQ和新浪微博，但是没有百度账户登录，虽说百度账户没有QQ用户量多，但凭借其众多大牌产品，百度知道，百度文库等，其用户数也相当的多，并且支持短信，新浪微博，QQ和人人网登录，看来只要一个百度登录的插件，相当于把国内主流的第三方登录都集成了；对于支付，已有支付宝支付，财付通支付，但是百度半个月前推出了百度钱包支付，伴随着各种优惠活动来看，后续用户数可想而知；对于前端展示，有一个大牛做了手机版opencartmobile，能根据屏幕尺寸自动切成手机样式和切换回pc样式，但是其手机样式显示效果还是还一些pc感觉。经过上面的分析，打算做的插件功能也定下来了，百度账户登录，百度钱包支付，将opencart mobile样式改得在手机端上体验更好。

**一些截图，包括登录和支付：**

![首页][301423464703458.png]   ![301425405173100.png][] ![301432223305257.png][]  ![301451154088585.png][]

![301452490646198.png][]   ![301435197053546.png][]   ![301435562057830.png][]  ![301436451111239.png][]

大家可能注意到，确定订单时金额是404.00，而实际支付金额是0.01，是因为在opencart后台设置了支付测试模式，具体设置方法见下面安装和使用方法中的第5步。

**演示地址：**

[http://lightshop.duapp.com/][http_lightshop.duapp.com]

**插件下载地址：**

[http://pan.baidu.com/s/1i3r8NWx][http_pan.baidu.com_s_1i3r8NWx]

**准备工作：**

**百度登陆：**

登录百度开发者中心（[http://developer.baidu.com/][http_developer.baidu.com]）管理控制台 -> 开发者服务管理 -> 创建工程，创建成功后，在该应用的基本信息里可以看到有API Key和Secret Key，后续会用到这两个值。

**百度钱包支付：**

1.  获取轻应用id：进入轻应用管理页面 [http://developer.baidu.com/console\#app/light][http_developer.baidu.com_console_app_light] -> 接入轻应用-> 填写基本信息等->页面左侧 手机端能力 ->可以看到有API Key，后续会用到这个值。
2.  获取支付的商户号和安全码，在百度钱包商户平台申请（http://b.baifubao.com）。

**安装及使用方法**

1.  从官网下载并安装opencart，本插件已在opencart 1.5.6.1 上测试通过；
2.  确保为网站已经正确安装了VQMOD，安装方法见[https://code.google.com/p/vqmod/][https_code.google.com_p_vqmod]；
3.  下载后解压缩文件，将admin, catalog, vqmod三个文件夹和.htaccess, app.conf上传至网站根目录，与你现有网站的三个同名目录合并即可，并不覆盖任何文件。使用.htaccess 和 app.conf是因为百度钱包支付成功回调地址不能包含任何参数，而opencart的URI query要带有一个参数指定控制器，如 route=ControllerName/methodName/params1/params2…, 所以用.htaccess来重写uri，如果应用部署到BAE，需要用app.conf重写uri；
4.  开启百度登陆，在网站后台Extensions -> Modules -> Baidu Connect 选择install, 安装完毕后选择Edit，填写在准备工作->百度登录中得到的API Key和Secret Key，并将Status置为Enabled；
5.  开启百度钱包支付，在网站后台Extensions -> Payments -> Bfbpay 选择install, 安装完毕后选择Edit，填写在准备工作->百度钱包支付中得到的商户号，安全码和轻应用的API Key，目前百度钱包支付都是真实支付，所以在测试时，需要将bfbpay配置中的Test Status置为Enabled，这样支付金额始终为0.01元；

另见[OpenCart框架运行流程介绍][OpenCart]

转载于:https://www.cnblogs.com/yunlong/p/3711149.html

[http_www.opencart.com]: http://www.opencart.com/
[http_www.opencartchina.com]: http://www.opencartchina.com/
[301423464703458.png]: https://images0.cnblogs.com/i/432378/201404/301423464703458.png
[301425405173100.png]: https://images0.cnblogs.com/i/432378/201404/301425405173100.png
[301432223305257.png]: https://images0.cnblogs.com/i/432378/201404/301432223305257.png
[301451154088585.png]: /images/20211102/e774b1c73c874da190cd83e09b63f12e.png
[301452490646198.png]: https://images0.cnblogs.com/i/432378/201404/301452490646198.png
[301435197053546.png]: https://images0.cnblogs.com/i/432378/201404/301435197053546.png
[301435562057830.png]: https://images0.cnblogs.com/i/432378/201404/301435562057830.png
[301436451111239.png]: /images/20211102/6b68ab788f174bbaa956214ba0577d33.png
[http_lightshop.duapp.com]: http://lightshop.duapp.com/
[http_pan.baidu.com_s_1i3r8NWx]: http://pan.baidu.com/s/1i3r8NWx
[http_developer.baidu.com]: http://developer.baidu.com/
[http_developer.baidu.com_console_app_light]: http://developer.baidu.com/console#app/light
[https_code.google.com_p_vqmod]: https://code.google.com/p/vqmod/
[OpenCart]: http://www.cnblogs.com/yunlong/p/3709684.html