diff --git a/docs/storefront/stencil/cli/install.mdx b/docs/storefront/stencil/cli/install.mdx index d192d8000..7095330bb 100644 --- a/docs/storefront/stencil/cli/install.mdx +++ b/docs/storefront/stencil/cli/install.mdx @@ -22,7 +22,7 @@ There are different options for installing Stencil CLI and its dependencies on a * Node.js 20+ (Stencil CLI supported version) Note: If the Python version is more than 3.12, then you should install distutils using the following command: - ```pip install setuptools``` + `pip install setuptools` To install Stencil CLI and its dependencies on Mac, open a terminal and run the following commands. For the latest `node` version supported, refer to [Stencil CLI README.MD](https://github.com/bigcommerce/stencil-cli). diff --git a/docs/storefront/stencil/cli/unexpected-behavior.mdx b/docs/storefront/stencil/cli/unexpected-behavior.mdx index 7236fe9e3..f06677ecd 100644 --- a/docs/storefront/stencil/cli/unexpected-behavior.mdx +++ b/docs/storefront/stencil/cli/unexpected-behavior.mdx @@ -29,7 +29,7 @@ stencil scss-autofix --dry 3. To commit the changes and revalidate, run the following commands: ```shell showLineNumbers copy -stencil scss-autofix +stencil scss-autofix stencil bundle ``` @@ -58,7 +58,7 @@ Debug: internal, implementation, error (/usr/local/lib/node_modules/stencil-cli/server/plugins/CssCompiler/index.js:32:26) ``` -On MacOS, we have tested Stencil CLI most robustly on Node.js version 4.4.0. On Linux, we have tested most robustly on version 4.1.2. On Windows, we have tested most robustly on version 4.6.1. You’ll find detailed steps (for each operating system) in these instructions' Installing Stencil Prerequisites by OS section. +On macOS, we have tested Stencil CLI most robustly on Node.js version 4.4.0. On Linux, we have tested most robustly on version 4.1.2. On Windows, we have tested most robustly on version 4.6.1. You’ll find detailed steps (for each operating system) in these instructions' Installing Stencil Prerequisites by OS section. ## npm install errors @@ -126,7 +126,7 @@ This error typically occurs when your `package.json` file includes an outdated v ### Running stencil bundle errors -Nowadays, `stencil bundle` runs several validation checks on a theme before it can be bundled and pushed to the store. +Nowadays, `stencil bundle` runs several validation checks on a theme before it can be bundled and pushed to the store. You may see those errors because your theme has some missing properties in its translations files or frontmatter that have recently become required. @@ -155,7 +155,7 @@ The following error indicates that there is a trailing comma in the frontmatter Error: Found unallowed trailing symbol in: "4,", while parsing frontmatter at ".....templates/pages/home.html". ``` -### Node support +### Node support When you update the Node.js version, you can check to see whether you can update other theme packages, such as webpack, for updated feature support. @@ -197,7 +197,7 @@ If you receive the same error again after running `npm install`, you should comp ## MacOS: Xcode/iOS license... errors -On MacOS, if you have recently installed a new version of Xcode, the command line will display the following error when you next try to use or reinstall Stencil: +On macOS, if you have recently installed a new version of Xcode, the command line will display the following error when you next try to use or reinstall Stencil: ```text error: Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo. @@ -249,7 +249,7 @@ If executing the `stencil start` command generates an `Unauthorized, please use ### 403 errors -If the Stencil server responds with a `403` error and you are using a proxy-based domain service like Cloudflare or Amazon Cloudfront, modify your hosts file to map the localhost to your BigCommerce store IP address. +If the Stencil server responds with a `403` error, and you are using a proxy-based domain service like Cloudflare or Amazon CloudFront, modify your hosts file to map the localhost to your BigCommerce store IP address. ## 500 errors diff --git a/docs/storefront/stencil/deployment/performance-optimization.mdx b/docs/storefront/stencil/deployment/performance-optimization.mdx index 9886abb84..8fa78a176 100644 --- a/docs/storefront/stencil/deployment/performance-optimization.mdx +++ b/docs/storefront/stencil/deployment/performance-optimization.mdx @@ -27,9 +27,9 @@ When importing images, ensure your images are high quality, the appropriate dime Injecting JavaScript context variables allow you to access store data through your theme. You can inject JavaScript context variables using the `{{inject}}` Handlebars helper. Be sure to assign a custom variable name to the injected variable. -You can then use the `{{jsContext}}` Handlebars helper to access a stringified JSON object containing all injected data with your assigned custom variable names as keys in the key-value pairs. For more information, see [injection helpers](/docs/storefront/stencil/themes/context/handlebars-reference#inject). +You can then use the `{{jsContext}}` Handlebars helper to access a stringified JSON object containing all injected data with your assigned custom variable names as keys in the key-value pairs. For more information, see [injection helpers](/docs/storefront/stencil/themes/context/handlebars-reference#inject). -The code example below uses `{{inject}}` and `{{jsContext}}` to log the product name to your browser's console when added to Cornerstone's `product.html` file: +The code example below uses `{{inject}}` and `{{jsContext}}` to log the product name to your browser's console when added to Cornerstone's `product.html` file: ```handlebars filename="product.html" showLineNumbers copy {{inject "myProductName" product.title}} @@ -43,7 +43,7 @@ The code example below uses `{{inject}}` and `{{jsContext}}` to log the product ``` -We recommend injecting only the variables you need. If you inject all settings, you could accidentlly inject PII (Personally-Identifying Information) and cause performance issues with your site. +We recommend injecting only the variables you need. If you inject all settings, you could accidentally inject PII (Personally-Identifying Information) and cause performance issues with your site. ## Using Lighthouse @@ -59,7 +59,7 @@ Largest Contentful Paint (LCP) is the metric that reports the time it takes to d #### Good score - The optimal LCP score is 2.5 seconds or faster. + The optimal LCP score is 2.5 seconds or faster. To improve LCP: @@ -93,7 +93,7 @@ Cumulative Layout Shift (CLS) is the metric that measures visual stability. This #### Good score - The optimal CLS score is 0.1 seconds or less. + The optimal CLS score is 0.1 seconds or less. To improve CLS: @@ -108,7 +108,7 @@ In this example, the performance score is currently 47. The LCP score is 6.2 s, ![Performance Metrics](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/performance-example-1.png "Performance Metrics") -To improve performance, let's start by measuring usused JavaScript. In Chrome DevTools, the **Lighthouse** and **Coverage** tabs offer suggestions of unused JavaScript code that you can potentially remove. The red section of the bar represents unused bytes; the green section represents used bytes. It is important to note that unused JavaScript means your page has not used it yet. The JavaScript in red might be connected to event listeners that only fire when a user interacts with your page. +To improve performance, let's start by measuring unused JavaScript. In Chrome DevTools, the **Lighthouse** and **Coverage** tabs offer suggestions of unused JavaScript code that you can potentially remove. The red section of the bar represents unused bytes; the green section represents used bytes. It is important to note that unused JavaScript means your page has not used it yet. The JavaScript in red might be connected to event listeners that only fire when a user interacts with your page. ![Coverage tab](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/performance-example-2.png "Coverage tab") @@ -117,7 +117,7 @@ In addition to removing unused code, you can minify, compress, and refactor CSS ```css filename="Example, Part 1: Not minified" showLineNumbers copy .element-class { padding: 1px 5px 1px 5px; -font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, +font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; background-color: #eeeeee;} ``` @@ -128,14 +128,14 @@ background-color: #eeeeee;} Lighthouse displays information relevant to elements contributing to the CLS score. In this example, the banner above the carousel causes a loading issue. Once the image is resized or removed the CLS score improves. -After removing some unused bytes, minifying JavaScript files, and resizing an image, the performance score is 77. The LCP score is now 4.3 s, the TBT score is 120 ms and the CLS score is 0.001. You can continue to remove additional unused bytes to improve your performance score and metrics. +After removing some unused bytes, minifying JavaScript files, and resizing an image, the performance score is 77. The LCP score is now 4.3 s, the TBT score is 120 ms and the CLS score is 0.001. You can continue to remove additional unused bytes to improve your performance score and metrics. ![Improved Performance Metrics](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/performance-example-3.png "Improved Performance Metrics") -Using Lighthouse is an important step in optimizing your site and improving the user experience. It is an easy to use best practice tip that provides powerful insights. +Using Lighthouse is an important step in optimizing your site and improving the user experience. It is an easy to use best practice tip that provides powerful insights. ## Using error detections and optimization tools -Tools that automatically record errors and provide session playback and optimization suggestions often benefit from having access to the themes' source maps in production. +Tools that automatically record errors and provide session playback and optimization suggestions often benefit from having access to the themes' source maps in production. They provide a way to translate between minified code, designed to decrease webpage load times and the source code the developer writes. [Stencil CLI](/docs/storefront/stencil/cli/options-and-commands) provides convenient options for bundling the production-ready theme with source maps included. diff --git a/docs/storefront/stencil/deployment/theme-images.mdx b/docs/storefront/stencil/deployment/theme-images.mdx index 67eaac6cb..d2006dc7f 100644 --- a/docs/storefront/stencil/deployment/theme-images.mdx +++ b/docs/storefront/stencil/deployment/theme-images.mdx @@ -5,7 +5,7 @@ ## Displaying theme thumbnail images -A complete Stencil theme includes screenshots to display the theme on cards that appear in two locations within a non active MSF BigCommerce control panel: +A complete Stencil theme includes screenshots to display the theme on cards that appear in two locations within a non-active MSF BigCommerce control panel: * **Storefront** › **Themes**: Each individual card displays a composite which is an image that contains combination of screenshots of the theme's multiple variations. diff --git a/docs/storefront/stencil/deployment/upload-errors.mdx b/docs/storefront/stencil/deployment/upload-errors.mdx index 0cfda4c4a..8ce5b95b9 100644 --- a/docs/storefront/stencil/deployment/upload-errors.mdx +++ b/docs/storefront/stencil/deployment/upload-errors.mdx @@ -1,6 +1,6 @@ # Troubleshooting Theme Uploads - + ## Restrictions @@ -27,7 +27,7 @@ Custom theme uploads must meet these restrictions: | TR-800 | There was a problem processing the contained `config.json` file. Please check the `config.json` documentation for the required keys and for keys that require values. | | TR-900 | The contained `config.json` file is missing the required developer information. | | TR-901 | A theme variation defined in the contained config.json file is missing its required external ID. | -| TR-902 | Two or more theme variations defined in the contained config.json file share an external ID. All external IDs must be unique. | +| TR-902 | Two or more theme variations defined in the contained config.json file share an external ID. All external IDs must be unique. | | TR-1000 | There was a problem processing the contained schema.json file. | | TR-1001 | The theme is missing its required schema.json file. | | TR-1400 | There was a problem processing template front matter. | @@ -63,6 +63,6 @@ Warnings will not block a theme's upload, but these onscreen and/or log messages ## Workarounds and further info * When using a Windows machine, it is necessary to close PowerShell and re-open as admin before installing nvm. -* If a custom theme does not render properly after you upload and apply it to a storefront, make sure you have created the theme's zip file using the `stencil bundle` command, on a Mac OS, Linux computer, or virtual machine. Using the `stencil bundle` command will exclude Windows-specific errors that have occurred on some bundles. +* If a custom theme does not render properly after you upload and apply it to a storefront, make sure you have created the theme's zip file using the `stencil bundle` command, on a macOS, Linux computer, or virtual machine. Using the `stencil bundle` command will exclude Windows-specific errors that have occurred on some bundles. * If you repeatedly encounter the same error or warning and neither this page nor our KB resolves the problem, see support resources for theme developers in our [Developer Community](/community). diff --git a/docs/storefront/stencil/draft/dynamic-content-rendering.mdx b/docs/storefront/stencil/draft/dynamic-content-rendering.mdx index 6953b4868..923ca9996 100644 --- a/docs/storefront/stencil/draft/dynamic-content-rendering.mdx +++ b/docs/storefront/stencil/draft/dynamic-content-rendering.mdx @@ -1,6 +1,6 @@ --- title: Dynamic Content Rendering on Stencil Storefronts -keywords: js, javascript, if, +keywords: js, javascript, if, --- # Dynamic Content Rendering on Stencil Storefronts @@ -11,7 +11,7 @@ _We're gratefully sharing techniques devised by Ken Utting, Web Developer for Bi At GORUCK, we've customized our Stencil theme (currently using the [Merchant](https://www.bigcommerce.com/theme/merchant-light/?_ga=2.52710120.1984523106.1539568940-967431010.1523308107) theme) to provide several ways to update our site content without requiring changes to the theme itself. This allows our content folks to make changes to our theme without having to wait on our software developers. -Also, by pushing content out of the theme, these techniques reduce the differences between our customized theme and the out-of-the-box (base) theme – which makes it easier to integrate ongoing updates into our theme. Finally, these techniques allow us share identical content across pages without copying and pasting. +Also, by pushing content out of the theme, these techniques reduce the differences between our customized theme and the out-of-the-box (base) theme – which makes it easier to integrate ongoing updates into our theme. Finally, these techniques allow us to share identical content across pages without copying and pasting. Three techniques in particular have proven useful to us. We call them Dropzones, Dynamic Tabs, and Snippets. There is nothing particularly special to GORUCK about these techniques, so there is no reason you can't adopt them for your own store/theme. @@ -104,8 +104,8 @@ In the example below, we use this technique to place the `RIGHT BY YOU` tab in t There are two versions of the HTML. The first is designed for a tab you want to drop in using a page's own HTML: ```handlebars showLineNumbers copy -
- CONTENT +
+ CONTENT
``` @@ -119,7 +119,7 @@ The second version is designed for a tab that gets its content from an external In this second case, the HTML in that external file must start with the POSITION and TITLE information: ```handlebars showLineNumbers copy - + CONTENT ``` @@ -153,37 +153,37 @@ Here are the contents of our `dynamicTab1.html` file:
-

Free & Easy Returns

-

Don't like it? Send it back for free. Returnable in like-new condition within 30 days and +

Don't like it? Send it back for free. Returnable in like-new condition within 30 days and every order comes with a free return shipping label. Too easy.

-

Challenge Excellence

-

We have two grades, A and F and A- rounds down. Excellence is the standard and please hold us to it, +

We have two grades, A and F and A- rounds down. Excellence is the standard and please hold us to it, we want you to love your gear as much as we do.

-

Do Right By People

-

Our goal is to run a company our grandfathers would be proud of. And the central tenet +

Our goal is to run a company our grandfathers would be proud of. And the central tenet — an oldie but a goodie — is that we do whatever it takes to do right by people. Contact us at team@goruck.com with any questions and we'll get back to you ASAP.

@@ -193,7 +193,7 @@ Here are the contents of our `dynamicTab1.html` file:
``` -### Dynamic Tabs JavaScript +### Dynamic Tabs JavaScript Again, the JavaScript code to implement Dynamic Tabs is invoked in the PageManager class' before method. The Dynamic Tabs code is more complex, and it relies on other classes we wrote to get content from the external server and cache it in the browser. @@ -225,7 +225,7 @@ The external file can contain any arbitrary HTML and CSS, and the styled HTML is Like Dropzones and Dynamic Tabs, the Snippets code is invoked in `PageManager`'s `before` method. Snippets adds just another 50 lines of JavaScript code to the theme, also relying on the same code that Dynamic Tabs uses to get the external file and cache it in the browser. -## Recap +## Recap At GORUCK, we've developed a number of techniques that allow us to separate our content from our theme. These techniques have proved valuable to us, because they allow us to: diff --git a/docs/storefront/stencil/draft/reference-docs/global-objects-and-properties.mdx b/docs/storefront/stencil/draft/reference-docs/global-objects-and-properties.mdx index 844e9b8e1..34757675d 100644 --- a/docs/storefront/stencil/draft/reference-docs/global-objects-and-properties.mdx +++ b/docs/storefront/stencil/draft/reference-docs/global-objects-and-properties.mdx @@ -1,6 +1,6 @@ --- title: Global Objects and Properties -keywords: stencil, currency, currencies, sort, +keywords: stencil, currency, currencies, sort, --- # Global Objects and Properties @@ -10,7 +10,7 @@ Global objects and properties are common components shared across the entire Big #### Debugging Your Theme The Stencil framework provides built-in debugging tools to aid in your custom front-end development. When you want to see what data is available on the page you are working on, you can simply add the debug query string to your store’s localhost URL. For example: - `http://localhost:3000/product/this-is-a-sample-product?debug=context` will return a list of all the objects available on the page, in JSON syntax. + `http://localhost:3000/product/this-is-a-sample-product?debug=context` will return a list of all the objects available on the page, in JSON syntax. If you want to view the available JSON objects and rendered page at the same time, simply change the debug value to "bar": `http://localhost:3000/product/this-is-a-sample-product?debug=bar` @@ -66,11 +66,11 @@ Global objects and properties are common components shared across the entire Big | `text` | Subheading defined by the merchant. | | `text_color` | Color of the subheading text. | | `button_text` | Text displayed on a call-to-action button defined by the merchant. | -| `button_text_color` | Color of the button. | +| `button_text_color` | Color of the button. | ## Cart -**Description:** Returns the ID of the cart if one exists. To return more cart information use the [Storefront Cart API](/docs/rest-storefront/carts). +**Description:** Returns the ID of the cart if one exists. To return more cart information use the [Storefront Cart API](/docs/rest-storefront/carts). **Handlebars Expression:** `{{cart_id}}` @@ -99,8 +99,8 @@ Global objects and properties are common components shared across the entire Big | `switch_url` | The URL to invoke a switch to this currency. | | `id` | ID of the currency. | | `name` | Name of the currency. | -| `flag` | Country flag used to visually represent the currency. | - +| `flag` | Country flag used to visually represent the currency. | + ## Categories @@ -188,7 +188,7 @@ The `homepage_featured_products_count` limit is one of two relevant variables de "homepage_featured_products_count": 8, // ... "homepage_featured_products_column_count": 4, - // ... + // ... } ``` @@ -253,7 +253,7 @@ No properties available for this object. To access the global `{{products.new}}` object on your page, you must first use front matter to declare the object at the top of your page template. -`{{products.new}}` returns 10 products by default. +`{{products.new}}` returns 10 products by default. The code example below declares the global `{{products.new}}` object on the `cornerstone/templates/pages/home.html` page template from [Stencil's base Cornerstone Theme](https://github.com/bigcommerce/cornerstone/blob/master/templates/pages/home.html#L3) (GitHub). @@ -629,13 +629,13 @@ products: top_sellers: ``` -## Urls +## URLs **Description:** Object containing a collection of storefront pages and their sub-pages
**Handlebars Expression:** `{{urls}}` -**Object Properties:** +**Object Properties:** | Property | Description | | :--- | :--- | diff --git a/docs/storefront/stencil/draft/reference-docs/other-objects-and-properties-overview.mdx b/docs/storefront/stencil/draft/reference-docs/other-objects-and-properties-overview.mdx index 3a201788b..c4ec2ab84 100644 --- a/docs/storefront/stencil/draft/reference-docs/other-objects-and-properties-overview.mdx +++ b/docs/storefront/stencil/draft/reference-docs/other-objects-and-properties-overview.mdx @@ -1,10 +1,10 @@ --- title: Other Objects and Properties Overview -keywords: bigpay, configurable_fields, sort, +keywords: bigpay, configurable_fields, sort, --- # Other Objects and Properties Overview - + #### Debugging Your Theme @@ -842,12 +842,12 @@ Refunded, Rejected, or Cancelled | | ↳ state | State | |brand | Brand of card. visa. mastercard etc. | |default_instrument | Boolean, whether the card is the default payment method for the shopper | -| forms | Contains all the availble form fields on the update payments page. Object | +| forms | Contains all the available form fields on the update payments page. Object | |   ↳ action | The url to update payment methods. `/account.php?action=update_payment_method` | |   ↳ billing_fields | Array. The drop down for the billing country selection. | |     ↳ chooseprefix | Appears at the top of the country drop-down. Ex. `Choose a Country` | |     ↳ class_name | Field identifier Ex. `Field200` | -|     ↳ id | Id of the Field Ex. `FormField_11` | +|     ↳ id | ID of the Field Ex. `FormField_11` | |     ↳ label | Field Label . Appears above the field. Ex. `Country`| |     ↳ name | Field identifier `FormField[2][11]` | |     ↳ options | Only returns if the field has a dropdown value | diff --git a/docs/storefront/stencil/draft/store-design-overview.mdx b/docs/storefront/stencil/draft/store-design-overview.mdx index a4fa38c20..c789ee694 100644 --- a/docs/storefront/stencil/draft/store-design-overview.mdx +++ b/docs/storefront/stencil/draft/store-design-overview.mdx @@ -1,8 +1,8 @@ # Store Design Overview - -[Store Design](https://support.bigcommerce.com/s/article/Store-Design) is a browser-based tool that enables BigCommerce merchants to rapidly modify and customize a storefront's look and feel without writing any code. A merchant using Store Design can customize a storefront theme by modifying characteristics from a variety of menu options such as **Styles, Colors, Typography, Buttons**, and more. + +[Store Design](https://support.bigcommerce.com/s/article/Store-Design) is a browser-based tool that enables BigCommerce merchants to rapidly modify and customize a storefront's look and feel without writing any code. A merchant using Store Design can customize a storefront theme by modifying characteristics from a variety of menu options such as **Styles, Colors, Typography, Buttons**, and more. As a theme developer, you can configure your own settings for Store Design. Your configuration determines the theme's customizable aspects. For example, by customizing the configuration of Store Design, you can modify how merchants can customize colors, fonts, display of page features, and number of products to display per feature. @@ -39,7 +39,7 @@ You release your Star Glow theme, version 1. This theme's confi The merchant uses Store Design to change the `logo_size` setting to 175x275. This customized setting is stored in the BigCommerce configuration service. You release Star Glow, version 1.1. In this theme revision, you have changed the `logo_size` to 300x300. When the merchant applies Star Glow version 1.1 to their store, their custom `logo_size` setting of 175x275 remains in effect. -If you the merchant creates a second store and applies Star Glow version 1.1 to it, that store has no custom `logo_size` setting – so it will default to the new theme version's 300x300 value. +If the merchant creates a second store and applies Star Glow version 1.1 to it, that store has no custom `logo_size` setting – so it will default to the new theme version's 300x300 value. ## Resources diff --git a/docs/storefront/stencil/start/tech-stack.mdx b/docs/storefront/stencil/start/tech-stack.mdx index 7fb30b99e..5e7e48ef3 100644 --- a/docs/storefront/stencil/start/tech-stack.mdx +++ b/docs/storefront/stencil/start/tech-stack.mdx @@ -49,7 +49,7 @@ As a developer, you can use Handlebars.js syntax to access objects and use them Stencil objects are categorized as either Global, Common, or Other, which is representative of the object's scope or where in the theme it can be accessed. For example, Global Objects are components shared across the entire BigCommerce storefront. ### Migration handlebars v3 to v4 -Depthed paths are now conditionally pushed onto the stack. If the helper uses the same context, then a new stack is not created. Any instances of ../ in templates must be checked for the correct behavior. See [handlebars.js](https://github.com/handlebars-lang/handlebars.js/issues/1028) documentation for more information. +Depth paths are now conditionally pushed onto the stack. If the helper uses the same context, then a new stack is not created. Any instances of ../ in templates must be checked for the correct behavior. See [handlebars.js](https://github.com/handlebars-lang/handlebars.js/issues/1028) documentation for more information. ## YAML front matter overview diff --git a/docs/storefront/stencil/themes/accessibility/implementing-wcag-guidelines.mdx b/docs/storefront/stencil/themes/accessibility/implementing-wcag-guidelines.mdx index 0f2c7d566..f80260112 100644 --- a/docs/storefront/stencil/themes/accessibility/implementing-wcag-guidelines.mdx +++ b/docs/storefront/stencil/themes/accessibility/implementing-wcag-guidelines.mdx @@ -33,7 +33,7 @@ To satisfy the [Location](https://www.w3.org/TR/WCAG21/#location) WCAG guideline ![Breadcrumbs](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/WCAG_guidelines_breadcrumbs.png "Breadcrumbs") ## Unusual Words -To satisfy the [unusual words](https://www.w3.org/TR/WCAG21/#unusual-words) WCAG guideline, add links to your footer categories section in the your theme. We recommend adding links using your store's BigCommerce control panel. Insert a script in the Storefront > Script Manager field. Example code is provided below. Replace each `/page-link/` and `Add Link Name` with the actual links and names. +To satisfy the [unusual words](https://www.w3.org/TR/WCAG21/#unusual-words) WCAG guideline, add links to your footer categories section in your theme. We recommend adding links using your store's BigCommerce control panel. Insert a script in the Storefront > Script Manager field. Example code is provided below. Replace each `/page-link/` and `Add Link Name` with the actual links and names. ```html showLineNumbers diff --git a/docs/storefront/stencil/themes/accessibility/index.mdx b/docs/storefront/stencil/themes/accessibility/index.mdx index 5c5c38917..8289ae2bc 100644 --- a/docs/storefront/stencil/themes/accessibility/index.mdx +++ b/docs/storefront/stencil/themes/accessibility/index.mdx @@ -1,4 +1,4 @@ -# Developing Accessible Themes +# Developing Accessible Themes @@ -17,14 +17,14 @@ Alternative (alt) text is an image description read aloud by a screen reader. Ad In Cornerstone, go to `templates/components/common/store-logo.html`. In the `` tag, provide descriptive alt text for your store logo. - + You can update the `title` attribute with the same text as the `alt` attribute to create a tooltip, or remove it if you do not need it. ```html showLineNumbers -BigCommerce store logo +BigCommerce store logo ``` - + **Alt image text in Page Builder** You can add alt text to the `` element in the Image widget of Page Builder or the `cornerstone/assets/img/` directory. @@ -38,13 +38,13 @@ Follow the steps below to add alt text to an image using Page Builder: ![Image Widget](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/accessibility-image-widget.png "Image Widget") ### Aria-label attribute -There are other options for providing text for images. Developers can use the aria-label attribute, a [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) technique that provides assistive technology with the aria-label text instead of the image alt text. +There are other options for providing text for images. Developers can use the aria-label attribute, a [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) technique that provides assistive technology with the aria-label text instead of the image alt text. The aria-label attribute uses an ID reference value that matches the ID element attribute to associate an element with text. Screen readers use the text of one or more identified elements that can be referenced elsewhere on the page. **Popup modal text example** -In Cornerstone, put the following code at the bottom of your stencil template html: +In Cornerstone, put the following code at the bottom of your stencil template HTML: ```html showLineNumbers
@@ -84,7 +84,7 @@ It is essential to avoid using dark colors for both the background and text colo ![Poor contrast](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/accessibility_poor_color_contrast.png "Black text on a dark green background") -The following example displays black text on a gray background, which demonstrates good color contrast. The contrast ratio is 14.9.1, which meets WCAG guidelines. +The following example displays black text on a gray background, which demonstrates good color contrast. The contrast ratio is 14.9.1, which meets WCAG guidelines. **Good contrast ratio** @@ -145,7 +145,7 @@ Additional linked text recommendations: * Remove broken or empty links. ## Keyboard accessibility -Keyboard accessibility involves making a theme accessible without the use of a mouse. Ensure you can navigate to all links, menus, buttons, and form fields using the keyboard. +Keyboard accessibility involves making a theme accessible without the use of a mouse. Ensure you can navigate to all links, menus, buttons, and form fields using the keyboard. To test a page's keyboard accessibility, press the `Tab` key and navigate from the top of the page to the bottom. The navigation order must be logical and intuitive. @@ -155,7 +155,7 @@ To enable an element to participate in keyboard navigation, use the `tabindex` g a.setAttribute("tabindex","0") ``` -To see `tabindex` in action, open the following example in a new tab: [native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html). +To see `tabindex` in action, open the following example in a new tab: [native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html). Press the `Tab` key and navigate from the top of the page to the bottom, highlighting active elements. You can also use the arrow keys to scroll through the drop-down menu. @@ -179,7 +179,7 @@ background: #fff; } ``` -There are many more customizations and changes you can make to increase your store's accessibility; this article lists just a few. To learn more about accessibility, see the list of related resources below. +There are many more customizations and changes you can make to increase your store's accessibility; this article lists just a few. To learn more about accessibility, see the list of related resources below. ## Related resources For apps that can check and improve your site's accessibility, see our Site Tools category in the [App Marketplace](https://www.bigcommerce.com/apps/categories/?query=accessibility). diff --git a/docs/storefront/stencil/themes/checkout-enhancements/stored-payment-methods.mdx b/docs/storefront/stencil/themes/checkout-enhancements/stored-payment-methods.mdx index 13964a103..ca5a39aa3 100644 --- a/docs/storefront/stencil/themes/checkout-enhancements/stored-payment-methods.mdx +++ b/docs/storefront/stencil/themes/checkout-enhancements/stored-payment-methods.mdx @@ -1,6 +1,6 @@ # Adding Stored Payment Methods -The [Cornerstone 2.6.0 release](/release-notes#posts/cornerstone-2-6-0-release) added stored payment method management for saved credit cards to the customer `account.php` page. The [Cornerstone 4.4.0 release](/release-notes#posts/cornerstone-4-4-0-release) expanded this functionality to include saving PayPal accounts using [PayPal Powered by Braintree](https://support.bigcommerce.com/s/article/Connecting-with-PayPal-Powered-by-Braintree). +The [Cornerstone 2.6.0 release](/release-notes#posts/cornerstone-2-6-0-release) added stored payment method management for saved credit cards to the customer `account.php` page. The [Cornerstone 4.4.0 release](/release-notes#posts/cornerstone-4-4-0-release) expanded this functionality to include saving PayPal accounts using [PayPal Powered by Braintree](https://support.bigcommerce.com/s/article/Connecting-with-PayPal-Powered-by-Braintree). This article contains instructions for manually applying the changes made in `4.4.0` to themes version `2.6.0 ` to `4.3.1`. For a full diff of the files to change, see [Cornerstone pull request 1603 (GitHub)](https://github.com/bigcommerce/cornerstone/pull/1603/files). If you're developing on a theme older than version `2.6.0` you'll first need to apply the changes made in `2.6.0`; to do so, see [Stored Credit Card Management](/archive/storefront/stencil/stored-credit-card-management). For theme update best practices, see [Theme Updates and Version Control](/docs/storefront/stencil/deployment/updates-and-version-control). @@ -105,7 +105,7 @@ To install the Storefront account payments microapp to your theme, inject the `a {{/if}} ``` -The `account_payments` variable includes the `
` element that renders the microapp and a script tag containing the microapp URL. If the `window.BigCommerce` object does not yet exist, insert a script to create it. +The `account_payments` variable includes the `
` element that renders the microapp and a script tag containing the microapp URL. If the `window.BigCommerce` object does not yet exist, insert a script to create it. If the selected payment provider already has an integration with the Storefront account payments microapp, [initializing window.BigCommerce.renderAccountPayments](#initialize-the-microapp) renders the microapp automatically. @@ -118,14 +118,14 @@ Initialize the microapp by calling the `renderAccountPayments()` method of the s The `renderAccountPayments()` method takes the following three parameters: * `style` - an options **object** for customizing the look of the microapp form. May be empty. -* `storeContextData` - an **object** that supplies store context. +* `storeContextData` - an **object** that supplies store context. * `errorHandler` - a **function** that the microapp calls if the payments form submission fails. ```js filename="Example renderAccountPayments() wrapper function" copy const initializeMicroapp = (style, storeContextData, errorHandler) => window.BigCommerce.renderAccountPayments(style, storeContextData, errorHandler); ``` -This [Cornerstone example (GitHub)](https://github.com/bigcommerce/cornerstone/blob/master/assets/js/theme/account.js#L102) initializes `window.BigCommerce.renderAccountPayments` using JavaScript. +This [Cornerstone example (GitHub)](https://github.com/bigcommerce/cornerstone/blob/master/assets/js/theme/account.js#L102) initializes `window.BigCommerce.renderAccountPayments` using JavaScript. The following example expresses the method's parameters as a TypeScript interface: @@ -211,7 +211,7 @@ enum PaymentProviders { Card data is stored securely with the payment gateway. -**Is storing credit cards PCI compliant?** +**Is storing credit cards PCI-compliant?** Card data is stored securely with the payment gateway. The BigCommerce store is NOT storing the payment data. diff --git a/docs/storefront/stencil/themes/context/object-reference/config.yml b/docs/storefront/stencil/themes/context/object-reference/config.yml index a6caa5141..67eaf7a35 100644 --- a/docs/storefront/stencil/themes/context/object-reference/config.yml +++ b/docs/storefront/stencil/themes/context/object-reference/config.yml @@ -10,7 +10,7 @@ properties: version: type: string example: '"2.6.0"' - description: The themeʼs version number. + description: The theme's version number. meta: type: object description: BigCommerce will use this metadata to list themes in Theme Marketplace. @@ -30,7 +30,7 @@ properties: documentation_url: type: string example: '"https://support.bigcommerce.com/articles/Public/Cornerstone-Theme-Manual"' - description: URL of the themeʼs developer documentation. + description: URL of the theme's developer documentation. author_name: type: string example: 'eCommerce Themes, Inc.' @@ -88,7 +88,7 @@ properties: type: string example: '"scss"' default: SCSS - description: Name of the themeʼs CSS preprocessor. + description: Name of the theme's CSS preprocessor. autoprefixer_cascade: type: boolean description: Denotes whether to enable the Autoprefixer CSS postprocessor in order to add vendor prefixes to CSS rules. diff --git a/docs/storefront/stencil/themes/context/object-reference/helpers/cart/cartItems.yml b/docs/storefront/stencil/themes/context/object-reference/helpers/cart/cartItems.yml index 4a0303668..5a33e5301 100644 --- a/docs/storefront/stencil/themes/context/object-reference/helpers/cart/cartItems.yml +++ b/docs/storefront/stencil/themes/context/object-reference/helpers/cart/cartItems.yml @@ -62,7 +62,7 @@ items: description: URL to remove gift certificate from the cart. rrp: type: object - description: Price object that defines the cart itemʼs list price (MSRP); can be used to display struck-out list prices. + description: Price object that defines the cart item's list price (MSRP); can be used to display struck-out list prices. properties: currency: type: string diff --git a/docs/storefront/stencil/themes/context/object-reference/helpers/common/product.yml b/docs/storefront/stencil/themes/context/object-reference/helpers/common/product.yml index 67a652bcb..6e0ffb417 100644 --- a/docs/storefront/stencil/themes/context/object-reference/helpers/common/product.yml +++ b/docs/storefront/stencil/themes/context/object-reference/helpers/common/product.yml @@ -39,7 +39,7 @@ properties: low_stock_level: type: 'null' description: |- - If inventory tracking is turned on: Sets a threshold low-stock level. You can use conditional logic to display a “limited availability” badge if the stock_level propertyʼs value falls below this threshold. If inventory tracking is turned off: A “null” string. + If inventory tracking is turned on: Sets a threshold low-stock level. You can use conditional logic to display a “limited availability” badge if the stock_level property's value falls below this threshold. If inventory tracking is turned off: A “null” string. name: type: string num_reviews: diff --git a/docs/storefront/stencil/themes/context/object-reference/helpers/forms/login.yml b/docs/storefront/stencil/themes/context/object-reference/helpers/forms/login.yml index 7634dba48..220ba53f7 100644 --- a/docs/storefront/stencil/themes/context/object-reference/helpers/forms/login.yml +++ b/docs/storefront/stencil/themes/context/object-reference/helpers/forms/login.yml @@ -15,10 +15,10 @@ properties: type: string enabled: type: string - description: Returns 1 when reCAPTCHA is enabled and 0 when itʼs disabled within the BigCommerce control panel. + description: Returns 1 when reCAPTCHA is enabled and 0 when it's disabled within the BigCommerce control panel. public_key: type: string description: Optional key used for all reCAPTCHA in your store if specified in the BigCommerce control panel. markup: type: string - description: HTML that adds reCAPTCHA V2. \ No newline at end of file + description: HTML that adds reCAPTCHA V2. diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/banners.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/banners.yml index 0792bc935..cc49a62ef 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/banners.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/banners.yml @@ -1,5 +1,5 @@ description: |- - Elements of marketing banners at pageʼs top and/or bottom. + Elements of marketing banners at page's top and/or bottom. `global` `{{banners}}` object @@ -13,7 +13,7 @@ description: |- **Limits** * `{{banners}}` will only return the first 50 banners on each page. - + type: object properties: bottom: diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/blog.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/blog.yml index deb957f54..5cab18d6f 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/blog.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/blog.yml @@ -21,7 +21,7 @@ oneOf: $ref: https://raw.githubusercontent.com/bigcommerce/docs/main/docs/storefront/stencil/themes/context/object-reference/helpers/blog/posts.yml tag: type: 'null' - description: The blogʼs tag. + description: The blog's tag. url: type: string description: URL to the blog page. diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/breadcrumbs.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/breadcrumbs.yml index 84ef80e65..3b27bf8cc 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/breadcrumbs.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/breadcrumbs.yml @@ -1,5 +1,5 @@ description: |- - Defines a pageʼs breadcrumbs. Available on virtually all pages that have a breadcrumb trail. + Defines a page's breadcrumbs. Available on virtually all pages that have a breadcrumb trail. `global` `{{breadcrumbs}}` array diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/cart.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/cart.yml index 332dd7486..3201be61c 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/cart.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/cart.yml @@ -31,11 +31,11 @@ properties: type: object description: Discount being applied to the cart in the current session. properties: - formatted: + formatted: type: string value: type: integer - currency: + currency: string gift_certificates: type: array @@ -118,11 +118,11 @@ properties: type: boolean category_names: type: array - items: + items: type: string configurable_fields: type: array - items: + items: type: object custom_fields: type: array @@ -196,7 +196,7 @@ properties: description: URL to remove gift certificate from the cart. rrp: type: object - description: Price object that defines the cart itemʼs list price (MSRP); can be used to display struck-out list prices. + description: Price object that defines the cart item's list price (MSRP); can be used to display struck-out list prices. properties: currency: type: string diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/comparisons.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/comparisons.yml index fd3bb133d..7d28e8fa8 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/comparisons.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/comparisons.yml @@ -28,7 +28,7 @@ items: type: string custom_fields: type: array - description: Array of additional product details as name-value pairs. For example, size, color, bookʼs ISBN, DVDʼs release date, etc. + description: Array of additional product details as name-value pairs. For example, size, color, book's ISBN, DVD's release date, etc. items: type: object properties: diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/countries.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/countries.yml index b5391c8ea..fb668ad0a 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/countries.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/countries.yml @@ -23,7 +23,7 @@ items: example: Pound Sterling symbol: type: string - description: The symbol for the currencyʼs primary display unit. + description: The symbol for the currency's primary display unit. example: £ id: type: integer @@ -31,15 +31,15 @@ items: example: 2 iso2: type: string - description: The countryʼs [ISO 3166 Alpha-2](https://www.iso.org/iso-3166-country-codes.html) code. + description: The country's [ISO 3166 Alpha-2](https://www.iso.org/iso-3166-country-codes.html) code. example: GB iso3: type: string - description: The countryʼs [ISO 3166 Alpha-3](https://www.iso.org/iso-3166-country-codes.html) code. + description: The country's [ISO 3166 Alpha-3](https://www.iso.org/iso-3166-country-codes.html) code. example: GBR name: type: string - description: The countryʼs display name. + description: The country's display name. example: United Kingdom selected: type: boolean diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/customer.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/customer.yml index 7b9805a97..e54040f0a 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/customer.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/customer.yml @@ -8,20 +8,20 @@ properties: $ref: https://raw.githubusercontent.com/bigcommerce/docs/main/docs/storefront/stencil/themes/context/object-reference/helpers/customer/addresses.yml customer_group_id: type: number - description: ID of this customerʼs group. + description: ID of this customer's group. customer_group_name: type: string - description: Name of this customerʼs group. + description: Name of this customer's group. edit_stored_instrument: type: string email: type: string description: Customer’s email address. id: - description: Customerʼs ID. + description: Customer's ID. type: integer name: - description: Customerʼs name. + description: Customer's name. type: string num_new_messages: description: Number of unread messages for this customer. @@ -34,7 +34,7 @@ properties: payment_methods: $ref: https://raw.githubusercontent.com/bigcommerce/docs/main/docs/storefront/stencil/themes/context/object-reference/helpers/customer/payment_methods.yml phone: - description: Customerʼs phone number. + description: Customer's phone number. type: string recently_viewed_products: type: array @@ -47,28 +47,28 @@ properties: type: object properties: address1: - description: Customerʼs shipping address, first line. + description: Customer's shipping address, first line. type: string address2: - description: Customerʼs shipping address, second line. + description: Customer's shipping address, second line. type: string city: - description: Customerʼs shipping city. + description: Customer's shipping city. type: string company: - description: Customerʼs shipping company name. + description: Customer's shipping company name. type: string country: - description: Customerʼs shipping country. + description: Customer's shipping country. type: string country_id: - description: ID for customerʼs shipping country. + description: ID for customer's shipping country. type: string destination: description: 'Type of delivery destination: residential or business/commercial.' type: string first_name: - description: Customerʼs shipping (first) name. + description: Customer's shipping (first) name. type: string form_session_id: description: Used for custom shipping forms. @@ -77,27 +77,27 @@ properties: description: 'Unique, system-generated ID.' type: string last_name: - description: Customerʼs shipping (last) name. + description: Customer's shipping (last) name. type: string last_used: description: Timestamp when this address was last used as a shipping address. type: string phone: - description: Customerʼs shipping phone number. + description: Customer's shipping phone number. type: string state: - description: Customerʼs shipping state. + description: Customer's shipping state. type: string state_id: - description: ID for customerʼs shipping state/province/region. + description: ID for customer's shipping state/province/region. type: string zip: - description: Customerʼs shipping postal code. + description: Customer's shipping postal code. type: string shipping_addresses: $ref: https://raw.githubusercontent.com/bigcommerce/docs/main/docs/storefront/stencil/themes/context/object-reference/helpers/customer/orders.yml store_credit: - description: Customerʼs store credit. + description: Customer's store credit. type: object properties: currency: diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/head.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/head.yml index 0f7ee70f5..ca0391ad2 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/head.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/head.yml @@ -5,7 +5,7 @@ description: | type: object properties: favicon: - description: The storeʼs favicon. + description: The store's favicon. type: string meta_tags: description: Meta tags to improve store SEO. @@ -17,5 +17,5 @@ properties: description: CSS files to be included. type: string title: - description: Current pageʼs title. + description: Current page's title. type: string diff --git a/docs/storefront/stencil/themes/context/object-reference/schemas/order.yml b/docs/storefront/stencil/themes/context/object-reference/schemas/order.yml index 423c60226..6f4d4dbe9 100644 --- a/docs/storefront/stencil/themes/context/object-reference/schemas/order.yml +++ b/docs/storefront/stencil/themes/context/object-reference/schemas/order.yml @@ -169,30 +169,30 @@ properties: properties: address_lines: type: array - description: Customerʼs billing address + description: Customer's billing address items: type: string city: type: string - description: Customerʼs billing city + description: Customer's billing city company: type: string - description: Customerʼs billing company name + description: Customer's billing company name country: type: string description: Customer billing country email: type: string - description: Customerʼs billing email + description: Customer's billing email full_name: type: string - description: Customerʼs billing name + description: Customer's billing name phone: type: string description: Customer billing phone number state: type: string - description: Customerʼs billing state + description: Customer's billing state zip: type: string description: Customer billing ZIP @@ -303,33 +303,33 @@ properties: properties: address_lines: type: array - description: Customerʼs shipping address + description: Customer's shipping address items: type: string city: type: string - description: Customerʼs shipping city + description: Customer's shipping city company: type: string - description: Customerʼs shipping company name + description: Customer's shipping company name country: type: string - description: Customerʼs shipping country + description: Customer's shipping country email: type: string - description: Customerʼs email + description: Customer's email full_name: type: string - description: Customerʼs shipping name + description: Customer's shipping name phone: type: string - description: Customerʼs shipping phone number + description: Customer's shipping phone number state: type: string - description: Customerʼs shipping state + description: Customer's shipping state zip: type: string - description: Customerʼs shipping zip + description: Customer's shipping zip shipping_address_count: type: string description: Number of shipping addresses the customer has specified for this order. diff --git a/docs/storefront/stencil/themes/foundations/react.mdx b/docs/storefront/stencil/themes/foundations/react.mdx index c070d094a..f22d67cfc 100644 --- a/docs/storefront/stencil/themes/foundations/react.mdx +++ b/docs/storefront/stencil/themes/foundations/react.mdx @@ -1,6 +1,6 @@ --- title: Using npm and React to Customize Your Theme -keywords: stencil, js, javascript, node, mern, if, +keywords: stencil, js, javascript, node, mern, if, --- # Using npm and React to Customize Your Theme @@ -41,7 +41,7 @@ npm install --save-dev @babel/preset-react ### Update webpack.common.js -Update` webpack.common.js` with the react preset. +Update` webpack.common.js` with the React preset. ```js filename="Example 2: New presets and plugins" showLineNumbers copy ... @@ -263,7 +263,7 @@ if (couponContainer) { ...
- + {{> components/common/header }} {{> components/common/body }} {{> components/common/footer }} diff --git a/docs/storefront/stencil/themes/style/fonts-and-icons.mdx b/docs/storefront/stencil/themes/style/fonts-and-icons.mdx index a1521fa76..97ef82229 100644 --- a/docs/storefront/stencil/themes/style/fonts-and-icons.mdx +++ b/docs/storefront/stencil/themes/style/fonts-and-icons.mdx @@ -2,7 +2,7 @@ #### Custom fonts unavailable on Page Builder - * BigCommerce widgets come with a list of pre-defined fonts and do not support custom fonts at this time. + * BigCommerce widgets come with a list of pre-defined fonts and do not support custom fonts at this time. * Third-party widgets can support any font available in the theme. To learn more about third-party widgets, see [Third-Party Widgets](/docs/storefront/stencil/content/widgets). @@ -17,7 +17,7 @@ There are two paths to take for using custom fonts. They are as follows: ### Google Fonts -[Google Fonts](https://fonts.google.com/) are a collection of open-source fonts available for use. The base Cornerstone theme uses Karla and Montserrat. Google Fonts come included in the Cornerstone theme. +[Google Fonts](https://fonts.google.com/) are a collection of open-source fonts available for use. The base Cornerstone theme uses Karla and Montserrat. Google Fonts come included in the Cornerstone theme. You can update the fonts in `config.json`; make sure to follow the `Google_FontName_Weight` format. @@ -114,7 +114,7 @@ Assume that your theme's `config.json` contains the following key name and value ```json showLineNumbers { // ... - "headings-font": "Google_Open+Sans_700"` + "headings-font": "Google_Open+Sans_700" // ... } ``` @@ -176,6 +176,6 @@ Simply add your new icon SVG file to the `assets/icons/ `folder. Then, from your ### Additional resources * [Stencil Custom Sass Functions](/docs/storefront/stencil/themes/style/sass) -* [Custom Icons Video Tutorial (BigCommerce YouTube)](https://youtube.com/watch?v=ZwrVN5QrEZY) -* [Custom Fonts Video Tutorial (BigCommerce YouTube)](https://youtube.com/watch/-w7Hbn_p_pw) +* [Custom Icons Video Tutorial (BigCommerce YouTube)](https://youtube.com/watch?v=ZwrVN5QrEZY) +* [Custom Fonts Video Tutorial (BigCommerce YouTube)](https://youtube.com/watch/-w7Hbn_p_pw) * [Google Fonts (Google)](https://fonts.google.com/) diff --git a/docs/storefront/stencil/themes/templates/index.mdx b/docs/storefront/stencil/themes/templates/index.mdx index 2f249b838..8228f39d4 100644 --- a/docs/storefront/stencil/themes/templates/index.mdx +++ b/docs/storefront/stencil/themes/templates/index.mdx @@ -19,12 +19,12 @@ This section explains how to author a custom template, map it to a URL, upload i ## Authoring a custom template -If you're a theme developer, the first step is to create a custom template page. +If you're a theme developer, the first step is to create a custom template page. To create a custom page: -1. Create a `custom` subdirectory in the `templates/pages` directory. -2. Create the following four subdirectories under the `templates/pages/custom` directory: +1. Create a `custom` subdirectory in the `templates/pages` directory. +2. Create the following four subdirectories under the `templates/pages/custom` directory: * brand * category @@ -38,7 +38,7 @@ To create a custom page: Make sure to set following permissions: * `755 (drwxr-x-r-x)` on all new subdirectories -* `644 (rw-r–r–)` on all new files +* `644 (rw-r–r–)` on all new files Without these permissions, running your theme locally will fail with multiple error messages. You also will not be able to bundle your theme and the theme won't be uploaded to the store. @@ -57,7 +57,7 @@ The requirements and options for mapping the `.stencil` or `config.stencil.json` * When mapping URLs, make sure to convert any special characters to their [URL-encoded equivalents](https://www.urlencoder.org/). -* After editing your `.stencil` or `config.stencil.json` files (if you are using Stencil V3.1 release or later), you must restart the Stencil app to view your changes locally. +* After editing your `.stencil` or `config.stencil.json` files (if you are using Stencil V3.1 release or later), you must restart the Stencil app to view your changes locally. To restart stencil, type `stencil start` at a command prompt, and append the appropriate switches for your workflow, for example: `stencil start -e -n`. ### Local mapping and testing @@ -128,9 +128,9 @@ In addition to mapping a single array to a URL you can also map an array of URLs ## Specifying custom front matter -You can add front matter directly to a custom template. For more information on using front matter, see [Using Front Matter](/docs/storefront/stencil/themes/context/frontmatter) +You can add front matter directly to a custom template. For more information on using front matter, see [Using Front Matter](/docs/storefront/stencil/themes/context/frontmatter) -The following example shows how to add front matter data to the `templates/pages/custom/brand/custom-brand.html` file. +The following example shows how to add front matter data to the `templates/pages/custom/brand/custom-brand.html` file. @@ -150,7 +150,7 @@ The following example shows how to add front matter data to the `templates/pages -## Uploading a theme +## Uploading a theme Before you can apply your custom template to pages you need to bundle and push the theme to BigCommerce. For detailed instructions, see [Bundling and Pushing a Theme](/docs/storefront/stencil/deployment/upload). @@ -178,7 +178,7 @@ This is necessary because all the brand pages are located under the /brands/ URL ### Outdated Stencil CLI -If you have an old version of Stencil CLI installed, custom templates may not be supported and you need to update your CLI. To update CLI, issue the following command: +If you have an old version of Stencil CLI installed, custom templates may not be supported, and you need to update your CLI. To update CLI, issue the following command: `npm install -g bigcommerce/stencil-cli` ## Resources diff --git a/docs/storefront/stencil/utils/events.mdx b/docs/storefront/stencil/utils/events.mdx index 6b106ce35..e8b21ddf5 100644 --- a/docs/storefront/stencil/utils/events.mdx +++ b/docs/storefront/stencil/utils/events.mdx @@ -5,7 +5,7 @@ Stencil themes provide access to remote resources through data tags and event hooks. Developers can use these hooks to trigger defined events. A theme can hook to an event to perform actions or calculations based on shopper behavior. -Stencil themes incorporate event hooks by importing the stencil-utils module. If take a look at [cornerstone/assets/js/theme/](https://github.com/bigcommerce/cornerstone/tree/master/assets/js/theme), you will see the import statement `'import utils from '@bigcommerce/stencil-utils';` at the top of files using leveraging event hooks. +Stencil themes incorporate event hooks by importing the stencil-utils module. Looking at [cornerstone/assets/js/theme/](https://github.com/bigcommerce/cornerstone/tree/master/assets/js/theme), you will see the import statement `'import utils from '@bigcommerce/stencil-utils';` at the top of files using leveraging event hooks. ## Cookie Notification Example @@ -50,7 +50,7 @@ In the following code snippet from Cornerstone in [templates/components/products This data tag enables the emission of the `cart‑item‑add` event in this next snippet: ```js filename="Emitter, cart‑item‑add event" showLineNumbers copy -/* +/* * Import all product-specific js */ [...]