Commercetools Sunrise Theme

Attention

Currently the templates as well as the CSS and JavaScript files are not ready to be re-used.

Despite of that we recommend to use the project itself to develop your own theme with the current setup, as it provides useful tasks that can help you in the process. For more details, please check the Commands section.

Demo

• Home ( DE )
• Product Overview ( DE )
• Product Detail ( DE )
• Cart Detail ( DE )
• Checkout Sign In (1/6) ( DE )
• Checkout Shipping Address (2/6) ( DE )
• Checkout Shipping Method (3/6) ( DE )
• Checkout Payment (4/6) ( DE )
• Checkout Confirmation (5/6) ( DE )
• Checkout Thank You (6/6) ( DE )
• My Account: Personal Details ( DE )
• My Account: Address Book ( DE )
• My Account: New Address ( DE )
• My Account: Edit Address ( DE )
• My Account: Payment Details ( DE )
• My Account: My Orders ( DE )
• My Account: My Orders - Single Order ( DE )
• My Account: Returns / Exchange ( DE )
• My Account: Returns / Exchange - Single Return ( DE )
• My Account: Wishlist ( DE )
• My Account: Login ( DE )
• My Account: Change Password ( DE )
• My Account: Forgot Password ( DE )
• My Account: Reset Password ( DE )
• Confirmation Email ( DE )
• Dispatch Email ( DE )
• Registration Email ( DE )
• Password Reset Email ( DE )
• No Search Result ( DE )
• Mix & Match ( DE )
• Contact Form ( DE )
• Reserve in Store ( DE )
• Store Finder ( DE )
• FAQ Page ( DE )
• Imprint Page ( DE )

Installation

• Install Node.js and NPM
• Install Sass
• Install Grunt
• Run npm install in the project root to install the project dependencies

How to use

You can import the theme to your project as a WebJars dependency.

All releases for this theme can be found in a Maven repository hosted by Bintray:

• >= v0.58.0: https://dl.bintray.com/commercetools/maven/com/commercetools/sunrise/commercetools-sunrise-theme/
• < v0.58.0: https://dl.bintray.com/commercetools/maven/io/commercetools/sunrise/commercetools-sunrise-theme/

How to develop

Duplicate the repository and adapt package.json to create your own theme.

Set it up as explained in the Installation section, then apply your modifications as follows:

1. Run grunt
2. Modify the source files located in input/ folder
3. Check your changes by accessing the desired HTML file generated in the output/ folder
4. Once ready, enable the theme in your Sunrise project following one of the methods described in Create WebJars file

Commands

Besides grunt, which builds the whole generated site (grunt build) and watches for changes, there are other commands available. Below are listed a non-exhaustive list of them.

Notice you can always add --verbose and/or --debug to any command in order to obtain more information.

Generate HTML Site

Build the site for your theme and access the HTML files to see how it looks like.

• grunt build to build the whole generated site

• grunt build-images to build only images

• grunt build-assets to build only CSS, JS and font files

• grunt build-templates to build only i18n and HBS files, besides generating the HTML files from the Handlebars templates and the JSON data

• grunt build-release behaves exactly as build, but additionally it fingerprints all web assets

Building the generated site also performs these tasks:

• Compiles Sass to CSS files
• Minifies CSS and JS files
• Adds vendor-prefixed CSS properties with Autoprefixer
• Compresses any PNG, JPG, GIF and SVG image file with Imagemin

Create WebJars File

Create a WebJars file from this theme and apply it to any Sunrise Java project. There are three possible ways to achieve this:

• grunt build-webjar to create the WebJar in the root directory of the project, so that you can apply it by placing the generated JAR file in the folder for unmanaged dependencies of your Sunrise project (i.e. lib/ is the default folder for Sunrise)

• grunt install-webjar to install the current snapshot version to your local maven repository (~/.m2/repository/com/commercetools/sunrise/commercetools-sunrise-theme) and apply it to your project as a dependency from a local environment

• grunt release-webjar to release the current version to a remote Maven repository and move to the next development version, this way you could publicly distribute your theme and let anyone apply it to their Sunrise application as a project dependency (requires that you set up config.maven in package.json accordingly to your remote Maven repository)

Publish to GitHub Pages

Publish the generated output/ folder to GitHub Pages, so that you can easily access and share the generated HTML files of your theme, as well as all other files.

• grunt publish to publish the generated site to GitHub Pages (requires that you set up config.github in package.json accordingly to your GitHub repository and that an environmental variable GH_TOKEN is provided containing a GitHub Access Token)

If you want to publish to GitHub Pages each time your theme changes, all you need to do is enable Travis CI for your project and define the environment variable GH_TOKEN as explained in the Travis CI Documentation.