How to create different templates for mobile site.

Suman Jan 10, 2014 05:05AM PST

Hi,

I wants to create different templates for my website using mobify.js.
When i tried created two templates the only the content of first template was visible in both the page.
Suppose i wants to create a service page and a features page,
then mobify.js contains
'content': function(context) {
return context.choose(
{
'templateName': 'home'
, '!link': function(context) {
return $('a[href]').first();
}
, '!routing': function() {
return location.pathname == '/';
}
}, {
'templateName': 'services'
, '!headings': function() {
return $('h1');
}
},


{
'templateName': 'contact'
, '!contact': function(context) {
return $('iframe[src]');
}
}
)
},

Please help me out.

Up -3 rated Down
Jennifer Jan 10, 2014 09:43AM PST Mobify Agent

Hello,

Keys beginning with “!” are required and will be used to determine which template is used. If all of the required keys for a template name return one or more elements, or true then that template will be used for the page. These required keys should look for an element that is unique to that type of page.

If your ‘!headings’ key is the only required key for the services page then any page that does not match the home template and has an <h1> tag will use this services template, and will not use any of the templates listed after it.

For more information, please take a look at this document on Javascript matching.

Thanks,
Jennifer

Up 4 rated Down
Suman Jan 13, 2014 01:20AM PST
Hi Jennifer,

Thanks for your quick reply.
I tried all the things which you have mentioned earlier but no output.
I am getting the same issue.
My site is http://www.triayaam-studio.com
Can you help me out that how i could write the same function for it so that different templates are chosen.

Thanks,
Suman
Up -2 rated Down
Suman Jan 13, 2014 04:22AM PST
HI Jennifer,

Can you also provide me some tutorial links.

Thanks,
Suman

Up 4 rated Down
Jennifer Jan 13, 2014 08:52AM PST Mobify Agent

Hi Suman,

We have some documentation that might help you out. This document about Using Mobify Client should help, as well as our Getting Started with the Mobify Client Guide.

Cheers,
Jennifer

Up 1 rated Down
Suman Jan 15, 2014 03:25AM PST
Hi Jennifer,

Thank for your reply.
I have identified some unique keys for some pages.
If their is page which contains only text content then how we should identify the required keys, so that the required template is loaded. Please explain with some example.

Thanks,
Suman
Up 4 rated Down
Jennifer Jan 15, 2014 10:56AM PST Mobify Agent

Hi Suman,

If there is an HTML element on the page that you know will only appear on that type of page then you can use a Javascript selector in your required key.

For example, if your contact page had an h2 tag with the id “contact-header” you could use the following:

‘!match’ : function() {
return $(‘#contact-header’);
}

You could also check for the text within an h2 tag. If you had a contact page that always had the text “Contact” in the h2 tag (and no other pages had this text in an h2) you could use the following:

‘!match’: function() {
return $(‘h2’).text().indexOf(‘Contact’) > -1;
}

Cheers,
Jennifer

Up -1 rated Down
Suman Jan 15, 2014 09:38PM PST
Hi Jennifer

Thanks for your reply.
But the word "match ". You told me earlier that "Keys beginning with “!” are required".
So match here means what.
Because I have tried it its not working.
The page for which i am trying to implement this is http://www.triayaam-studio.com/services.php.

Thanks,
Suman
Up 0 rated Down
Jennifer Jan 16, 2014 09:53AM PST Mobify Agent

Hi Suman,

match is just an arbitrary name I gave the key. If you look at my answer above you will see that the key is actually ‘!match’, so it starts with the ‘!’ character, meaning it is a required key.

Thanks,
Jennifer

Up 1 rated Down
Suman Jan 19, 2014 10:19PM PST
Hi Jennifer,

As i have told you earlier that its not working.
Instead of mobile page a Desktop page is rendered.

Thanks,
Suman
Up -2 rated Down
Jennifer Jan 20, 2014 09:04AM PST Mobify Agent

Hi Suman,

Sorry to hear that the page isn’t Mobifying correctly. If you can provide some additional information, we might be able to figure out what’s going on.

Can you include an example of the code you are using for the template that’s not working?

Thanks,
Jennifer

Up 1 rated Down
Suman Jan 23, 2014 11:41PM PST
Hi Jennifer,

This is the code which i am trying to mobyfying.

<div class="data">
<div class="dataBox" >
<div class="dataHeading"><h1 id = "service_page">Product Release Teasers</h1></div>
<div class="dataContent" id = "fghjk"><img src="" id ="ser_image" style="display:none;" >Here at triAyaam Studio, we want to showcase your product in a whole new way, capturing its uniqueness in 3D.
With engaging visuals and immersing sound effects, accompanied with the ability of a user to interact with the object, will definitely boost the confidence of buyers in your product.
</div>
</div>
</div>
<div class="data" style="background-color: rgb(245, 245, 245);">
<div class="dataBox">
<div class="dataHeading"><h1>3D Catalogue</h1></div>
<div class="dataContent">A catalogue of all of your products, displaying them in a single page like thumbnail icons with a main 3D viewer window. Clicking on any product icon will give a detailed 3D experience of that product.
The core feature of 3D catalogue is swift loading of 3D models. Models are optimized for fast loading and they take 3 to 7 seconds for loading in most scenarios. This gives buyers a pleasant experience and engages, encourages them to view more products.</br>Three dimensional details of products give buyers more confidence and understanding of the products.
</div>
</div>

</div>

Thanks,
Suman
Up -1 rated Down
Jennifer Jan 24, 2014 09:24AM PST Mobify Agent

Hi Suman,

You could try the following:

‘!match’: function() {
return $(‘#service_page’);
}

That will match pages that contain an element with the id=“service_page”, which is the id you are using for the first header on the page.

Thanks,
Jennifer

Up 3 rated Down
Suman Jan 27, 2014 03:50AM PST
Hi Jennifer,

I have already tried this but its not working.

Thanks,
Suman
Up -3 rated Down
Jennifer Jan 27, 2014 09:09AM PST Mobify Agent

Hi Suman,

This could be for a number of different reason. First of all you’ll need to make sure that you include the template name above your required key. Like this:

‘templateName’: ‘services’
, ‘!headings’: function() {
return $(‘#service_page’);
}

You’ll also need to make sure you have a template file named “services.tmpl” in the tmpl folder in your project. Finally, if there is a required key above this one in your konf that matches the services page, then that template will be used, instead of the services one, so you may need to move the services template code up in your konf.

If that still doesn’t work I would suggest doing some debugging in your konf to find out exactly what’s going on.

Thanks,
Jennifer

Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
support@mobify.me
https://cdn.desk.com/
mobify
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete