1. Create a New Konf Entry

First, open mobify.konf in your text editor and find the context.choose() function. It should look something like this:

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

In the second line of the above example, notice the reference to the context.choose() function.

Each entry into the choose function contains the code needed to:

  1. Verify which template we're on
  2. Select the content we need for this template.

To add a new template to your project, you will need to add a new entry in the choose function. For example:

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

1a. Add a Required Selector

Now that you have created an entry for your new template, you need to tell the Konf how to determine if the user is on this template or not. You can do that by using a required selector.

How to create a required selector:

  • add a key beginning with the exclamation mark (!)
  • create a function that returns an element that is unique to the page

For example:

...
},{
    'templateName': 'list',
    '!filters': function() {
        return $('.product-filters');
    }
}
...

Since the list template is the only template on the site that contains $('.product-filters') then we know that we must be on the list template.

1b. Make Content Selections

You can now continue to make more content selections on the page. You must select any content that you want to appear on the mobile experience.

For example:

...
},{
    'templateName': 'list',
    '!filters': function() {
        return $('.product-filters');
    },
    'products': function() {
        return $('.products');
    },
    'title': function() {
        return $('h1');
    },
    'banner': function() {
        return $('img.banner');
    }
}
...

2. Create a Template File

Now that you have selected the content you want on mobile, you need to template it onto the final page.

The templateName you defined the konf must match with the template file name.

Since you defined:

'templateName': 'list'

Then you need to create a new file at src/tmpl/list.tmpl

2a. Display Selected Content in Your Template

To display your content on mobile, you must reference the selected content from the Konf in your template file.

For example:

{>root/}

{<main}
    {#content}
        <div class="x-page-title">
            {title}
        </div>

        {banner}
        {filters}
        {products}
    {/content}
{/main}

{<scripts}
    {_SUPER_}
    {%script}

    {/script}
{/scripts}

3. Create a Sass File (Optional)

If your project was initially built by Mobify, then you are using Sass to manage your CSS.

To create a new Sass file for your new template, you will have to create a new file at src/scss/pages/_list.scss

You can now write the CSS for this page in this file:

.x-list {
    .x-page-title {
        font-size: 1.8em;
    }

    .products {
        padding: 10px;
    }

    ...
}

2. Add the Sass File to Your Project

For the CSS you wrote in src/scss/pages/_list.scss to appear on your site, you must now include your new file to the project.

At src/scss/_pages.scss, you will have to add an entry to reference your new Sass file:

@import "pages/home";
@import "pages/product";
@import "pages/list";

Now, your new Sass file will get automatically compiled whenever you make changes to it.

Last Edited