Project Name

BigCommerce Storefront Theme

Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Installation and Setup Guide
3. Contributing
4. Stack

About The Project

Project name description.

(back to top)

Installation and Setup Guide

Prepare

Before to start using this template be sure you have an empty repository. Then you can initialize this command in your terminal:

curl -o- https://raw.githubusercontent.com/minnek-digital-studio/bigcommerce-template/master/setup.sh | bash

This command will:

• Download the latest version of cornerstone and will be commit it
• Overwrite the cornerstone files witth this template and will be commit it
• Install the NPM packages

README.md

Edit this readme file and replace the {JIRA-KEY} keyword with related project key from Jira.

Cornerstone 6+ Only

• Setup Stencil CLI: stencil init and enter the credentials.
• Add these commands to the package.json file:

"start:dev": "npm run start",
"start": "stencil start -o --variation <variation-name>  -c 1",
"push": "echo \"no\" | stencil push -c 1",
"theme:check": "npx grunt check",
"stylelint": "npx stylelint **/*.scss",
"stylelint:fix": "npx stylelint --fix **/*.scss",
"cy:open": "cypress open",
"cy:run": "export \"$(grep -vE \"^(#.*|/s*)$\" .env)\"; npx cypress run --headless --record --key $CYPRESS_KEY --browser chrome",
"release": "release-it",
"postinstall": "husky install"

Code Owners

• Define who is the code owner of the project. Sometimes the code owner is the project lead or maybe the team lead of your team, this info can find it in the Jira project, learn more about code owners.

CSS

• Add the code below to the end of the file /assets/scss/theme.scss.

@import "ysw/settings/settings";
@import "ysw/tools/tools";
@import "ysw/generic/generic";
@import "ysw/elements/elements";
@import "ysw/components/components";
@import "ysw/layouts/layouts";
@import "ysw/utilities/utilities";
@import "ysw/vendor/vendor";

• You can find the folder structure in /assets/scss/ysw. The folder have the explanation.

JavaScript

• The javascript files structure are in /assets/js/ysw/. The only thing you need to do is to import the modules files into the big commerce corresponding modules page.

Templates Structure

• All the templates for development are in /templates/ysw. The folder has a readme file with an explanation.

(back to top)

VSC

Add this setup to the settings.json in the .vscode folder to highlight the handlebars files:

{
  "files.associations": {
    "*.html": "handlebars"
  }
}

(back to top)

Repository Settings

• Create production environment to store the credentials for deployment using secrets:
  • URL with the value of private storefront url
  • TOKEN with value of Stencil CLI token with push scope
• Create repository secrets for:
  • CYPRESS_KEY with the value of key from cypress cloud

(back to top)

Contributing

If you have a suggestion that would make this better, create a pull request. You can also simply open an issue with the tag "enhancement".

• Create your Feature Branch (git checkout -b feature/JIRA-ID)
• Commit your Changes (git commit -m 'feat: JIRA-ID feature description')
• Push to the Branch (git push origin feature/JIRA-ID)
• Open a Pull Request (assign yourself to the PR, and add the Code Reviewer)
• Follow the project Pull Request Guidelines

(back to top)

Stack

• Node.js 18
• Stencil CLI 7+
• ESLint
• Stylelint
• CommitLint (Conventional Commits)
• Cypress (E2E Test)
• Jest (Unit Test)
• Husky (Git Hooks)
• Grunt
• Editorconfig
• GitHub Actions
• GitHub Code Owners

(back to top)