commercetools-sunrise-theme

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

commercetools-sunrise-theme

★ 13 Open GitHub ↗

Sunrise Theme from commercetools

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Commercetools Sunrise Theme

[![Build Status](https://travis-ci.org/commercetools/commercetools-sunrise-theme.svg?branch=master)](https://travis-ci.org/commercetools/commercetools-sunrise-theme)
[ ![Download](https://api.bintray.com/packages/commercetools/maven/commercetools-sunrise-theme/images/download.svg) ](https://bintray.com/commercetools/maven/commercetools-sunrise-theme/_latestVersion)
[![stability-experimental](https://img.shields.io/badge/stability-experimental-orange.svg)](https://github.com/orangemug/stability-badges#experimental)
[![Stories in Ready](https://badge.waffle.io/commercetools/commercetools-sunrise-theme.png?label=ready&title=Ready)](https://waffle.io/commercetools/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](#commands) section.

## Demo

- [Home](http://commercetools.github.io/commercetools-sunrise-theme/site/en/home.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/home.html) )
- [Product Overview](http://commercetools.github.io/commercetools-sunrise-theme/site/en/pop.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/pop.html) )
- [Product Detail](http://commercetools.github.io/commercetools-sunrise-theme/site/en/pdp.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/pdp.html) )
- [Cart Detail](http://commercetools.github.io/commercetools-sunrise-theme/site/en/cart.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/cart.html) )
- [Checkout Sign In (1/6)](http://commercetools.github.io/commercetools-sunrise-theme/site/en/checkout-signin.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/checkout-signin.html) )
- [Checkout Shipping Address (2/6)](http://commercetools.github.io/commercetools-sunrise-theme/site/en/checkout-address.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/checkout-address.html) )
- [Checkout Shipping Method (3/6)](http://commercetools.github.io/commercetools-sunrise-theme/site/en/checkout-shipping.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/checkout-shipping.html) )
- [Checkout Payment (4/6)](http://commercetools.github.io/commercetools-sunrise-theme/site/en/checkout-payment.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/checkout-payment.html) )
- [Checkout Confirmation (5/6)](http://commercetools.github.io/commercetools-sunrise-theme/site/en/checkout-confirmation.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/checkout-confirmation.html) )
- [Checkout Thank You (6/6)](http://commercetools.github.io/commercetools-sunrise-theme/site/en/checkout-thankyou.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/checkout-thankyou.html) )
- [My Account: Personal Details](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-personal-details.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-personal-details.html) )
- [My Account: Address Book](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-address-book.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-address-book.html) )
- [My Account: New Address](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-new-address.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-new-address.html) )
- [My Account: Edit Address](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-edit-address.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-edit-address.html) )
- [My Account: Payment Details](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-payment-details.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-payment-details.html) )
- [My Account: My Orders](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-my-orders.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-my-orders.html) )
- [My Account: My Orders - Single Order](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-my-orders-order.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-my-orders-order.html) )
- [My Account: Returns / Exchange](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-returns-exchange.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-returns-exchange.html) )
- [My Account: Returns / Exchange - Single Return](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-returns-exchange-order.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-returns-exchange-order.html) )
- [My Account: Wishlist](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-wishlist.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-wishlist.html) )
- [My Account: Login](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-login.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-login.html) )
- [My Account: Change Password](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-change-password.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-change-password.html) )
- [My Account: Forgot Password](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-forgot-password.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-forgot-password.html) )
- [My Account: Reset Password](http://commercetools.github.io/commercetools-sunrise-theme/site/en/my-account-reset-password.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/my-account-reset-password.html) )
- [Confirmation Email](http://commercetools.github.io/commercetools-sunrise-theme/site/en/confirmation-email.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/confirmation-email.html) )
- [Dispatch Email](http://commercetools.github.io/commercetools-sunrise-theme/site/en/dispatch-email.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/dispatch-email.html) )
- [Registration Email](http://commercetools.github.io/commercetools-sunrise-theme/site/en/registration-email.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/registration-email.html) )
- [Password Reset Email](http://commercetools.github.io/commercetools-sunrise-theme/site/en/password-reset-email.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/password-reset-email.html) )
- [No Search Result](http://commercetools.github.io/commercetools-sunrise-theme/site/en/no-search-result.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/no-search-result.html) )
- [Mix & Match](http://commercetools.github.io/commercetools-sunrise-theme/site/en/mix-match.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/mix-match.html) )
- [Contact Form](http://commercetools.github.io/commercetools-sunrise-theme/site/en/contact-form.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/contact-form.html) )
- [Reserve in Store](http://commercetools.github.io/commercetools-sunrise-theme/site/en/reserve-in-store.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/reserve-in-store.html) )
- [Store Finder](http://commercetools.github.io/commercetools-sunrise-theme/site/en/store-finder.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/store-finder.html) )
- [FAQ Page](http://commercetools.github.io/commercetools-sunrise-theme/site/en/faq.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/faq.html) )
- [Imprint Page](http://commercetools.github.io/commercetools-sunrise-theme/site/en/imprint.html) ( [DE](http://commercetools.github.io/commercetools-sunrise-theme/site/de/imprint.html) )

## Installation

- Install [Node.js](https://nodejs.org/) and [NPM](https://www.npmjs.com/)
- Install [Sass](http://sass-lang.com/install)
- Install [Grunt](http://gruntjs.com/getting-started)
- 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](http://www.webjars.org/) dependency.

All releases for this theme can be found in a Maven repository hosted by [Bintray](https://bintray.com/):
- `>= 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](https://help.github.com/articles/duplicating-a-repository/) the repository and adapt `package.json` to create your own theme.

Set it up as explained in the _[Installation](#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](#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](http://sass-lang.com/) to CSS files
- Minifies CSS and JS files
- Adds vendor-prefixed CSS properties with [Autoprefixer](https://github.com/postcss/autoprefixer)
- Compresses any PNG, JPG, GIF and SVG image file with [Imagemin](https://github.com/imagemin/imagemin)

#### Create WebJars File

Create a WebJars file from this theme and apply it to any [Sunrise Java](https://github.com/commercetools/commercetools-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](https://pages.github.com/), 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](https://help.github.com/articles/creating-an-access-token-for-command-line-use/))

If you want to publish to GitHub Pages each time your theme changes, all you need to do is enable [Travis CI](https://travis-ci.org/) for your project and define the environment variable `GH_TOKEN` as explained in the [Travis CI Documentation](https://docs.travis-ci.com/user/environment-variables).

commercetools-sunrise-theme

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

commercetools-sunrise-theme

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README