This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 1,000,000+ packages pre-installed, including
generator-mozu-theme2 with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Maintainer: Mozu, the enterprise eCommerce platform.
This is a Mozu Theme generator for Yeoman, that turns a directory into a Mozu theme. It can also:
extendssystem to use the new, Git-based system
Mozu Themes are large, complex frontend projects, so it's best to start from a sensible, well-organized default. Mozu provides this in the form of the Mozu Core Theme. Most themes should be based on the Mozu Core Theme, or on another theme ultimately based on the Core Theme. The Mozu Theme Generator helps you begin a starting point, based on the Mozu Core Theme or another theme.
The release of the Mozu Theme Generator 2.0 marks a change in the way Mozu recommends that themes be maintained and upgraded.
In the past, the recommended path was to maintain your theme as a "directory diff" of your parent theme; your theme directory contained only the files that differed from the base. Your
theme.json file would declare its base theme in an
extends property. For the Mozu Core Theme, at major version 7, this property would look like:
To extend another theme, you would need that theme to be installed alongside your theme in a developer account, and the
extends property would contain the base theme's theme ID and package ID:
At runtime, the theme engine that runs in the Mozu Storefront would examine this property, and for any template, stylesheet, or any other file, the theme engine would fetch the file from your base theme if you did not have your own version (an "override") of that file.
We have deprecated this system. Though the
extends property will continue to function as before, we now recommend that you set it to
null, and maintain your base theme relationships using Git version control.
There are a number of disadvantages to the runtime inheritance approach described above.
The solution is to treat Mozu Themes as code, rather than as a finished, packaged asset that can be composed and modified at runtime. There already exist robust tools to maintain relationships between codebases: distributed version control systems. We have chosen to standardize Mozu themes on Git, because of its power and ubiquity.
The new process is to maintain your theme as a simple Git clone of your base theme's repository. You can publish this clone as a fork, and because a relationship to the parent repository exists in Git, merging changes is as easy as using Git to pull from the
When you run the new Theme Generator in an empty directory, it can create a new clone of a base theme repository, in order to begin this code relationship. It can also update existing Mozu themes that use the runtime inheritance model in-place to use the Git-based model.
First, install Yeoman's command line tool if you haven't already!
npm install -g yo
Yeoman looks for globally installed NPM packages that identify themselves as Yeoman generators. So install the generator globally. Also, install the
grunt-cli command line Grunt package, because you'll need it.
npm install -g generator-mozu-theme2 grunt-cli
The generator is designed to read the current directory and guess what you want it to do. It should work if you run it inside a blank directory, an existing "legacy" theme, or an existing "modern" theme. It should also fail informatively if you run it in a nonempty directory that it does not recognize as a Mozu Theme. The simple command is:
The generator will initiate the appropriate sub-generator after reading directory state.
The generator is composed of sub-generators, which you can also call directly.
yo mozu-theme2:brandnew in an empty directory to immediately begin creating a new theme. This command will fail in a nonempty directory.
yo mozu-theme2:legacy in the directory of an existing theme which uses the
extends runtime inheritance model to immediately begin upgrading it to use the new process.
yo mozu-theme2:existingrepo and give it the address of an existing Git repository that contains a modern theme (one that has already been generated with this generator). This sub-generator will "reattach" the
basetheme repo that helps you check for updates during the build process.
yo mozu-theme2 command takes some options at the command line.
--verboseto print very detailed logging
--skip-promptsto infer as many things as possible without pausing to ask questions
--skip-appto skip the generation of Mozu App Config to sync with Developer Center
--skip-installto skip the install of NPM packages
The theme will generate based on the provided base theme. Most themes should inherit from the Mozu Core Theme, and the generator can set up your theme's build process so that it continuously checks for updates from the Core theme, or whatever base theme you inherit, as long as it can connect to its remote Git repository.
The provided Gruntfile will do the following:
./build.jsfile that you either inherit or override
As with all Gruntfiles, you can also run the configured tasks individually. Here are some common individually-run tasks:
grunt mozutheme:checkto check for updates to the base theme
grunt mozusync:uploadto synchronize with the Developer Center
grunt mozusync:wipeto delete all files from the Developer Center