Send mobil browsers to different themed pages

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
crazyjoe
Commander (CMDR)
Commander (CMDR)
Posts: 172
Joined: Mon Apr 26, 2010 2:20 pm

Send mobil browsers to different themed pages

Post by crazyjoe » Mon May 10, 2010 1:46 pm

I'd like to redirect mobile browsers to pages with a theme that I've created to work best on smart phones. Is there a way I can do this? Normal visitors would view my site as it is, but if you load my page on a smart phone you should be redirected to pages with a different theme. The mobile visitors will view the same products and the orders should go into the same admin and everything, but the pages would render in a different theme. Is there a way to easily do this?
Crazy Joe Sadloski
Webmaster
Hot Leathers Inc.
http://www.hotleathers.com

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Send mobil browsers to different themed pages

Post by mazhar » Tue May 11, 2010 7:08 am

You can change theme through code like

Code: Select all

protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Request.Browser["IsMobileDevice"] == "true")
        {
            Page.Theme = "mobile theme name";
        }
    }
You need to place this in code of every page. I guess you can give a try by placing it in master pages under Website/Layout folder so you don't need to update every page.

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Send mobil browsers to different themed pages

Post by dappy2 » Tue May 11, 2010 12:31 pm

This didn't work at all in the iPhone simulator.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Send mobil browsers to different themed pages

Post by mazhar » Tue May 11, 2010 12:34 pm

Try some debugging and make sure this if is getting executed and code is trying to set theme accordingly. I am not sure about browser check. This was picked by doing some Googling, I haven't tried it my self.


crazyjoe
Commander (CMDR)
Commander (CMDR)
Posts: 172
Joined: Mon Apr 26, 2010 2:20 pm

Re: Send mobil browsers to different themed pages

Post by crazyjoe » Wed May 12, 2010 7:46 am

Hey Dappy, did that MDBF make this work for you?
Crazy Joe Sadloski
Webmaster
Hot Leathers Inc.
http://www.hotleathers.com

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Send mobil browsers to different themed pages

Post by dappy2 » Wed May 12, 2010 8:33 am

Yes, it loaded a different theme on my iPhone. However, it DID NOT work on the iPhone Simulator which was weird. It also doesn't work on the masterpages, the code had to be on Default.aspx for instance.

Unfortunately, the trouble with merely switching themes is the same HTML, Conlibs etc are used - meaning there could be spots where items are difficult to control due to the table layouts. I've taken alot of the tables out of my AbleCommerce install so I'm going to attempt to see what I can do sometime. I'm thinking about creating a menu like the espn mobile site (which is a great iPhone site).

This just checked for iPhone. Another feature was just to see if it was a touchscreen phone so they would all get a nice "finger friendly" layout.

Code: Select all

<script runat="server">
protected void Page_PreInit(object sender, EventArgs e)
    {
        String whatOS = Request.Browser.Platform;
        if (whatOS == "iPhone OS")
        {
            Page.Theme = "Theme Name Here";
        }
    }
</script>
Edit: Mazhar - is there a method for setting Store.Theme or something similar instead of individual pages?
Dappy

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Send mobil browsers to different themed pages

Post by dappy2 » Wed May 19, 2010 11:57 am

Is there a way to set the ScriptletPart content (header, footer, leftsidebar etc) values via code?

For instance:

Code: Select all

<cb:ScriptletPart ID="HomePage" runat="server" Layout="Three Column" Content="Home Page" LeftSidebar="Standard Sidebar 1" RightSidebar="Standard Sidebar 2" Header="Standard Header" Footer="Standard Footer" Title="Home Page" AllowClose="False" AllowMinimize="false" />


If it is a certain browser or platform, I'd want to always set the header, footer & LeftSideBar to a different value than what the page specifies.

I can use the ScriptletPart object and Intellisense gives me the header but I get object not set error.
For the code above:

Code: Select all

HomePage.Header = "Different File";
Works in code, but errors on runtime.

MarcD
Ensign (ENS)
Ensign (ENS)
Posts: 7
Joined: Mon Aug 11, 2008 10:26 am

Re: Send mobil browsers to different themed pages

Post by MarcD » Tue Aug 03, 2010 11:50 am

We are currently working on our theme as well to support Mobile browsers. Did anyone reach a resolution on the best way to resolve detecting the browser and display the correct formatted content?

User avatar
compunerdy
Admiral (ADM)
Admiral (ADM)
Posts: 1283
Joined: Sun Nov 18, 2007 3:55 pm

Re: Send mobil browsers to different themed pages

Post by compunerdy » Tue Oct 26, 2010 10:08 pm

I am interested in this if anyone gets it to work.

Post Reply