xMobile - Smartphone mobile template

DavyMac · #71 07-21-2013, 12:12 AM

Quote:

Originally Posted by carpeperdiem

I read about the "Vary" header...
https://developers.google.com/webmasters/smartphone-sites/details

Yikes -- we needed this yesterday.

Will, you said in post #51 that you guys were looking in to the "vary" header. Any chance we could have an implementation soon?

carpeperdiem · #72 07-21-2013, 05:05 AM

I was thinking out loud in the xMenus thread...

I wanted to provide more content for my customers (static pages, reviews, etc. but the "quick links" was not sufficient.

My first thought was to use xMenus, but the interface was kludgy for mobile, and it introduced yet another navigation method -- usability experts would say that's bad.

Then I thought, "can I use the existing collapsible class but make a menu of static links?"

Here ya go...

============================
COLLAPSIBLE STATIC MENU for xMobile
============================

1. NAME your new collapsible menu - make a new language entry. In language entires, make a language label (you can call it anything you want):

txs_xmb_static_page_title

Call the 'title' whatever works best for your store.

2. Make a new file:

/skin/txs_xmobile/customer/main/static-pages-list-menu.tpl

(don't forget to set permissions as appropriate)

Code:

{* Static Pages list in collapsible menu for xMobile *}	
<section data-role="collapsible">
	<h3 data-role="collapsible-heading">{$lng.txs_xmb_static_page_title}</h3>
<div data-role="collapsible-content">

{* List of Static Pages HERE *}
	<ul class="list-links">
	  <li><a href="your-static-page-1.html">Your Static Page 1</a></li>
	  <li><a href="your-static-page-2.html">Your Static Page 2</a></li>
	  <li><a href="your-static-page-3.html">Your Static Page 3</a></li>
	</ul>
	
</div>
</section>

3. In file,
/skin/txs_xmobile/customer/main/welcome.tpl

FIND:

Code:

<!-- Section Featured Products Finish -->
	{/if}

AFTER, insert:

Code:

{* Section Collapsible Static Pages Section Begin *}
{include file="customer/main/static-pages-list-menu.tpl"}
{* Section Collapsible Static Pages Section Finish *}

I am probably NOT going to use xMenus in xMobile with this solution.

THE ONLY THING that I am not sure of (from the user experience perspective) -- do I want to put the static page menu on ALL pages, or just home page? The include will need to be adjusted if we want to place this menu on product pages... I will think about that. Forum input is not only welcome, I am asking for it!!!

Would YOU do this differently?

And of course, no pressure to TXS - but this would be a welcome addition to the template module interface in the future -- instead of hard coding the links, idiot-proof the links in the xMobile interface -- but hey, a list of links is not rocket science.

I hope this helps someone.

Jeremy

carpeperdiem · #73 07-21-2013, 05:22 PM

Quote:

Originally Posted by carpeperdiem

do I want to put the static page menu on ALL pages, or just home page?

I think I do.

This is very easy. This will take you 3 minutes...

1. In file,
/skin/txs_xmobile/customer/main/welcome.tpl

FIND:

Code:

<!-- Main Heading Finish -->

CUT/COPY everything below this to a new file. (obviously, you are working on a clone or backups -- common sense, folks)

2. name the new file,

/skin/txs_xmobile/customer/main/collapsible-menus.tpl

and paste the content from #1

3. In file,
/skin/txs_xmobile/customer/content.tpl

FIND:

Code:

{include file="customer/home_main.tpl"}

BELOW, insert:

Code:

{include file="customer/main/collapsible-menus.tpl"}

That's it.
We now have the collapsible menus on all pages, not only home page. I'm gonna play with this and see if my testers like this better.

carpeperdiem · #74 07-21-2013, 06:12 PM

My favorite just-discovered feature of xMobile template:

in file,
/skin/txs_xmobile/customer/quick-links.tpl

Code:

{if $config.Company.company_phone}
<a href="tel:{$config.Company.company_phone}" class="phone">
{$config.Company.company_phone}</a> {/if}

FREAKING BRILLIANT!!!

A phone number, on a phone, should be clickable, to call the number.
DUH!
Pretty obvious stuff... but not to all mobile designers.
Thanks TXS!
I may be able to take this template live very soon now.

carpeperdiem · #75 07-22-2013, 08:56 AM

I have successfully integrated AlteredCart Checkout_One into xMobile, by cloning 2 templates, 1 css file and busting the table from
/skin/txs_xmobile/modules/Checkout_One/checkout_one.tpl
into 1 column -- also adjusted the image paths in the css. Very easy...

Now that checkout works perfectly... I realized the radio buttons in the checkout are not mobile-friendly. At all.

http://www.carpeperdiem.us/xcartforum/uglyradiobuttons.png

I want to do this for the radio buttons:

http://jquerymobile.com/demos/1.2.1/docs/forms/radiobuttons/

http://jquerymobile.com/ ???

1. jquerymobile looks very powerful -- is it worth the overhead, or could we do this with existing jquery?
2. Has anyone made their forms or buttons "pretty" and not using default forms?

I could turn Checkout_One radio buttons off in the admin (or just in the mobile template) - but that's not "pretty" or mobile savvy either. We need mobile-friendly radio buttons.

I'm gonna do some digging. If anyone can save me 10 minutes of reading, I'd sure appreciate it if you can share what your solution is/was/will be.

Thx
Jeremy

cherie · #76 07-22-2013, 10:23 AM

Definitely use label to enlarge the target area, then you can apply styles to it if you want it to look more like a button.

carpeperdiem · #77 07-22-2013, 02:12 PM

I should have tested on more devices before I took my template live...

xMobile is serving to smartphones as it should, but it's also serving to tablets, such as iPad and Kindle Fire. Yikes. That's not the intended behavior, is it?

I opened a ticket with TXS, but it's after hours.
Anyone experienced this and have a fix or workaround?

What file performs the "device test"?

carpeperdiem · #78 07-23-2013, 04:05 AM

Quote:

Originally Posted by carpeperdiem

I opened a ticket with TXS, but it's after hours.
Anyone experienced this and have a fix or workaround?
What file performs the "device test"?

TXS support replied right away this morning (very fast response, thank you!)

The file is
/modules/TXS_XMobile/init.php
and it is an encrypted file -- so I couldn't have edited it if I wanted to.

xMobile now works ONLY on smartphones, but tablets load to the primary skin if using the edited init.php

That's how I thought this module was originally set up? I guess I misunderstood the specs. "smartphone" is mentioned over and over, and "tablet", never. SO I assumed. Silly me.

ROLL CALL: xMobile users - how many of you WANT tablets to be served xMobile pages vs. ONLY smartphones?

Thank you again to TXS support for solving this quickly.

DavyMac · #79 07-23-2013, 04:19 AM

Quote:

Originally Posted by carpeperdiem

ROLL CALL: xMobile users - how many of you WANT tablets to be served xMobile pages vs. ONLY smartphones?

Not me! We need the xmobile template to appear only on smartphones. Tablets should be served by the desktop template.

carpeperdiem · #80 07-23-2013, 04:49 AM

This may be useful to xMobile users:

http://mobitest.akamai.com/

HTH
J