Magento Facebook, Twitter登录插件

社交网站已成功占据网民们越来越多的时间,不论是一个内容站还是电商站,社交分享按钮都早已成为标配。社交分享按钮在很多模板中都已添加,甚至在Magento自带的rwd包默认模板中也已加入了Facebook和Twitter的分享按钮,此外还可以采用AddThis这样的免费代码来集成分享功能。

Magento rwd社交分享按钮

分享以外为了降低获取用户的成本、改善用户体验各大网站也开始纷纷添加了Facebook等账号登录的功能,这样做的目的是一个避免了客户看到冗长的注册表格后产生的较高的跳出率,更深层的目的也是为了能够打入客户的关系链。

关于Magento社交登录有不少付费插件,这里不再赘述。今天介绍的这款免费插件是由做Magento开发比较资深的Inchoo网站发布的,最近一次的更新时间是2014年9月5号:

Inchoo社交登录插件

下载地址: http://pan.baidu.com/s/1e7A3c 密码: ttk2

更新地址:https://github.com/Marko-M/Inchoo_SocialConnect

下载后进行压缩将app和skin两个文件夹中的内容复制到Magento的安装根目录下,登录后台System > Configuration > Customers > Customer Configuration下会出现Social Connect Facebook Options等配置组

社交登录插件后台显示

以Facebook登录为例,若要开启此功能,打开Facebook开发者页面https://developers.facebook.com/,点击导航栏My Apps下的Add a New App,在弹出窗口中选择Website

Facebook中添加网站应用

在新出现的窗口中输入一个标识名称如localtest,点击下面的Create New Facebook App ID按钮

创建Facebook ID

然后在弹出窗口中选择一个分类如Business点击Create App ID

创建新APP ID

在新的页面中输入网址,这里在本地测试使用http://localhost/magento,点击Next

添加网址

此时再点击上面导航中的My Apps就会出现我们所创建的App(这里的名称为localtest),点击进入,就可以获取得App ID和App Secret(点击右边的Show按钮并输入密码验证),将这个两个值分别填入后台中的Facebook App ID和Facebook App Secret然后保存。

获取APP ID和密钥

接下来需要激活这个App,在同一个页面左侧导航中点击Settings然后在Contact Email下输入一个有交的email地址,保存然后点击左侧导航上的Status & Review按钮,此时将Do you want to make this app and all its live features available to the general public?右侧的滑块置为YES便可以在Magento中使用Facebook登录了

激活Facebook APP

 

此时访问http://localhost/magento/index.php/customer/account/login/等页面就会出现Facebook的登录按钮

Facebook登录

常见错误

1.在进行Facebook登录时出现App Not Setup: This app is still in development mode, and you don’t have access to it. Switch to a registered test user or ask an app admin for permissions.报错

这是因为没有激活所创建的App,请参照本节激活步骤

Facebook登录报错

2.集成后出现Unable to Connect to ssl://graph.facebook.com:443. Error #154298408: Unable to find the socket transport “ssl” – did you forget to enable it when you configured PHP?报错

这很明显是由于未开启ssl,以XAMPP为例,打开php.ini文件,并取消如下语句前的分号注释,保存并重启Apache

extension=php_openssl.dll

Linux中为extension=php_openssl.so

 

jQuery UI插件

拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:

$(selector). draggable({options})

options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。

例如,在页面中的<div>元素中添加两个子类<div>,通过与拖曳插件绑定,这两个子类<div>元素只能在外层的父<div>元素中任意拖曳,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用jQuery UI插件draggable绑定了两个子类<div>元素,并将配置对象的“containment”属性值设为“parent”,因此,这两个子类<div>元素只能在外层的父框中实现任意拖曳。

放置插件——droppable

除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:

$(selector).droppable({options})

selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。

例如,在页面中,通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中,同时改变“购物车”的背景色和数量值,如下图所示:

在浏览器中显示的效果:

从图中可以看出,先调用draggable插件任意拖曳“产品区”的元素,然后,调用droppable插件绑定“购物车”中接收元素,当“产品区”元素完全拖曳至“购物车”时,触发定义的drop函数,改变“购物车”中背景色和总数量值。

拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:

$(selector).sortable({options});

selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,

例如,在页面中,通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用sortable插件绑定了<ul>元素,并设置了拖曳时的透明度,因此,<ul>中的各个<li>元素则能指定的透明度进行任意的拖曳排序。

面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:

$(selector).accordion({options});

其中,参数selector为整个面板元素,options参数为方法对应的配置对象。

例如,通过accordion插件展示几个相同区域面板的折叠效果,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于绑定了折叠面板插件,默认为第一个面板的内容为展示状态,点击第二个面板主题时,展示主题对应内容,同时关闭上一个面板内容。

选项卡插件——tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:

$(selector).tabs({options});

selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。

例如,在页面中,添加选项卡的标题和内容元素,并绑定tabs插件,当点击标题时,以选项卡的方式切内容,如下图所示:

在浏览器中显示的效果:

从图中可以看出,在tabs()方法的配置对象中,通过“fx”属性设置了选项卡切换时的效果,“event”属性设置鼠标也可以切换选项卡,因此,当鼠标在移动至两个选项卡标题时,对应内容以动画的效果自动切换。

对话框插件——dialog

对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()confirm()函数的功能,它的调用格式为:

$(selector).dialog({options});

selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

例如,当点击“提交”按钮时,如果文本框中的内容为空,则通过dialog插件弹出提示框,提示输入内容不能为空,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当文本框的内容为空时,调用自定义的sys_Alert函数,在该函数中再调用dialog插件的dialog()方法,弹出带模式的显示信息对话框。

菜单工具插件——menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。

例如,在页面中,通过<ul>元素内联的方式构建一个三层结构的导航菜单,并将最外层<ul>元素通过menu()方法绑定插件,实现导航菜单的功能,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过<ul>内嵌的方式,构建一个三层结构的导航菜单,将<li>元素的class属性值设为“ui-state-disabled”,可将菜单选项置为不可用状态。

微调按钮插件——spinner

微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:

$(selector).spinner({options});

selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。

例如,将页面中的三个输入文本框都与微调插件相绑定,当改变三个文本框值时,对应的<div>元素的背景色也将随之发生变化,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于三个文本框输入元素都绑定微调插件,因此,无论是点击右侧的上下按钮,还是直接在文本框中输入值,都可以改变<div>元素的背景色。

工具提示插件——tooltip

工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。

例如,将三个<a>元素与工具提示插件相绑定,当把鼠标移动在<a>元素内容时,以动画效果弹出对应的提示图片,移出时,图片自动隐藏,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于各个<a>元素都绑定了工具提示插件,因此,将在指定的位置并以动画效果展示各个<a>元素中title属性所对应的内容。

jQuery常用插件

表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:

$(form).validate({options})

其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

例如,当点击表单中的“提交”按钮时,调用validate插件验证用户名输入是否符合规则,并将异常信息显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,在页面中导入了validate插件,当用户在输入框中录入用户名时,自动根据规则进入验证,并显示提示信息,验证成功后,表单才能提交。

表单插件——form

通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:

$(form). ajaxForm ({options})

其中form参数表示表单元素名称,options参数表示调用方法是的配置对象。

例如,在页面中点击“提交”按钮,调用form插件的ajaxForm()方法向服务器发送录入的用户名和密码数据,服务器接收后返回并显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“提交”按钮时,调用form表单插件中的ajaxForm()方法向指定的服务器以ajax方式发送数据,服务器接收后返回并将数据显示。

图片灯箱插件——notesforlightbox

该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当用户点击“我的相册”中某一张图片时,则采用“灯箱”的方式显示选中图片,在显示图片时,还可以切换上下张和自动播放及关闭图片。

图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,在页面中,添加一个被<a>元素包含的图片元素,当在图片元素中移动鼠标时,在图片的右边,将显示放大后的所选区域效果,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当在小图片中移动鼠标时,将调用放大镜插件的jqzoom()方法,在图片的右侧显示与小图片所选区域相同的放大区域,实现放大镜的效果。

cookie插件——cookie

使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:

保存:$.cookie(keyvalue);读取:$.cookie(key),删除:$.cookie(keynull)

其中参数key为保存cookie对象的名称,value为名称对应的cookie值。

例如,当点击“设置”按钮时,如果是“否保存用户名”的复选框为选中状态时,则使用cookie对象保存用户名,否则,删除保存的cookie用户名,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于在点击“设置”按钮时,选择了保存用户名,因此,输入框中的值被cookie保存,下次打开浏览器时,直接获取并显示保存的cookie值。

搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:

$(textbox).autocomplete(urlData,[options]);

其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。

例如,当用户在文本框输入内容时,调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据,显示在文本框下,提示选择,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当文本框与搜索插件相绑定后,输入任意字符时,都将返回与之相匹配的字符串,提示用户选择,文本框在空白双击时,显示全部提示信息。

右键菜单插件——contextmenu

右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:

$(selector).contextmenu(menuId,{options});

Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。

例如,选中页面<textarea>元素,点击右键,弹出插件绑定的快捷菜单,点击菜单中的各个选项,便在页面中显示操作的对应名称。如下图所示:

在浏览器中显示的效果:

从图中可以看出,当文本框与右键菜单通过插件contextmenu()方法绑定后,选中文本框,点击右键时,弹出快捷菜单,点击“新建”选项时,显示操作对应内容。

