Movie Web Site

[mtrujillo86]

We were hard at work for the past several months migrating from znode/custom php to having our web site on a single platform. Ablecommerce has been extremely flexible and open, we have been able to accomplish great things with ablecommerce.

We integrated our movie ticketing with checkout functions, our mobile site, our showtimes and all pages are inside the ablecommerce cms/scriptlet center(even our mobile site).

We created a load balanced environment using Microsofts Application Request Routing & Web Server Farm Framework. Ablecommerce is definitely an enterprise solution.

Check it out, all of it is running on ablecommerce!

www.megaplextheatres.com
www.megaplextheatres.com/store
www.megaplextheatres.com/m (mobile site)

[Odettes]

Whoow man!

It looks really great, well done!
I'm also going to include a mobile version of my site and I'm curious of how the best approach to do that with Ablecommerce.
Can you give me some hint in the right direction?

[mtrujillo86]

Yes definitely, this is what we did:

Created a new theme for Mobile.

We created a new layout for scriptlets:

/layouts/mScriptlet.master

We created a new layout for Custom Content Pages:
/layouts/webpages/mWebpage.master
/layouts/webpages/BlankMobile.aspx

I believe we created /M-Default.aspx, set the master to /layouts/mscriptlet.master. Set the content to a few scriplets.

Then any custom pages we do, we select the template BlankMobile.

This way the html code and css are completely separate from your other themes/sites. This allows you to use the HTML 5 declaration tag.

[Odettes]

Thanks for that info, but what about the mobile detection part?
Do you use some 3-part software for that or do you have your own detection algorithm?
I have looked at the 51Degrees light version - http://51degrees.codeplex.com/

[mtrujillo86]

We created a custom class where we just manually add the browser agent information. You could add an admin page to manage this or hard code it like we did. We have it in a different .dll so that we can just upload this separately from the rest of the site if we need to update them.

