NopCommerce 根据手机浏览器和桌面浏览器切换 Theme

自从 NopCommerce 升级到 3.x 以来，默认的 ViewName.Mobile.cshtml 方式就被响应式的默认 Theme 取代了。

但是在今天各种手机专用前端库大行其道的情况下，响应式主题在手机端上的体验并不好，与专门制作的手机版页面相比显得傻大笨粗。所以如果是一个投入比较大的 NopCommerce 电商网站，比较完美的办法是同时制作 PC 和手机网站 Theme，然后依据用户浏览时所使用的浏览器自动切换。

实现 NopCommerce Theme 依据用户浏览器自动切换需要对 NopCommerce 的代码做如下修改（基于 NopCommerce 3.7）：

1. 为 UserAgentHelper 增加判断是否移动设备的方法

修改 Nop.Services.Helpers.IUserAgentHelper 接口添加如下方法声明：

bool IsMobileDevice();

修改 Nop.Services.Helpers.UserAgentHelper 类添加 IsMobileDevice() 方法的实现代码：

        public virtual bool IsMobileDevice()
        {
            bool isTablet = false;
            if (bool.TryParse(_httpContext.Request.Browser["IsTablet"], out isTablet) && isTablet)
            {
                return false;
            }

            var userAgent = _httpContext.Request.UserAgent.ToLowerInvariant();
            //微信浏览器的 UA 为 “micromessenger”
            if (_httpContext.Request.Browser.IsMobileDevice || userAgent.Contains("micromessenger"))
            {
                return true;
            }

            return false;
        }

2. 修改 ThemeContext 类添加主题根据是否移动浏览器切换的功能：

以下是完整的修改后 Nop.Web.Framework.Themes.ThemeContext 类：

using System;
using System.Linq;
using Nop.Core;
using Nop.Core.Domain;
using Nop.Core.Domain.Customers;
using Nop.Services.Common;
using Nop.Services.Helpers;

namespace Nop.Web.Framework.Themes
{
    /// <summary>
    /// Theme context
    /// </summary>
    public partial class ThemeContext : IThemeContext
    {
        private readonly IWorkContext _workContext;
        private readonly IStoreContext _storeContext;
        private readonly IGenericAttributeService _genericAttributeService;
        private readonly StoreInformationSettings _storeInformationSettings;
        private readonly IThemeProvider _themeProvider;
        private readonly IUserAgentHelper _userAgentHelper;

        private bool _themeIsCached;
        private string _cachedThemeName;

        public ThemeContext(IWorkContext workContext,
            IStoreContext storeContext,
            IGenericAttributeService genericAttributeService,
            StoreInformationSettings storeInformationSettings,
            IUserAgentHelper userAgentHelper,
            IThemeProvider themeProvider)
        {
            this._workContext = workContext;
            this._storeContext = storeContext;
            this._genericAttributeService = genericAttributeService;
            this._storeInformationSettings = storeInformationSettings;
            this._themeProvider = themeProvider;
            this._userAgentHelper = userAgentHelper;
        }

        /// <summary>
        /// Get or set current theme system name
        /// </summary>
        public string WorkingThemeName
        {
            get
            {
                if (_themeIsCached)
                    return _cachedThemeName;

                string theme = "";
                /*
                if (_storeInformationSettings.AllowCustomerToSelectTheme)
                {
                    if (_workContext.CurrentCustomer != null)
                        theme = _workContext.CurrentCustomer.GetAttribute<string>(SystemCustomerAttributeNames.WorkingThemeName, _genericAttributeService, _storeContext.CurrentStore.Id);
                }
                */

                if (this._userAgentHelper.IsMobileDevice())
                {
                    theme = "你的手机版 Theme 名称";
                }//default store theme
                if (string.IsNullOrEmpty(theme))
                    theme = _storeInformationSettings.DefaultStoreTheme;

                //ensure that theme exists
                if (!_themeProvider.ThemeConfigurationExists(theme))
                {
                    var themeInstance = _themeProvider.GetThemeConfigurations()
                        .FirstOrDefault();
                    if (themeInstance == null)
                        throw new Exception("No theme could be loaded");
                    theme = themeInstance.ThemeName;
                }

                //cache theme
                this._cachedThemeName = theme;
                this._themeIsCached = true;
                return theme;
            }
            set
            {
                if (!_storeInformationSettings.AllowCustomerToSelectTheme)
                    return;

                if (_workContext.CurrentCustomer == null)
                    return;

                _genericAttributeService.SaveAttribute(_workContext.CurrentCustomer, SystemCustomerAttributeNames.WorkingThemeName, value, _storeContext.CurrentStore.Id);

                //clear cache
                this._themeIsCached = false;
            }
        }
    }
}

注意代码中

theme = "你的手机版 Theme 名称";

一行，这里的字符串修改为你的手机 Theme 的名称，也就是 Theme 的文件夹名。

修改完成以后，默认的桌面浏览器 Theme 将使用后台设置的主题，一旦检测到移动浏览器则使用代码里手机浏览器 Theme。

这里我们把手机 Theme 名称写死了，当然更好的办法是修改后台增加一个手机 Theme 的设置，不过那个需要修改的就代码就比较多了，各位读者可以自行实现。