Skip to content
The BigCommerce Cornerstone theme
Branch: master
Clone or download
mattolson Merge pull request #1498 from bc-williamkwon/patch-1
STRF-5521 PDP Product Reviews Link Not Clickable
Latest commit 803072b May 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add issue template Mar 28, 2017
assets Update to fix product reviews link May 17, 2019
grunt fix(content): STRF-4948 fix missing svg icons on AMP add-to-cart page… Jun 13, 2018
lang default instrument for add/edit form Nov 1, 2018
meta MERC-817: new thumbnail images for the theme Jun 13, 2016
templates feat(payments): PAYMENTS-4228 include currency_code field in the Acco… May 6, 2019
.eslintignore webpack 2 Apr 25, 2017
.eslintrc Fix eslint and bundling Jan 8, 2019
.gitignore STRF-4965: Minor modifications to build Jan 8, 2019
.scss-lint.yml BIG-21458: Revert default SelectorDepth and NestingDepth levels Oct 28, 2015
.travis.yml STRF-4965: Minor modifications to build Jan 8, 2019
CHANGELOG.md Update to fix product reviews link May 17, 2019
CONTRIBUTING.md Update license year and contributing link. Mar 16, 2017
Gemfile BIG-21458: Add dev-related grunt tasks and hooks Sep 2, 2015
Gemfile.lock BIG-21458: Add dev-related grunt tasks and hooks Sep 2, 2015
Gruntfile.js MERC-409: Enable theme specific builds Apr 6, 2016
LICENSE.md Update license year and contributing link. Mar 16, 2017
README.md added package-lock.json Feb 8, 2019
config.json Releasing 3.4.3 May 10, 2019
karma.conf.js STRF-4603: Webpack 4 + Javascript optimizations May 17, 2018
lighthouse-config.js Add lighthouse command Jan 8, 2019
package-lock.json added package-lock.json Feb 8, 2019
package.json Releasing 3.4.3 May 10, 2019
schema.json MERC-4895: Fix swapping of Star review icon (full/empty) settings May 13, 2019
stencil.conf.js Show Webpack warnings on stencil bundle/start Feb 21, 2019
webpack.common.js Show Webpack warnings on stencil bundle/start Feb 21, 2019
webpack.dev.js Show Webpack warnings on stencil bundle/start Feb 21, 2019
webpack.prod.js Fix eslint and bundling Jan 8, 2019

README.md

Cornerstone

Build Status

Stencil's Cornerstone theme is the building block for BigCommerce theme developers to get started quickly developing premium quality themes on the BigCommerce platform.

Stencil Utils

Stencil-utils is our supporting library for our events and remote interactions.

JS API

When writing theme JavaScript (JS) there is an API in place for running JS on a per page basis. To properly write JS for your theme, the following page types are available to you:

  • "pages/account/addresses"
  • "pages/account/add-address"
  • "pages/account/add-return"
  • "pages/account/add-wishlist"
  • "pages/account/recent-items"
  • "pages/account/download-item"
  • "pages/account/edit"
  • "pages/account/return-saved"
  • "pages/account/returns"
  • "pages/account/payment-methods"
  • "pages/auth/login"
  • "pages/auth/account-created"
  • "pages/auth/create-account"
  • "pages/auth/new-password"
  • "pages/blog"
  • "pages/blog-post"
  • "pages/brand"
  • "pages/brands"
  • "pages/cart"
  • "pages/category"
  • "pages/compare"
  • "pages/errors"
  • "pages/gift-certificate/purchase"
  • "pages/gift-certificate/balance"
  • "pages/gift-certificate/redeem"
  • "global"
  • "pages/home"
  • "pages/order-complete"
  • "pages/page"
  • "pages/product"
  • "pages/search"
  • "pages/sitemap"
  • "pages/subscribed"
  • "page/account/wishlist-details"
  • "pages/account/wishlists"

These page types will correspond to the pages within your theme. Each one of these page types map to an ES6 module that extends the base PageManager abstract class.

    export default class Auth extends PageManager {
        constructor() {
            // Set up code goes here; attach to internals and use internals as you would 'this'
        }
    }

JS Template Context Injection

Occasionally you may need to use dynamic data from the template context within your client-side theme application code.

Two helpers are provided to help achieve this.

The inject helper allows you to compose a JSON object with a subset of the template context to be sent to the browser.

{{inject "stringBasedKey" contextValue}}

To retrieve the parsable JSON object, just call {{jsContext}} after all of the {{@inject}} calls.

For example, to setup the product name in your client-side app, you can do the following if you're in the context of a product:

{{inject "myProductName" product.title}}

<script>
// Note the lack of quotes around the jsContext handlebars helper, it becomes a string automatically.
var jsContext = JSON.parse({{jsContext}}); // jsContext would output "{\"myProductName\": \"Sample Product\"}" which can feed directly into your JavaScript

console.log(jsContext.myProductName); // Will output: Sample Product
</script>

You can compose your JSON object across multiple pages to create a different set of client-side data depending on the currently loaded template context.

The stencil theme makes the jsContext available on both the active page scoped and global PageManager objects as this.context.

Static assets

Some static assets in the Stencil theme are handled with Grunt if required. This means you have some dependencies on grunt and npm. To get started:

First make sure you have Grunt installed globally on your machine:

npm install -g grunt-cli

and run:

npm install

Note: package-lock.json file was generated by Node version 8 and npm version 6.4.1. Although the app supports Node versions 6 and 8 as well as multiple versions of npm, we should always use those versions when updating package-lock.json, unless it is decided to upgrade those, and in this case the readme should be updated as well. If using a different version for node OR npm, please delete the package-lock.json file prior to installing node packages and also prior to pushing to github.

If updating or adding a dependency, please double check that you are working on Node version 8 and npm version 6.4.1 and run npm update <package_name> or npm install <package_name> (avoid running npm install for updating a package). After updating the package, please make sure that the changes in the package-lock.json reflect only the updated/new package prior to pushing the changes to github.

Icons

Icons are delivered via a single SVG sprite, which is embedded on the page in templates/layout/base.html. It is generated via a grunt task grunt svgstore.

The task takes individual SVG files for each icon in assets/icons and bundles them together, to be inlined on the top of the theme, via an ajax call managed by svg-injector. Each icon can then be called in a similar way to an inline image via:

<svg><use xlink:href="#icon-svgFileName" /></svg>

The ID of the SVG icon you are calling is based on the filename of the icon you want, with icon- prepended. e.g. xlink:href="#icon-facebook".

Simply add your new icon SVG file to the icons folder, and run grunt svgstore, or just grunt.

License

(The MIT License) Copyright (C) 2015-present BigCommerce Inc. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You can’t perform that action at this time.