From 0fc2a6937c043b0d5d53e1717c53997d35e497ef Mon Sep 17 00:00:00 2001 From: flair-duncan Date: Thu, 3 May 2018 15:47:21 +0100 Subject: [PATCH 1/2] Fix issue #1136 (open correct product tabs) --- CHANGELOG.md | 1 + assets/js/theme/common/product-details.js | 21 ++++++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 83d0ff21ce..7617b26ab8 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index 1ef372c920..76444fa412 100644 --- a/assets/js/theme/common/product-details.js +++ b/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,23 @@ 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}`); + + $activeTab.find('.tab') + .removeClass('is-active') + .has(`[href='${window.location.hash}']`) + .addClass('is-active'); + + $tabContent.addClass('is-active') + .siblings() + .removeClass('is-active'); + } + } } From b312912397a2026e654023dde3ce942233f9fbf3 Mon Sep 17 00:00:00 2001 From: Ubersmake Date: Mon, 9 Jul 2018 09:45:20 -0700 Subject: [PATCH 2/2] Adding guard for active tab logic. --- assets/js/theme/common/product-details.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index 76444fa412..fb8324bbda 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -616,14 +616,16 @@ export default class ProductDetails { const $activeTab = $('.tabs').has(`[href='${window.location.hash}']`); const $tabContent = $(`${window.location.hash}`); - $activeTab.find('.tab') - .removeClass('is-active') - .has(`[href='${window.location.hash}']`) - .addClass('is-active'); - - $tabContent.addClass('is-active') - .siblings() - .removeClass('is-active'); + 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'); + } } } }