自定义对象级插件——lifocuscolor插件

自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:

$(Id).focusColor(color)

其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。

例如,在页面中,调用自定义的lifocuscolor插件,自定义<li>元素选中时的背景色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当<ul>元素调用focusColor()方法绑定自定义的插件之后,当鼠标在<li>元素间移动时,显示自定义的背景色。

自定义类级别插件—— twoaddresult

通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:

$.addNum(p1,p2) $.subNum(p1,p2)

上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。

例如,在页面的两个文本框中输入任意数值,点击“计算”按钮调用自定义插件中$.addNum()方法,计算两数值的和并将结果显示在另一文本框中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“计算”按钮时,调用了自定义插件中的$.addNum()方法计算两个文本框中输入数值的和,并将该值显示在另一文本框中。

Magento圣诞雪花插件

雪花圣诞节

一年一度的圣诞购物季即将来临,各个商家都在运筹帷幄,布局这一年中最重要的销售计划。除了精心设计促销、加强各渠道的推广、开发新渠道之外,不管是实体店还是网站都需要添加一些应景的设计,今天就为大家推荐一款针对Magento的雪花插件,可在网站上出现缓缓飘落雪花的效果,配合应景的背景更换和站内设计将更好地突出圣诞节的节日氛围。

演示地址:http://inchoo.net/wp-content/uploads/2011/12/InchooSnowflakes/snow.html

下载地址:Magento圣诞节雪花插件

Magento插件开发-XML模块配置

模块配置主要涉及到两个xml文件:config.xml和system.xml,除了这两个文件外,模型配置信息还有可能保存在下面的文件中:

  • api.xml
  • adminhtml.xml
  • cache.xml
  • widget.xml
  • wsdl.xml
  • wsi.xml
  • convert.xml

下面我们先集中讲解config.xml文件,详细分解步骤如下:

  1. 第一步先在模块下etc内创建config.xml文件
  2. 将下面的代码入config.xml文件:
    
    <?xml version="1.0"?>
    
    <config>
    
    	<modules>
    
    		<Mdg_Giftregistry>
    
    			<version>0.1.0</version>
    
    		</Mdg_Giftregistry>
    
    	</modules>
    
    	<global>
    
    		<models>
    
    			<mdg_giftregistry>
    
    				<class>Mdg_Giftregistry_Model</class>
    
    			</mdg_giftregistry>
    
    		</models>
    
    		<blocks>
    
    			<mdg_giftregistry>
    
    				<class>Mdg_Giftregistry_Block</class>
    
    			</mdg_giftregistry>
    
    		</blocks>
    
    		<helpers>
    
    			<mdg_giftregistry>
    
    				<class>Mdg_Giftregistry_Helper</class>
    
    			</mdg_giftregistry>
    
    		</helpers>
    
    		<resources>
    
    			<mdg_giftregistry_setup>
    
    				<setup>
    
    					<module>Mdg_Giftregistry</module>
    
    				</setup>
    
    			</mdg_giftregistry_setup>
    
    		</resources>
    
    	</global>
    
    </config>
    
    

所有的模块配置都包含在节点内,该节点中包含<global>和<modules>两个节点。<modules>用于指定当前模块版本,用于在后面判断需要运行哪个安装或升级文件。通常使用以下三个主配置节点来指定配置作用域:

  • <global>
  • <adminhtml>
  • <frontend>

这里我们先使用<global>作用域,这样配置将会同时作用于前台以及后台,在<global>节点下,又包含如下节点:

  • <models>
  • <blocks>
  • <helpers>
  • <resources>

从前面的代码可以看出,各个节点基本都采取如下的样式:

<context>

	<factory_alias>

		<class>NameSpace_ModuleName_ClassType</class>

	</factory_alias>

</context>

Magento的工厂类使用每个节点来实例化我们的自定义对象,<factory_alias>节点是我们插件配置中重要部分,<factory_alias>节点被Mage::getModel()或Mage::getHelper()等工厂方法所使用。注意这里我们不是定义具体的模型、块文件或帮助类,而是告诉Magento的工厂类找到这些文件路径。Magento的命名规则使得我们可以在这些文件夹下使用任意的文件夹结构,根据类名Magento可精确地加载对应的类。(注:在Magento中类名和文件夹结构是相对应的。)
比如可以在app/code/local/Mdg/Giftregistry/Models/Folder1/Folder2/Folder3下创建一个新的模型类,从该类中实例化对象使用的工厂名为:

Mage::getModel('mdg_giftregistry/folder1_folder2_folder3_classname')

下面我们来创建一个模型,更确切的说应该是一个helper类,helper中通常包含一些应用方法,这些方法用于一些常用任务可在不同类中共享。首先创建一个空的helper类,后面再添加逻辑代码。我们所创建的Helper类地址为app/code/local/Mdg/Giftregistry/Helper/Data.php,代码如下:

