Switching to 桌面 When Using 设计例外s for a Custom 移动 Theme
Switching to 桌面 When Using 设计例外s for a Custom 移动 Theme

Switching to 桌面 When Using 设计例外s for a Custom 移动 Theme

2013年12月5日发布 in 发展历程
4个方便的Magento特色您’大概不使用
2013年11月13日
尖端的电子商务支付—在您的Magento商店接受比特币
2013年12月18日

在电子商务的领导者中,众所周知,移动设备越来越多地包含很大一部分网络流量,这是不容忽视的。的 电子商务季刊 由Monetate报告,平板电脑和智能手机占>2013年上半年,美国所有电子商务流量中的21%,而两年前仅为2%。这些用户需要为他们设计的体验。一种使他们能够在需要时获得所需东西的东西,而不必处理麻烦的麻烦(以及情感上的痛苦),因为麻烦的是,在屏幕上以一个只有一个大小的屏幕为中心的混乱设计’的手掌。输入移动友好的网页设计!

有关: 详细了解我们的 电子商务网站开发 服务。

 

有两种广泛接受的吸引移动设备用户的方式:响应式设计和针对性设计(即拥有独立的台式机和移动站点的做法)。使用响应式设计有许多优点。它也是 有缺点…针对性的设计也是如此,就像通常很难维护特征奇偶校验一样。

好的,因此您需要一个快速移动的网站。你不’不想对现有的以桌面为中心的设计进行品牌重塑,重建或冒险。或者也许’您需要在明年计划的事情’预算-您决定建立一个可更好地为您的移动客户提供服务的移动网站,而无需更改现有的以桌面为中心的设计。

在Magento上实现移动网站不会’不必辛苦,Ma​​gento包括一个现成的,也可以在 连接.

为移动设备打开此功能非常简单。只是不要’别忘了,您仍然需要将备用橙色更改为适合您品牌的颜色……除非您只是喜欢橙色,那么您可以保留它!您可以通过导航到系统-在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文件中,有关于如何使用它的完整说明。不过,从本质上讲,只需要安装小模块,然后将以下代码段插入网站的页脚即可:

的PHP
1
<a href="<?php 回声 法师::帮手('cls_designswitcher')->getMobileToDesktopUrl() ?>">视图 桌面 现场</a>

我们越来越多地看到对响应式设计的需求,但是仍然收到很多关于建立一个单独的移动站点的大量请求,因此我希望这对您中的某些人会有用。欢迎提供反馈,问题/意见!或者,如果您需要一个移动网站(或响应式设计),请通过我们的专线与我们联系 联系页面.

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.

最近的帖子查看全部
2020年10月22日
通过 阿什莉·科利弗 商业见解, 优雅的骆马 2020年10月22日
毫无疑问,2020年是历史性的一年。火灾,全球大流行,暴动,老虎王等’只是冰山一角。如 […]