North Face product tabs test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require(['jquery', 'domReady'], function ($, domReady) { | |
"use strict"; | |
domReady(function () { | |
//variables for layout | |
var $pdpBenefitRatings = $('body.pdp .benefit-rating__container'); | |
var $productDetailsRow = $('body.pdp .swatches-product-details.row'); | |
var $pdpDetailsTabInner = $('body.pdp .pdp-details .product-details-section-inner-content'); | |
var $pdpDetailsHeader = $('body.pdp .pdp-details h3.pdp-details-header'); | |
var $pdpDetailsTabContent = $('body.pdp .pdp-details'); | |
var $pdpFeaturesTabContent = $('body.pdp .pdp-features'); | |
var $pdpBenefitsContent = $('body.pdp .pdp-benefits'); | |
var $pdpSpecsTabContent = $('body.pdp .pdp-specifications'); | |
var $pdpTechModule = $('body.pdp iframe.cms-content-js'); | |
//set up the tab layout and move tab content into their respective divs | |
var initTabLayout = function () { | |
if ($pdpBenefitRatings || $pdpDetailsTabContent || $pdpFeaturesTabContent != undefined) { | |
//move benefit ratings and features into 1 tab and product specs and tech modules into other tab | |
$pdpBenefitRatings.appendTo($pdpDetailsTabInner); | |
$pdpFeaturesTabContent.appendTo($pdpDetailsTabContent); | |
//move the details header into the details tab and rename it to "summary" | |
$pdpDetailsHeader.prependTo($pdpDetailsTabInner); | |
}; | |
if ($pdpBenefitsContent) { | |
$pdpBenefitsContent.appendTo($pdpDetailsTabInner); | |
}; | |
if ($pdpFeaturesTabContent.height() > 400) { | |
$pdpFeaturesTabContent.addClass('pdp-features-truncate'); | |
$('<div class="mt_read_more button tertiary">Read More</div>').appendTo($pdpFeaturesTabContent); | |
var $pdpFeaturesReadMoreBtn = $('body.pdp .pdp-features .button'); | |
$pdpFeaturesReadMoreBtn.on("click", function () { | |
$pdpFeaturesTabContent.removeClass("pdp-features-truncate"); | |
$pdpFeaturesReadMoreBtn.hide(); | |
}); | |
}; | |
}; | |
//add the tab markup | |
var addTabs = function () { | |
//add the tab buttons | |
$productDetailsRow.prepend('<div class="pdp-tabs-ctas"><button role="tab" class="pdp-tab pdp-active-tab" data-tab="tab-panel-1" aria-selected="true"\ | |
aria-controls="tab-panel-1" id="pdp-tab-1" tabindex="0">Details</button> <button role="tab" data-tab="tab-panel-2" aria-selected="false"\ | |
aria-controls="tab-panel-2" id="pdp-tab-2" class="pdp-tab" tabindex="1">Specs</button></div>'); | |
var $pdpTabsButtons = $('body.pdp div.pdp-tabs-ctas'); | |
//insert the horizontal rule separator to separate content | |
$('<hr>').insertAfter($pdpTabsButtons); | |
//add accessability to tabs | |
$pdpDetailsTabContent.attr({ "id": "tab-panel-1", "role": "tabpanel", "tabindex": "0", "aria-labelled": "pdp-tab-1" }); | |
$pdpSpecsTabContent.attr({ "id": "tab-panel-2", "role": "tabpanel", "tabindex": "0", "aria-labelled": "pdp-tab-2" }); | |
//add the target classes to the tabbed content | |
$pdpDetailsTabContent.addClass("pdp-active-tab"); | |
$pdpDetailsTabContent.addClass("pdp-tab-content"); | |
$pdpSpecsTabContent.addClass("pdp-tab-content"); | |
//rename Details to Summary | |
$('body.pdp .pdp-details .inner-content h3.pdp-details-header').html("Summary"); | |
}; | |
//tab functionality | |
var initTabs = function () { | |
$('button.pdp-tab').on("click", function () { | |
var tab_id = $(this).attr('data-tab'); | |
$('button.pdp-tab').removeClass('pdp-active-tab'); | |
$('div.pdp-tab-content').removeClass('pdp-active-tab'); | |
$(this).addClass('pdp-active-tab'); | |
$("#" + tab_id).addClass('pdp-active-tab'); | |
}); | |
$('#pdp-tab-2').one("click", function () { | |
$pdpTechModule.appendTo($pdpSpecsTabContent); | |
$pdpTechModule.css({"display": "block", "height": "320px"}); | |
}); | |
}; | |
//mutation observer for PDP tech module to watch when the iframe is loaded | |
//and to copy the fit slider then move it into details AFTER it is loaded on to the webpage | |
function observeSelector(elem, fx) { | |
if ( | |
elem && | |
elem instanceof HTMLElement && | |
(window.MutationObserver || window.WebKitMutationObserver) | |
) { | |
var observer = new MutationObserver(function (mutations, observer) { | |
// fired when a mutation occurs | |
fx(); | |
}); | |
observer.observe(elem, { | |
childList: arguments[2] || true, | |
attributes: arguments[3] || true | |
}); | |
}; | |
}; | |
//begin mutation observer Callback function with fit slider and iFrame content for tech mods | |
function initMutationObserver() { | |
var reviewsSlider = document.querySelector('#power-reviews-snippet-rating'); | |
//var iframeContent = document.querySelector('#cms-contents-0'); | |
if (reviewsSlider) { | |
observeSelector(reviewsSlider, function () { | |
setTimeout(function () { | |
var dubreviewsSliderObj = $('#power-reviews-snippet-rating').clone(); | |
//debugger | |
dubreviewsSliderObj.appendTo(".pdp-details .desc-container"); | |
//debugger | |
}, 3000); | |
}); | |
}; | |
}; | |
initTabLayout(); | |
addTabs(); | |
initTabs(); | |
initMutationObserver(); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment