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
Uncle Merlin’s Discount Potions is a Magento store that uses Mobify.js to provide an optimized view for mobile devices.
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!
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.)
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.