Overview

The Konf is a JavaScript file required by every Mobify Design Suite project. In the default project scaffold it lives at src/mobify.konf. It controls how the page is adapted for different devices and is responsible for selecting elements from the source DOM, picking a template and rendering the output to the browser.

Where is my Mobify.js file?

In development, mobify.js is automatically generated on demand. A compiled mobify.js file will be generated when running mobify push and sent to Mobify Cloud.

The final mobify.js file consists of:

  • Zepto.js: our JavaScript library
  • Dust.js: our templating engine
  • mobify.konf
  • template files

Content Selection

The basic idea behind Mobify Design Suite is that you can select on content from the desktop HTML and create a mobile-friendly page using that selected content.

If a snippet of your desktop HTML looks like this:

DESKTOP HTML:

<form id="search">
    <input type="submit" value="Send" />
</form>

You can select this form in the konf like this:

Note: We use Zepto, a mostly jQuery-compatible API, so if you have used jQuery before, Zepto code should look familiar. (Official Zepto Documentation)

KONF:

'search': function(context) {
    return $('form#search');
}

This saves out the form in a key called search. Once this has been saved out in the konf, you can output it in a template.

Note: You can only select content that is available in the View Source view of your desktop HTML. Content that is created via JavaScript is not selectable in the konf.

TEMPLATE:

<div class="search">
    {search}
</div>

The final HTML that will get output will be:

MOBILE HTML:

<div class="search">
    <form id="search">
        <input type="submit" value="Send" />
    </form>
</div>

Tip 1: If your content selection isn't working, check View Source

Important: You can only select content that is available on page load. Elements created by JavaScript cannot be selected in the konf. When choosing selectors, make sure that the content exists when you View Source that page.

Tip 2: Be careful when selecting on attributes

Mobify Design Suite rewrites some attributes before the HTML is available to you in the konf. These substitutions prevent accidental resource loading.

For example, let's say that this image is on your site:

DESKTOP HTML:

<img src="logo.png" />

If you wanted to select it using the src attribute, you would instead need to use x-src.

KONF:

'logo': function(context) {
    return $('img[x-src="logo.png"]');
}

When templating this out on mobile, Mobify Design Suite will automatically rewrite the x-src attribute back to src so that the image will display when rendered.

OUTPUT HTML:

<img src="logo.png" />

Here is a list of attributes that get rewritten on mobile:

  • <img>

    • src -> x-src
    • height -> x-height
    • width -> x-width
  • <script>

    • href -> x-href
  • <link>

    • href -> x-href

Anatomy Of A Template

The bulk of the konf is in the choose function. This function defines all the templates that exist for your mobile site and the content that should be extracted for each template.

'content': function(context) {
    return context.choose({
        'templateName': 'home',
        '!banner': function() {
            return $('#home-banner');
        },
        ...
    },{
        'templateName': 'product',
        '!image': function() {
            return $('#product-image');
        }
        ...
    }
}

Template Name

The first part of a template definition is the template name. This is a string defined in the konf and must be carried throughout the project. In particular, it must match in a few other places:

  • template file: tmpl/_<templateName>.tmpl
  • Sass file: scss/pages/_<templateName>.scss

Required Selectors

  • We use required selectors to determine what template we are currently on.
  • Required selectors are denoted by preceding the key with an exclamation point (!).

For example:

KONF:

templateName': 'product',
'!image': function() {
    return $('#product-image');
}

In this example, if #product-image exists on the page, then we know we are on the product template.

Required selectors are tested starting from the top of the choose function to the bottom. Order matters, because the first match ends the search.


Context Variable

You can use context.data('key') to refer to previously selected content.

For example:

'productDetails': function(context) {
    return $('.product-detail');
},
'price': function(context) {
    return context.data('productDetails').find('.price');
}

In the price function, we are looking inside of the productDetails selection and finding .price inside it. It is essentially equivalent to:

'price': function(context) {
    return $('.product-detail .price');
}

Global Selections

Selections made inside of each block of the choose function are only made on the defined template. Outside of the choose function, selections are global, run on every Mobified template of the site.

'stylesheet': function(context) {
    return $('link[rel="stylesheet"]').remove()
}

The stylesheet function removes all desktop stylesheets from the page. Because this does not live inside of the choose function, this occurs on all Mobified pages.

Last Edited