STENCIL-2944 Google AMP support for product and category pages

bigcommerce · Mar 9, 2017 · d3af229 · d3af229
1 parent 3dff77e
commit d3af229
Show file tree

Hide file tree

Showing 82 changed files with 2,911 additions and 278 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@ node_modules/
 .DS_Store
 assets/css-artifacts
 assets/js/bundle.js
-assets/js/bundle.js.map
+assets/dist
+*.js.map
+*.zip
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,17 @@
 # Changelog
 
 ## Draft
+- Google AMP support for product and category pages [#946](https://github.com/bigcommerce/stencil/pull/946)
 - Expose `language` object on the checkout page [#910](https://github.com/bigcommerce/stencil/pull/910)
-- Update package.json to disambiguate Stencil and Cornerstone [#943] (https://github.com/bigcommerce/stencil/pull/943)
-- Added support up to 8 levels for category menu depth [#939] (https://github.com/bigcommerce/stencil/pull/939)
-- Implement lazyloading for product card images to improve above-the-fold rendering [#944] (https://github.com/bigcommerce/stencil/pull/944)
+- Update package.json to disambiguate Stencil and Cornerstone [#943](https://github.com/bigcommerce/stencil/pull/943)
+- Added support up to 8 levels for category menu depth [#939](https://github.com/bigcommerce/stencil/pull/939)
+- Implement lazyloading for product card images to improve above-the-fold rendering [#944](https://github.com/bigcommerce/stencil/pull/944)
 - Print a readable error instead of dumping the whole error object to the console [#950](https://github.com/bigcommerce/cornerstone/pull/950)
 - Fixed homepage featured products floating left and unecessarily wrapping to next row [#948](https://github.com/bigcommerce/cornerstone/pull/948)
+
 ## 1.5.3 (2017-02-23)
-- Show 'Write a Review' link for mobile [#922] (https://github.com/bigcommerce/stencil/pull/922)
-- Update text input for product review comment to be multiline so it's not too small to be usable [#921] (https://github.com/bigcommerce/stencil/pull/921)
+- Show 'Write a Review' link for mobile [#922](https://github.com/bigcommerce/stencil/pull/922)
+- Update text input for product review comment to be multiline so it's not too small to be usable [#921](https://github.com/bigcommerce/stencil/pull/921)
 - Add a larger view of a swatch image when option is hovered over on the product page [#923](https://github.com/bigcommerce/stencil/pull/923)
 - Fixes an issue with file upload button not properly displaying in IE [#925](https://github.com/bigcommerce/stencil/pull/925)
 - Make sure product review email links automatically pop the review form [#928](https://github.com/bigcommerce/stencil/pull/928)
@@ -22,15 +24,15 @@
 - Remove an unnecessary and confusing option in theme editor [#927](https://github.com/bigcommerce/stencil/pull/927)
 - Fix an issue where required product list options would display an invalid "none" choice [#929](https://github.com/bigcommerce/stencil/pull/929)
 - Remove unused variable causing js error with search in the nav [#938](https://github.com/bigcommerce/stencil/pull/938)
-- Add settings to theme editor schema to customize Optimized Checkout discount banners [#924] (https://github.com/bigcommerce/stencil/pull/924)
-- Update Optimized Checkout discount banners default values per theme variation [#942] (https://github.com/bigcommerce/stencil/pull/942)
+- Add settings to theme editor schema to customize Optimized Checkout discount banners [#924](https://github.com/bigcommerce/stencil/pull/924)
+- Update Optimized Checkout discount banners default values per theme variation [#942](https://github.com/bigcommerce/stencil/pull/942)
 
 ## 1.5.2 (2017-02-14)
 - Added a setting to theme editor schema to show/hide the homepage carousel [#909](https://github.com/bigcommerce/stencil/pull/909)
 - Prevent carousel images from being cut off on large screens by adding a new setting to theme editor schema [#909](https://github.com/bigcommerce/stencil/pull/909)
 - Add schema description specifying that social media icons must be set up to see them [#920](https://github.com/bigcommerce/stencil/pull/920)
-- Show account creation links only if it is enabled in store settings [#917] (https://github.com/bigcommerce/stencil/pull/917)
-- Add GeoTrust SSL Seal Toggle [#903] (https://github.com/bigcommerce/stencil/pull/903)
+- Show account creation links only if it is enabled in store settings [#917](https://github.com/bigcommerce/stencil/pull/917)
+- Add GeoTrust SSL Seal Toggle [#903](https://github.com/bigcommerce/stencil/pull/903)
 
 ## 1.5.1 (2017-02-07)
 - Fix an issue with a horizontal scroll bar showing in theme editor [#915](https://github.com/bigcommerce/stencil/pull/915)

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,7 +1,6 @@
 import 'babel-polyfill';
 
 import $ from 'jquery';
-import async from 'async';
 import account from './theme/account';
 import auth from './theme/auth';
 import blog from './theme/blog';
@@ -13,7 +12,7 @@ import compare from './theme/compare';
 import errors from './theme/errors';
 import errors404 from './theme/404-error';
 import giftCertificate from './theme/gift-certificate';
-import global from './theme/global';
+import Global from './theme/global';
 import home from './theme/home';
 import orderComplete from './theme/order-complete';
 import rss from './theme/rss';
@@ -24,134 +23,86 @@ import sitemap from './theme/sitemap';
 import subscribe from './theme/subscribe';
 import wishlist from './theme/wishlist';
 
-const PageClasses = {
-    mapping: {
-        'pages/account/orders/all': account,
-        'pages/account/orders/details': account,
-        'pages/account/addresses': account,
-        'pages/account/add-address': account,
-        'pages/account/add-return': account,
-        'pages/account/add-wishlist': wishlist,
-        'pages/account/recent-items': account,
-        'pages/account/download-item': account,
-        'pages/account/edit': account,
-        'pages/account/inbox': account,
-        'pages/account/return-saved': account,
-        'pages/account/returns': account,
-        'pages/auth/login': auth,
-        'pages/auth/account-created': auth,
-        'pages/auth/create-account': auth,
-        'pages/auth/new-password': auth,
-        'pages/auth/forgot-password': auth,
-        'pages/blog': blog,
-        'pages/blog-post': blog,
-        'pages/brand': brand,
-        'pages/brands': brand,
-        'pages/cart': cart,
-        'pages/category': category,
-        'pages/compare': compare,
-        'pages/contact-us': contactUs,
-        'pages/errors': errors,
-        'pages/errors/404': errors404,
-        'pages/gift-certificate/purchase': giftCertificate,
-        'pages/gift-certificate/balance': giftCertificate,
-        'pages/gift-certificate/redeem': giftCertificate,
-        // eslint-disable-next-line
-        'global': global,
-        'pages/home': home,
-        'pages/order-complete': orderComplete,
-        'pages/page': page,
-        'pages/product': product,
-        'pages/search': search,
-        'pages/rss': rss,
-        'pages/sitemap': sitemap,
-        'pages/subscribed': subscribe,
-        'pages/account/wishlist-details': wishlist,
-        'pages/account/wishlists': wishlist,
-    },
-    /**
-     * Getter method to ensure a good page type is accessed.
-     * @param page
-     * @returns {*}
-     */
-    get(pageKey) {
-        if (this.mapping[pageKey]) {
-            return this.mapping[pageKey];
-        }
-
-        return false;
-    },
+const pageClasses = {
+    'pages/account/orders/all': account,
+    'pages/account/orders/details': account,
+    'pages/account/addresses': account,
+    'pages/account/add-address': account,
+    'pages/account/add-return': account,
+    'pages/account/add-wishlist': wishlist,
+    'pages/account/recent-items': account,
+    'pages/account/download-item': account,
+    'pages/account/edit': account,
+    'pages/account/inbox': account,
+    'pages/account/return-saved': account,
+    'pages/account/returns': account,
+    'pages/auth/login': auth,
+    'pages/auth/account-created': auth,
+    'pages/auth/create-account': auth,
+    'pages/auth/new-password': auth,
+    'pages/auth/forgot-password': auth,
+    'pages/blog': blog,
+    'pages/blog-post': blog,
+    'pages/brand': brand,
+    'pages/brands': brand,
+    'pages/cart': cart,
+    'pages/category': category,
+    'pages/compare': compare,
+    'pages/contact-us': contactUs,
+    'pages/errors': errors,
+    'pages/errors/404': errors404,
+    'pages/gift-certificate/purchase': giftCertificate,
+    'pages/gift-certificate/balance': giftCertificate,
+    'pages/gift-certificate/redeem': giftCertificate,
+    'pages/home': home,
+    'pages/order-complete': orderComplete,
+    'pages/page': page,
+    'pages/product': product,
+    'pages/amp/product-options': product,
+    'pages/search': search,
+    'pages/rss': rss,
+    'pages/sitemap': sitemap,
+    'pages/subscribed': subscribe,
+    'pages/account/wishlist-details': wishlist,
+    'pages/account/wishlists': wishlist,
 };
 
-/**
- *
- * @param {Object} pageObj
- */
-function series(pageObj) {
-    async.series([
-        pageObj.before.bind(pageObj), // Executed first after constructor()
-        pageObj.loaded.bind(pageObj), // Main module logic
-        pageObj.after.bind(pageObj), // Clean up method that can be overridden for cleanup.
-    ], (err) => {
-        if (err) {
-            throw new Error(err);
-        }
-    });
-}
-
-/**
- * Loads the global module that gets executed on every page load.
- * Code that you want to run on every page goes in the global module.
- * @param {object} pages
- * @returns {*}
- */
-function loadGlobal(pages) {
-    const Global = pages.get('global');
-
-    return new Global;
-}
-
-/**
- *
- * @param {function} pageFunc
- * @param {} pages
- */
-function loader(pageFunc, pages) {
-    if (pages.get('global')) {
-        const globalPageManager = loadGlobal(pages);
-
-        globalPageManager.context = pageFunc.context;
-
-        series(globalPageManager);
-    }
-    series(pageFunc);
-}
-
 /**
  * This function gets added to the global window and then called
  * on page load with the current template loaded and JS Context passed in
+ * @todo use page_type instead of template_file (STENCIL-2922)
  * @param templateFile String
  * @param contextJSON
  * @returns {*}
  */
-window.stencilBootstrap = function stencilBootstrap(templateFile, contextJSON = '{}') {
-    const pages = PageClasses;
-    const context = JSON.parse(contextJSON);
+window.stencilBootstrap = function stencilBootstrap(templateFile, contextJSON = null, loadGlobal = true) {
+    const context = JSON.parse(contextJSON || {});
 
     return {
         load() {
             $(() => {
-                const PageTypeFn = pages.get(templateFile); // Finds the appropriate module from the pageType object and store the result as a function.
+                let pageClass;
+                let globalClass;
+                // Finds the appropriate class from the pageType.
+                const PageClass = pageClasses[templateFile];
 
-                if (PageTypeFn) {
-                    const pageType = new PageTypeFn(context);
+                if (loadGlobal) {
+                    globalClass = new Global();
+                    globalClass.context = context;
+                }
 
-                    pageType.context = context;
+                if (PageClass) {
+                    pageClass = new PageClass(context);
+                    pageClass.context = context;
+                }
 
-                    return loader(pageType, pages);
+                if (globalClass) {
+                    globalClass.load();
                 }
 
-                throw new Error(`${templateFile} Module not found`);
+                if (pageClass) {
+                    pageClass.load();
+                }
             });
         },
     };

diff --git a/assets/js/page-manager.js b/assets/js/page-manager.js
diff --git a/assets/js/theme/404-error.js b/assets/js/theme/404-error.js
@@ -1,4 +1,3 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 
 export default class Errors404 extends PageManager {}
-
diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
@@ -1,4 +1,4 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 import $ from 'jquery';
 import nod from './common/nod';
 import Wishlist from './wishlist';

diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js
@@ -1,4 +1,4 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 import stateCountry from './common/state-country';
 import $ from 'jquery';
 import nod from './common/nod';

diff --git a/assets/js/theme/blog-post.js b/assets/js/theme/blog-post.js
@@ -1,3 +1,3 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 
 export default class BlogPost extends PageManager {}
diff --git a/assets/js/theme/blog.js b/assets/js/theme/blog.js
@@ -1,4 +1,4 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 
 export default class Blog extends PageManager {}
 
diff --git a/assets/js/theme/brands.js b/assets/js/theme/brands.js
@@ -1,3 +1,3 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 
 export default class Brands extends PageManager {}
diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -1,4 +1,4 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 import $ from 'jquery';
 import _ from 'lodash';
 import giftCertCheck from './common/gift-certificate-validator';

diff --git a/assets/js/theme/catalog.js b/assets/js/theme/catalog.js
@@ -1,4 +1,4 @@
-import PageManager from '../page-manager';
+import PageManager from './page-manager';
 import $ from 'jquery';
 import urlUtils from './common/url-utils';
 import Url from 'url';