Home / Mobify / Mobify Page Creation & Mobify Deployment on Cloud
Mobify

Mobify Page Creation & Mobify Deployment on Cloud

In this chapter, we will be having a code walkthrough of Mobify.

For making the desktop site mobified, we need to purchase the Mobify platform subscription then you will get mobify.js tag, need to add the Mobify.js tag in the head tag immediately after opening <head> tag on the website.

When any request for your website will be there the Mobify.js tag from head will check for the request agent & if it is device then will forward the request to the Mobify server. On Mobify server handles the request & converts the HTML Dom into the device adaptable/responsive UI design.

The mobify.konf file is a JS file, which is responsible for selecting the elements from the html dom. The Mobify application captures the HTML Dom objects &mobify.konf file selects the elements from it.

Mobify.konf file by default contains header, content, script, outputhtml sections inside <konf> tag.

‘OUTPUTHTML’ section returns the modified DOM to the browser. It is recommended not to change anything from this section unless you know what you are doing.

‘StyleSheet’section code is removing all the stylesheets related to HTML Dom. For Mobify application we can write style sheet in style.css file. This section can be removed. Likewise ‘Script &header’ section also can be removed or updated.

        ‘stylesheet’: function() {
         return $(‘link[rel=”stylesheet”]’).remove();
         },

For creating new page in Mobify create a copy of any tmpl template e.g. home.tmpl& rename it e.g. mypage.tmpl. In ‘Content’ section inside ‘return context.choose’ create the selector which should be unique. Code will look like below for mypage template.

       ‘content’: function(context) {
returncontext.choose(
{
‘templateName’: ‘home’ , ‘!firstp’: function() { return $(‘p’).first().text() || “Could not find the first paragraph text         in your page”;
}
}
,{
‘templateName’: ‘mypage’
, ‘!phonenumber’: function() {
return $(‘.selector_for_phone_number’);
}
}
)
},

context.choose accepts multiple number of objects as an argument & executes the first one that matches.

Tmpl page will look like below
Untitled Mobify Page Creation & Mobify Deployment on Cloud Mobify

We can write the JavaScript code on the tmpl page to handle client side request.

The sections can be used for multiple pages like header, you can create footer section at global level.

For publishing & deploying the Mobify application, please go through following points

  • Log In To Mobify Cloud (URL: https://cloud.mobify.com )
  • Click on the Projects Dropdown & select “MyProject” as a project.
  • Copy the command from site “mobify push –message “Bundle Message” to the command prompt. Enter Username & API Key.

Note*: Stop the local mobify command from command prompt for publishing build.

  • Visit the Url https://preview.mobify.com/ , enter the Site URL & Bundle Location (//cdn.mobify.com/sites/myproject/bundles/01/) & preview.

The response will be from the Mobify server where code is hosted.

For Mobify documentation & references please visit below link.

About Helpservices

About This site (allhelpservices.com) is dedicated to helping other bloggers learn the skills of blogging, wordpress, education, technology, social media sharing , SEO, Electronics, Earn Money From Blogging, Web hosting and web share their own experiences and promote the blogging medium. We started Allhelpservices in August 2015 mainly because we wanted to keep a record of what we wear learning from development and because we wanted to connect with other learners.

2 comments

  1. Acheter Sac Longchamp Pas Cher

    A fascinating discussion is definitely worth comment.
    I think that you ought to publish more about this subject matter,
    it might not be a taboo subject but generally people don’t discuss such subjects.
    To the next! Best wishes!!|

  2. Sac Longchamp Blanche France

    I wanted to thank you for this fantastic read!! I absolutely
    loved every little bit of it. I have got you bookmarked to check out new stuff you post|

Leave a Reply