We’re creating examples to help you get a feel for Mobify.js. Watch this space for more in the near future.

All code is available on Github: github.com/mobify/mobifyjs-demos

Demo Site - demostore.mobify.com

Uncle Merlin’s Discount Potions is a Magento store that uses Mobify.js to provide an optimized view for mobile devices.

Running the Code:

  • Download the code from GitHub

  • Unzip the code, navigate to the demostore directory and run development server:

      cd demostore
      mobify preview
  • Browse to preview.mobify.com to instruct the Mobify.js tag to load the Mobify.js file from your local computer. Click “Authorize”.

  • If the everything worked you should see the Demo Store mobile adaptation being served off your local computer!

Changing the Code:

With the development server running, you can make updates to the Demo Store project files with your text editor and then refresh the page to see your changes. Start with these files:

  • src/mobify.konf contains the DOM operations to select and adapt the source DOM. It also contains logic for rendering the template to the browser.

  • src/tmpl/home.tmpl is the template used to render the homepage. It inherits from src/tmpl/base.tmpl which is the base template that provides the blocks for other templates to override.

  • src/scss/pages/_home.scss contains the SCSS used on the homepage. We used SCSS, but you are free to use LESS or regular CSS if you prefer. (You will need to install Compass to if you wish to recompile this stylesheet.)

Where to Next?

If you want to understand more about how this stuff works, be sure to check out our documentation, and if you have any questions, head over to our community page.