Merge pull request #1304 from Ubersmake/AnchorTabs

Open product tabs on load.

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Open correct product page tabs when URL contains a fragment identifier referring to that content [#1304](https://github.com/bigcommerce/cornerstone/pull/1304)
 
 ## 2.2.1 (2018-07-10)
 - Fix wishlist dropdown background color bleeding out of container [#1283](https://github.com/bigcommerce/cornerstone/pull/1283)

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

@@ -17,8 +17,8 @@ export default class ProductDetails {
         this.imageGallery.init();
         this.listenQuantityChange();
         this.initRadioAttributes();
-
         Wishlist.load(this.context);
+        this.getTabRequests();
 
         const $form = $('form[data-cart-item-add]', $scope);
         const $productOptionsElement = $('[data-product-option-change]', $form);
@@ -607,4 +607,25 @@ export default class ProductDetails {
             $radio.attr('data-state', $radio.prop('checked'));
         });
     }
+
+    /**
+     * Check for fragment identifier in URL requesting a specific tab
+     */
+    getTabRequests() {
+        if (window.location.hash && window.location.hash.indexOf('#tab-') === 0) {
+            const $activeTab = $('.tabs').has(`[href='${window.location.hash}']`);
+            const $tabContent = $(`${window.location.hash}`);
+
+            if ($activeTab.length > 0) {
+                $activeTab.find('.tab')
+                    .removeClass('is-active')
+                    .has(`[href='${window.location.hash}']`)
+                    .addClass('is-active');
+
+                $tabContent.addClass('is-active')
+                    .siblings()
+                    .removeClass('is-active');
+            }
+        }
+    }
 }