在电子商务的领导者中,众所周知,移动设备越来越多地包含很大一部分网络流量,这是不容忽视的。的 电子商务季刊 由Monetate报告,平板电脑和智能手机占>2013年上半年,美国所有电子商务流量中的21%,而两年前仅为2%。这些用户需要为他们设计的体验。一种使他们能够在需要时获得所需东西的东西,而不必处理麻烦的麻烦(以及情感上的痛苦),因为麻烦的是,在屏幕上以一个只有一个大小的屏幕为中心的混乱设计’的手掌。输入移动友好的网页设计!
有两种广泛接受的吸引移动设备用户的方式:响应式设计和针对性设计(即拥有独立的台式机和移动站点的做法)。使用响应式设计有许多优点。它也是 有缺点…针对性的设计也是如此,就像通常很难维护特征奇偶校验一样。
好的,因此您需要一个快速移动的网站。你不’不想对现有的以桌面为中心的设计进行品牌重塑,重建或冒险。或者也许’您需要在明年计划的事情’预算-您决定建立一个可更好地为您的移动客户提供服务的移动网站,而无需更改现有的以桌面为中心的设计。
在Magento上实现移动网站不会’不必辛苦,Magento包括一个现成的,也可以在 连接.
为移动设备打开此功能非常简单。只是不要’别忘了,您仍然需要将备用橙色更改为适合您品牌的颜色……除非您只是喜欢橙色,那么您可以保留它!您可以通过导航到系统-在Magento管理员中进行设置-> Configuration ->设计和设置“Design Exception”—即您告诉Magento您想为具有与给定RegEx模式匹配的用户代理字符串的浏览器应用什么主题。一种常用的模式是这种模式:
1 |
苹果手机|iPod|黑莓|棕榈|Googlebot-移动|移动|移动|摩比|视窗 移动|苹果浏览器 移动|安卓|歌剧 微型 |
另一个常见的用法是使用上面的方法,但是“Mobile”从匹配的用户代理字符串列表中排除,因此iPad会(如Apple 暗示)仍投放桌面主题。
有了这种方法,看看如何’在网站的移动版和桌面版之间拥有完全不同的功能非常容易,’听到类似的声音并不少见,“It’简单而美丽,但我可以’如果需要,请切换到桌面视图。”
不幸的是,无法从移动设备切换到桌面主题 不支持 现成的iPhone主题。但是,这绝对是可能的,而且并非很难做到!
由于站点实际上是在相同的URL上运行,并基于用户代理提供不同的主题,因此此处的技术是利用Cookie覆盖设计异常并阻止其被应用。在实现了许多移动网站之后,我们将一个小模块组合在一起,以允许将这种行为添加到移动主题中,并完整支持企业版’s FPC.
关键功能是如此简单:重写core / design_package模型并重写方法以在允许应用设计异常之前检查cookie:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
类 CLS_DesignSwitcher_Model_Core_Design_Package 延伸 Mage_Core_Model_Design_Package { / ** *从配置中获取正则表达式规则,并对照它们检查用户代理。我们覆盖到 *根据cookie的存在来确定是否应忽略设计异常。 * * @param字符串$ regexpsConfigPath * @返回混合 * @请参阅Mage_Core_Model_Design_Package * / 受保护的 功能 _checkUserAgentAgainstRegexps($regexpsConfigPath) { $ignoreException = 空值; 如果 (isset($_曲奇饼[CLS_DesignSwitcher_Helper_Data::FULL_SITE_COOKIE])) { $ignoreException = $_曲奇饼[CLS_DesignSwitcher_Helper_Data::FULL_SITE_COOKIE]; } 返回 $ignoreException ? 假 : 父母::_checkUserAgentAgainstRegexps($regexpsConfigPath); } } |
I’不会在博客上发布整个源代码,但是您可以获取副本 来自GitHub。在随附的README文件中,有关于如何使用它的完整说明。不过,从本质上讲,只需要安装小模块,然后将以下代码段插入网站的页脚即可:
1 |
<a href="<?php 回声 法师::帮手('cls_designswitcher')->getMobileToDesktopUrl() ?>">视图 桌面 现场</a> |
我们越来越多地看到对响应式设计的需求,但是仍然收到很多关于建立一个单独的移动站点的大量请求,因此我希望这对您中的某些人会有用。欢迎提供反馈,问题/意见!或者,如果您需要一个移动网站(或响应式设计),请通过我们的专线与我们联系 联系页面.
该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.