Commercetools Sunrise Theme

##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: 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 )
• Confirmation Email ( DE )
• Dispatch Email ( DE )
• Registration Email ( DE )
• Password Reset Email ( DE )
• No Search Result ( DE )
• Mix & Match ( DE )
• Contact Form ( 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.53.0: https://dl.bintray.com/commercetools/maven/io/commercetools/sunrise/commercetools-sunrise-theme/
• < v0.53.0: https://dl.bintray.com/commercetools/maven/io/commercetools/commercetools-sunrise-design/

##How to develop

Fork or copy the project to create your own theme. Do not forget to adapt package.json and optionally .travis.yml to your project.

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

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 project. There are three possible ways to achieve this:

• grunt webjars to create the WebJars file 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 to install the current snapshot version to your local maven repository (~/.m2/repository/io/commercetools/sunrise/commercetools-sunrise-theme) and apply it to your project as a dependency from a local environment

• grunt release 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)

Note that this Grunt task needs access to your GitHub repository. In order to grant it access to your GitHub repository, define an environment variable named $GH_TOKEN containing a GitHub Access Token.
You also need to amend the github name, email and repoSlug in the respective config section in the package.json file to make the task work for your GitHub repository.