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 installin 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:
- Run
grunt - Modify the source files located in
input/folder - Check your changes by accessing the desired HTML file generated in the
output/folder - 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 buildto build the whole generated site -
grunt build-imagesto build only images -
grunt build-assetsto build only CSS, JS and font files -
grunt build-templatesto build only i18n and HBS files, besides generating the HTML files from the Handlebars templates and the JSON data -
grunt build-releasebehaves exactly asbuild, 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-webjarto 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-webjarto 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-webjarto 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 upconfig.maveninpackage.jsonaccordingly 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 publishto publish the generated site to GitHub Pages (requires that you set upconfig.githubinpackage.jsonaccordingly to your GitHub repository and that an environmental variableGH_TOKENis 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.
