git merge 6.13.0

.nvmrc

@@ -0,0 +1 @@
+18.15

CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 
+## 6.13.0 (02-12-2024)
+
+- Fix HTML markup for product listing and below content region [#2426](https://github.com/bigcommerce/cornerstone/pull/2426)
+- With Product Filtering enabled widgets on category page disappear after navigating using pagination [#2425](https://github.com/bigcommerce/cornerstone/pull/2425)
+- Update layout with correct usage of main tag [#2421](https://github.com/bigcommerce/cornerstone/pull/2421)
+- Anchor links on category pages are not working when product filtering is enabled [#2415](https://github.com/bigcommerce/cornerstone/pull/2415)
+- Dispatch an event on productOptionsChanged [#2400](https://github.com/bigcommerce/cornerstone/pull/2400)
+- Check lang helpers usage and existence of key in translation file [#2403](https://github.com/bigcommerce/cornerstone/pull/2403)
+- Display fees on cart page [#2376](https://github.com/bigcommerce/cornerstone/pull/2376)
+- Replace Twitter logo with X logo within social sharing and social link components [#2387](https://github.com/bigcommerce/cornerstone/pull/2387)
+- Added nvm config [#2389](https://github.com/bigcommerce/cornerstone/pull/2389)
+- Displaying the Hidden cart_order_source Input Field on PDP page [#2392](https://github.com/bigcommerce/cornerstone/pull/2392)
+- Videos added through the Product Editor have their thumbnails cropped compared to videos added through the page builder [#2413](https://github.com/bigcommerce/cornerstone/pull/2413)
+- Update Shop By Price Widget [#2408](https://github.com/bigcommerce/cornerstone/pull/2408)
+- 'Please Select a file' popup forces shopper to re-upload file if the option type is 'File Upload' and is set to required [#2409](https://github.com/bigcommerce/cornerstone/pull/2409)
+- Top Global Region Image Widget overlaps the mobile menu [#2402](https://github.com/bigcommerce/cornerstone/pull/2402)
+- Changed default PayPal checkout button color [#2405](https://github.com/bigcommerce/cornerstone/pull/2405)
+- Changed default PayPal checkout button size [#2406](https://github.com/bigcommerce/cornerstone/pull/2406)
+- Change case of Page builder menu item text [#2407](https://github.com/bigcommerce/cornerstone/pull/2407)
+- Corrected typo with the word default previously deafault in config.json [#2410](https://github.com/bigcommerce/cornerstone/pull/2410)
+- Adding autocomplete to common input fields [2397](https://github.com/bigcommerce/cornerstone/pull/2397)
+- Pre-Orded text in Polish looks cropped in the button on Product page [2414](https://github.com/bigcommerce/cornerstone/pull/2414)
+- Use triple sash on customer's company name to prevent escaping ampersands [#2399](https://github.com/bigcommerce/cornerstone/pull/2399)
+- Adding aria attributes to cart page coupon code and gift cert buttons [#2391](https://github.com/bigcommerce/cornerstone/pull/2391)
+
 ## 6.12.0 (07-06-2023)
 
 - sync package lock file [#2373](https://github.com/bigcommerce/cornerstone/pull/2373)
@@ -18,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added ACH payment method section to My Account -> Payment Methods page [#2362](https://github.com/bigcommerce/cornerstone/pull/2362)
 - Remove data_tag_enabled check from everywhere [#2369][https://github.com/bigcommerce/cornerstone/pull/2369]
 - Fix add product to cart on iphone x (iphone version 11) [#2370][https://github.com/bigcommerce/cornerstone/pull/2370]
+- Display fees on cart page [#2360](https://github.com/bigcommerce/cornerstone/pull/2376)
 
 ## 6.11.0 (05-24-2023)
 

README.md

@@ -47,6 +47,107 @@ git pull upstream main
 
 - Run this command in a separate terminal so it will continue to run while you are developing.
 
+# Cornerstone
+
+![tests](https://github.com/bigcommerce/cornerstone/workflows/Theme%20Bundling%20Test/badge.svg?branch=master)
+
+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](https://github.com/bigcommerce/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"
+- "pages/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.
+
+```javascript
+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:
+
+```html
+{{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`.
+
+## Polyfilling via Feature Detection
+
+Cornerstone implements [this strategy](https://philipwalton.com/articles/loading-polyfills-only-when-needed/) for polyfilling.
+
+In `templates/components/common/polyfill-script.html` there is a simple feature detection script which can be extended to detect any recent JS features you intend to use in your theme code.
+
+If any one of the conditions is not met, an additional blocking JS bundle configured in `assets/js/polyfills.js` will be loaded to polyfill modern JS features before the main bundle executes.
+
+This intentionally prioritizes the experience of the 90%+ of shoppers who are on modern browsers in terms of performance, while maintaining compatibility (at the expense of additional JS download+parse for the polyfills) for users on legacy browsers.
+
 ## Static assets
 
 Some static assets in the Stencil theme are handled with Grunt if required. This
@@ -64,9 +165,9 @@ and run:
 npm install
 ```
 
-Note: package-lock.json file was generated by Node version 10 and npm version 6.11.3. The app supports Node 10 as well as multiple versions of npm, but 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.
+Note: package-lock.json file was generated by Node version 18 and npm version 9. The app supports Node 18 as well as multiple versions of npm, but 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 10 and npm version 6.11.3 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.
+If updating or adding a dependency, please double check that you are working on Node version 18 and npm version 9 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
 

assets/js/theme/cart.js

@@ -317,6 +317,7 @@ export default class Cart extends PageManager {
 
       $(event.currentTarget).hide();
       $couponContainer.show();
+      $couponContainer.attr('aria-hidden', false);
       $('.coupon-code-cancel').show();
       $codeInput.trigger('focus');
     });
@@ -325,6 +326,7 @@ export default class Cart extends PageManager {
       event.preventDefault();
 
       $couponContainer.hide();
+      $couponContainer.attr('aria-hidden', true);
       $('.coupon-code-cancel').hide();
       $('.coupon-code-add').show();
     });
@@ -358,12 +360,14 @@ export default class Cart extends PageManager {
       event.preventDefault();
       $(event.currentTarget).toggle();
       $certContainer.toggle();
+      $certContainer.attr('aria-hidden', false);
       $('.gift-certificate-cancel').toggle();
     });
 
     $('.gift-certificate-cancel').on('click', (event) => {
       event.preventDefault();
       $certContainer.toggle();
+      $certContainer.attr('aria-hidden', true);
       $('.gift-certificate-add').toggle();
       $('.gift-certificate-cancel').toggle();
     });

assets/js/theme/category.js

@@ -2,7 +2,7 @@ import { hooks } from '@bigcommerce/stencil-utils';
 import CatalogPage from './catalog';
 import compareProducts from './global/compare-products';
 import FacetedSearch from './common/faceted-search';
-import { createTranslationDictionary } from './common/utils/translations-utils';
+import { createTranslationDictionary } from '../theme/common/utils/translations-utils';
 
 export default class Category extends CatalogPage {
   constructor(context) {
@@ -48,11 +48,21 @@ export default class Category extends CatalogPage {
 
     compareProducts(this.context);
 
-    if ($('#facetedSearch').length > 0) {
-      this.initFacetedSearch();
-    } else {
+    this.initFacetedSearch();
+
+    if (!$('#facetedSearch').length) {
       this.onSortBySubmit = this.onSortBySubmit.bind(this);
       hooks.on('sortBy-submitted', this.onSortBySubmit);
+
+      // Refresh range view when shop-by-price enabled
+      const urlParams = new URLSearchParams(window.location.search);
+
+      if (urlParams.has('search_query')) {
+        $('.reset-filters').show();
+      }
+
+      $('input[name="price_min"]').attr('value', urlParams.get('price_min'));
+      $('input[name="price_max"]').attr('value', urlParams.get('price_max'));
     }
 
     $('a.reset-btn').on('click', () =>

assets/js/theme/common/faceted-search.js

@@ -17,8 +17,12 @@ const defaultOptions = {
   priceRangeErrorSelector: '#facet-range-form .form-inlineMessage',
   priceRangeFieldsetSelector: '#facet-range-form .form-fieldset',
   priceRangeFormSelector: '#facet-range-form',
-  priceRangeMaxPriceSelector: '#facet-range-form [name=max_price]',
-  priceRangeMinPriceSelector: '#facet-range-form [name=min_price]',
+  priceRangeMaxPriceSelector: $('#facetedSearch').length
+    ? '#facet-range-form [name=max_price]'
+    : '#facet-range-form [name=price_max]',
+  priceRangeMinPriceSelector: $('#facetedSearch').length
+    ? '#facet-range-form [name=min_price]'
+    : '#facet-range-form [name=price_min]',
   showMoreToggleSelector: '#facetedSearch .accordion-content .toggleLink',
   facetedSearchFilterItems: '#facetedSearch-filterItems .form-input',
   modal: modalFactory('#modal')[0],
@@ -131,6 +135,16 @@ class FacetedSearch {
 
       // Refresh view with new content
       this.refreshView(content);
+
+      // Refresh range view when shop-by-price enabled
+      const urlParams = new URLSearchParams(window.location.search);
+
+      if (urlParams.has('search_query')) {
+        $('.reset-filters').show();
+      }
+
+      $('input[name="price_min"]').attr('value', urlParams.get('price_min'));
+      $('input[name="price_max"]').attr('value', urlParams.get('price_max'));
     });
   }
 
@@ -463,15 +477,8 @@ class FacetedSearch {
   }
 
   onPopState() {
-    const currentUrl = window.location.href;
-    const searchParams = new URLSearchParams(currentUrl);
-    // If searchParams does not contain a page value then modify url query string to have page=1
-    if (!searchParams.has('page')) {
-      const linkUrl = $('.pagination-link').attr('href');
-      const re = /page=[0-9]+/i;
-      const updatedLinkUrl = linkUrl.replace(re, 'page=1');
-      window.history.replaceState({}, document.title, updatedLinkUrl);
-    }
+    if (document.location.hash !== '') return;
+
     $(window).trigger('statechange');
   }
 }

assets/js/theme/common/product-details.js

@@ -348,6 +348,16 @@ export default class ProductDetails extends ProductDetailsBase {
             .find('.productView-info');
           modalFactory('[data-reveal]', { $context });
         }
+
+        document.dispatchEvent(
+          new CustomEvent('onProductOptionsChanged', {
+            bubbles: true,
+            detail: {
+              content: productAttributesData,
+              data: productAttributesContent,
+            },
+          }),
+        );
       },
     );
   }

assets/scss/components/foundation/alerts/_alerts.scss

@@ -14,7 +14,7 @@
 }
 
 .alertBox--info {
-  background-color: stencilColor('banner--deafault-backgroundColor');
+  background-color: stencilColor('banner--default-backgroundColor');
   color: stencilColor('alert-color-alt');
 
   .alertBox-close {

assets/scss/components/stencil/facetedSearch/_facetedSearch.scss

@@ -118,3 +118,7 @@
     font-weight: bold;
   }
 }
+
+.reset-filters {
+  display: none;
+}

assets/scss/components/stencil/navPages/_navPages.scss

@@ -55,7 +55,6 @@
   &.is-open {
     display: block;
     padding-top: $header-height;
-    z-index: 0;
   }
 }
 

assets/scss/components/stencil/productView/_productView.scss

@@ -350,6 +350,24 @@
       width: 50%;
     }
 
+    &.pre-order-buttons {
+      @include breakpoint('small') {
+        min-width: 50%;
+        width: auto;
+      }
+
+      @include breakpoint('medium') {
+        margin-right: remCalc(11px);
+        min-width: auto;
+        padding: 0;
+        width: auto;
+      }
+
+      .button {
+        padding: remCalc(13px) remCalc(24px);
+      }
+    }
+
     .button {
       margin: 0;
       width: 100%;

assets/scss/components/stencil/videoGallery/_videoGallery.scss

@@ -1,10 +1,17 @@
 // =============================================================================
 // VIDEO GALLERY
 // =============================================================================
+//
+// 1. Set padding-top to zero to overwrite the padding-top contained in the
+// flex-video-container mixin, which affects the height of the video container
+// and distorts the video scale.
+//
+// -----------------------------------------------------------------------------
 
 .videoGallery-main {
   @include flex-video-container();
   margin-bottom: $videoGallery-spacing;
+  padding-top: 0; // 1
 }
 
 .videoGallery-list {

assets/scss/layouts/body/_body.scss

@@ -25,6 +25,16 @@
   @include grid-column(12);
 }
 
+.page-region {
+  @include grid-column(12);
+  float: right;
+  width: 100%;
+
+  @include breakpoint('medium') {
+    width: 75%;
+  }
+}
+
 .page-content--centered {
   @include breakpoint('medium') {
     @include grid-column($columns: 8, $center: true);