<?php

	class Mdg_Giftregistry_Helper_Data extends Mage_Core_Helper_Abstract(){

	}

?>


将这个Helper类命名为Data可能看上去有些奇怪,但事实上Magento的一个标准就是每个模块都有一个名为Data的helper类。关于helper类另一个比较有意思的方面是只能向工厂方法传递不包含类名的节点,并且默认将指向Data这个helper类。
所以这里如果想要实例化默认的helper类的话,需要运行如下代码:

Mage::helper('mdg_registry');

下一节我们一起来学习有关模型与数据保存相关的知识。

Magento前台开发

前面的章节我们主要集中学习了Magento的相关理论、架构并熟悉日常开中常用和重要的理念。从现在开始,我们将利用所学到的知识和技巧投入实际应用,来不断的创建一个前端插件,礼品登记(Gift Registry)插件。

应用场景

应用场景相当的简单,创建一个Magento插件,允许客户创建礼品登记列表并可将其分享给朋友和家人,并且可以创建多个礼品登记、指定每个列表的接收人。 礼品登记列表包含如下信息:

  • 事件类型
  • 事件名称
  • 事件日期
  • 事件地址
  • 产品列表

功能

插件包含的功能如下:

  • 店铺管理员可以定义多个事件类型(如生日、婚礼和礼品登记等)
  • 创建事件并为每个事件指定多个礼品登记列表
  • 客户可以从购物车 wish list或直接从产品页面将产品加入登记列表
  • 客户可以拥有多个礼品登记列表
  • 客户可通过e-mail或链接将礼品列表分享给朋友和家人
  • 朋友和家人可以从礼品列表中购买商品

功能改进

以下列出的功能列表未有涉及,可能由于太过复杂或是需要用到社交网站的API,同时社交平台也是一直在发生变化的,但有兴趣的读者可以挑战一下自己来进一步扩展此模块:

  • 社交媒体集成
  • 礼品列表可记录请求以及列表中每个商品实现的个数
  • 指定多个不同的列表所有者
  • 列表所有者地址发送

在前面的章节中,我们学到了Magento的代码池(core, community, local),因为我将不会把这个模型放到Magento Connect上,所以代码将会放在local文件夹下。所有的Magento模型都放在软件包或命名空间内,比如所有的Core模型都放在Mage命名空间下,下面我们将使用Magento Developers Guide(MDG)。Magento模型的命名规则是”命名空间_模型名”(Namespace_Modulename)。
下一步我们需要创建模块结构以及配置文件。需要在app/code/local/下创建一个命名空间目录,命名空间可根据个人喜好来选择,比较通用的方法是使用公司名或作者名来作为命名空间。本例中我们第一步需要创建app/code/local/Mdg/目录,我们将会在这个目录下存放礼品登记模块以及今后将要开发的其它模块。
在命名空间目录下,我们还需要创建用于存放所有自定义插件代码的模块名目录,这里将使用Giftregistry,创建完这个目录后,我们再来完善整个目录结构。
注:Magento对于工厂方法驼峰命名(camel-casing)较为敏感,通常对于模块、控制器和动作名不采取驼峰命名法。
在/app/code/local/Mdg/Giftregistry/目录下创建如下目录:
Block/
Controller/
controllers/
Helper/
etc/
Model/
sql/
通过前面的学习我们了解到Magento通过.xml文件来作为配置文件 ,要让Magento识别并激活模块,还需要在app/etc/modules/目录下创建一个xml文件,按照”命名空间_模块名.xml”(Namespace_Modulename.xml)的规范,需创建一个app/etc/modules/Mdg_Giftregistry.xml文件,内容如下:

<?xml version="1.0"?>

<config>

	<modules>

		<Mdg_Giftregistry>

			<active>true</active>

			<codePool>local</codePool>

		</Mdg_Giftregistry >

	</modules>

</config>

创建完上述文件或者今后对模块配置文件进行修改后,需要刷新一下Magento配置缓存,方法是进入Magento后台,点击System > Cache Management,然后点击Flush Magento。事实上由于我们在开发插件,会经常对配置文件和插件代码进行更改,最好禁用缓存。禁用缓存的方法是进入Magento后台,点击System > Cache Management,点击Select All选中所有的缓存类型,然后选择Actions后下拉框中的Disable,最后点击Submit完成提交。
Magento缓存管理
清除完缓存,可进入后台System > Configuration > Advanced查看我们开发的插件是否已被激活。
Magento Gift Registry插件
Magento现在已经知道这一模块的存在,但我们还没有告诉Magento该模块的具体功能是什么,所以下一步需要对模块进行进一步的配置。
下一节我们一起来学习Magento插件开发-XML模块配置的相关内容。