public static class MobileDetection
{
private static string _isMobileURL_Pattern = "^(/M-.*|/Checkout/M-.*|/.*\\.js|/.*\\.css|/.*\\.jpg|/.*\\.png|/.*\\.gif|/.*\\.axd.*|/.*\\.js|/.*\\.asmx.*)$";
private static List<DetectionRule> _rules = new List<DetectionRule>(new DetectionRule[]
{
new DetectionRule{MobileUserAgentPattern = ".*ipod.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*iphone.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*android.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*opera mini.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*blackberry.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = "/(pre\\/|palm os|palm|hiptop|avantgo|fennec|plucker|xiino|blazer|elaine)/i", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = "/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = "/(mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|psp|treo)/i", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*text\\/vnd\\.wap\\.wml\\.*", RedirectURL = "~/M-Default.aspx"}
});

public static List<DetectionRule> MobileDetectionRules { get { return _rules; } set { _rules = value; } }
public static bool FullSiteEnabled
{
get
{
return HttpContext.Current.Request.Cookies["enableFullSite"] != null;
}
}

/// <summary>
/// Returns whether or not the user should be redirected.
/// </summary>
/// <returns></returns>
public static IsMobileRedirectResult IsMobileRedirect()
{
return IsMobileRedirect(HttpContext.Current.Request.UserAgent, HttpContext.Current.Request.Url.AbsolutePath);
}

/// <summary>
/// Returns whether or not the user is on a mobile device.
/// </summary>
/// <returns></returns>
public static IsMobileRedirectResult IsMobile()
{
return IsMobileUserAgent(HttpContext.Current.Request.UserAgent);
}

/// <summary>
/// Returns whether or not the user agent belongs to a mobile device.
/// </summary>
/// <param name="UserAgent"></param>
/// <returns></returns>
public static IsMobileRedirectResult IsMobileUserAgent(string UserAgent)
{
UserAgent = UserAgent == null ? string.Empty : UserAgent.ToLower();
DetectionRule triggeredRule =
MobileDetectionRules.FirstOrDefault(d => Regex.IsMatch(UserAgent, d.MobileUserAgentPattern));
return new IsMobileRedirectResult
{
IsMobile = triggeredRule != null,
TriggeredDetectionRule = triggeredRule
};
}

/// <summary>
/// Returns whether or not to redirect the user.
/// </summary>
/// <param name="UserAgent"></param>
/// <param name="RequestURL"></param>
/// <returns></returns>
public static IsMobileRedirectResult IsMobileRedirect(string UserAgent, string RequestURL)
{
IsMobileRedirectResult triggeredRule = IsMobileUserAgent(UserAgent);
triggeredRule.IsRedirect = triggeredRule.IsMobile
&& !Regex.IsMatch(RequestURL, _isMobileURL_Pattern)
&& !FullSiteEnabled;
return triggeredRule;
}

#region Data classes
public class IsMobileRedirectResult
{
public bool IsMobile { get; set; }
public bool IsRedirect { get; set; }
public DetectionRule TriggeredDetectionRule { get; set; }
}

public class DetectionRule
{
public string MobileUserAgentPattern { get; set; }
public string RedirectURL { get; set; }
}
#endregion
}

[Odettes]

Nice!
Thanks for sharing this, I will give it a try!

Regards, Thomas

We created a custom class where we just manually add the browser agent information. You could add an admin page to manage this or hard code it like we did. We have it in a different .dll so that we can just upload this separately from the rest of the site if we need to update them.

public static class MobileDetection
{
private static string _isMobileURL_Pattern = "^(/M-.*|/Checkout/M-.*|/.*\\.js|/.*\\.css|/.*\\.jpg|/.*\\.png|/.*\\.gif|/.*\\.axd.*|/.*\\.js|/.*\\.asmx.*)$";
private static List<DetectionRule> _rules = new List<DetectionRule>(new DetectionRule[]
{
new DetectionRule{MobileUserAgentPattern = ".*ipod.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*iphone.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*android.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*opera mini.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*blackberry.*", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = "/(pre\\/|palm os|palm|hiptop|avantgo|fennec|plucker|xiino|blazer|elaine)/i", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = "/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = "/(mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|psp|treo)/i", RedirectURL = "~/M-Default.aspx"},
new DetectionRule{MobileUserAgentPattern = ".*text\\/vnd\\.wap\\.wml\\.*", RedirectURL = "~/M-Default.aspx"}
});

public static List<DetectionRule> MobileDetectionRules { get { return _rules; } set { _rules = value; } }
public static bool FullSiteEnabled
{
get
{
return HttpContext.Current.Request.Cookies["enableFullSite"] != null;
}
}

/// <summary>
/// Returns whether or not the user should be redirected.
/// </summary>
/// <returns></returns>
public static IsMobileRedirectResult IsMobileRedirect()
{
return IsMobileRedirect(HttpContext.Current.Request.UserAgent, HttpContext.Current.Request.Url.AbsolutePath);
}

/// <summary>
/// Returns whether or not the user is on a mobile device.
/// </summary>
/// <returns></returns>
public static IsMobileRedirectResult IsMobile()
{
return IsMobileUserAgent(HttpContext.Current.Request.UserAgent);
}

/// <summary>
/// Returns whether or not the user agent belongs to a mobile device.
/// </summary>
/// <param name="UserAgent"></param>
/// <returns></returns>
public static IsMobileRedirectResult IsMobileUserAgent(string UserAgent)
{
UserAgent = UserAgent == null ? string.Empty : UserAgent.ToLower();
DetectionRule triggeredRule =
MobileDetectionRules.FirstOrDefault(d => Regex.IsMatch(UserAgent, d.MobileUserAgentPattern));
return new IsMobileRedirectResult
{
IsMobile = triggeredRule != null,
TriggeredDetectionRule = triggeredRule
};
}

/// <summary>
/// Returns whether or not to redirect the user.
/// </summary>
/// <param name="UserAgent"></param>
/// <param name="RequestURL"></param>
/// <returns></returns>
public static IsMobileRedirectResult IsMobileRedirect(string UserAgent, string RequestURL)
{
IsMobileRedirectResult triggeredRule = IsMobileUserAgent(UserAgent);
triggeredRule.IsRedirect = triggeredRule.IsMobile
&& !Regex.IsMatch(RequestURL, _isMobileURL_Pattern)
&& !FullSiteEnabled;
return triggeredRule;
}

#region Data classes
public class IsMobileRedirectResult
{
public bool IsMobile { get; set; }
public bool IsRedirect { get; set; }
public DetectionRule TriggeredDetectionRule { get; set; }
}

public class DetectionRule
{
public string MobileUserAgentPattern { get; set; }
public string RedirectURL { get; set; }
}
#endregion
}