Skip to content

Instantly share code, notes, and snippets.

Created Jun 17, 2019
What would you like to do?
North Face product tabs test
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
//move the details header into the details tab and rename it to "summary"
if ($pdpBenefitsContent) {
if ($pdpFeaturesTabContent.height() > 400) {
$('<div class="mt_read_more button tertiary">Read More</div>').appendTo($pdpFeaturesTabContent);
var $pdpFeaturesReadMoreBtn = $('body.pdp .pdp-features .button');
$pdpFeaturesReadMoreBtn.on("click", function () {
//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
//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
//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');
$("#" + tab_id).addClass('pdp-active-tab');
$('#pdp-tab-2').one("click", function () {
$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
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();
dubreviewsSliderObj.appendTo(".pdp-details .desc-container");
}, 3000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment