PART 1.4.4 – Vaimo CMS

Vaimo CMS includes much more functionality for M2 than for M1. 

 

Layout XML and Vaimo CMS

XML containers to create areas that can be used to insert content. 

Add container

<container name=“vaimo-cms-container” label=“Vaimo CMS container” after=“other-element” />

 

Addons to Vaimo CMS

https://bitbucket.org/vaimo/module-widget-background

 

How to find existing widgets? 

All widgets with their own repositories (that follows the naming convention) can be found by searching for them in bitbucket: https://bitbucket.org/vaimo/profile/repositories?search=module-widget-

Add configurations using js mixin

You can easily add simple settings to Vaimo CMS from your theme. A common use case is where you add classes to elements and can then add styling using less.

<theme_location>/requirejs-config.js

requirejs-config.js

/**

 * Copyright © 2009-2017 Vaimo Group. All rights reserved.

 * See LICENSE.txt for license details.

 **/

 

var config = {

    “map”: {

        “*”: {

            example: “js/example”

        }

    },

 

    config: {

        mixins: {

            “Vaimo_Cms/js/component/content-editor”: {

                “js/mixins/vcms-styles”: true

            }

        }

    }

};

<theme_location>/web/js/mixins/vcms-styles.js

web/js/mixins/vcms-styles.js

/**

 * Copyright © 2009-2017 Vaimo Group. All rights reserved.

 * See LICENSE.txt for license details.

 **/

;define([

    ‘vcms/editor/utils’

], function(utils) {

    ‘use strict’;

 

    var typographyTags = {‘h1’: true, ‘h2’: true, ‘h3’: true, ‘p’: true};

 

    return utils.createWidgetMixin({

        options: {

            styles: {

                //  Typography styles

                ‘text–light’: {

                    label: ‘Light text on dark background’,

                    tags: typographyTags

                },

                ‘text–dark’: {

                    label: ‘Dark text for light backgrounds’,

                    tags: typographyTags

                }

            }

        }

    });

});

Notes

  • Remember to keep naming convention when creating modules, themes and widgets. 
  • encourage other developers to document their widgets in Bitbucket
  • Help improve existing ones – recycling! Ask before creating new modules!
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s