Explore

Wirecutter Holiday

Wirecutter Holiday Listing unit

This customization works when using the FlexFrame Listing Desktop unit

1 User needs to fill only the following fields (User-defined-variables) on this template:

CTA (this will work only for first feature product)

Logo

Number of Slides

Listing Hero (Image for Featured product) In regular order.

Listing Thumbnail - the order needs to be changed. First thumbnail (Listing_1_Thumbnail), must be the second product on your list, so the product you use for your second Listing Hero and so on.

Listing Price - This should be the title/name of the product

Listing URL - The click URL for each product

2 User will add following code on the Custom JS field and will need to fill out only the lines for the const thumbs, highlighted on the following example.

Add the details for products on const thumbs. The first product needs to be the first on thumb slider with exception for the background color. BG color number one must be the same as the product on first Featured slide.

To Add a different copy on Disclaimer go to disclaimer.innerHTML, highlighted in blue below.

const thumbs = {

prods: [

{

link: "https://www.google.com",

title: "Melissa Coppel Bonbons",

linkCopy: "Buy at Amazon",

extraCopy: "Body Copy goes here",

bgColor: "#c1e4df",

{

link: "https://www.amazon.com",

title: "Oral-B Pro 1000",

linkCopy: "Buy at Amazon",

extraCopy: "Body Copy goes here 2",

bgColor: "#f0dfd0",

{

link: "https://www.youtube.com",

title: "Best gifts under $50",

linkCopy: "Read the guide",

extraCopy: "Body Copy goes here 3",

bgColor: "#666e8a",

{

link: "https://www.nytimes.com",

title: "Fujifilm Instax Mini Evo",

linkCopy: "Buy at Amazon",

extraCopy: "Body Copy goes here 4",

bgColor: "#eac197",

};

// TO CHANGE BG, SET FEATURE BODY COPY AND CTA LINK WHEN SWIPING , ADD TRACK EVENT ON CTA SLIDE NUMBER

const bgColors = ["#c1e4df", "#f0dfd0", "#666e8a", "#eac197"];

const featureSwiper = document.querySelector(".swiper-container");

featureSwiper.setAttribute("id", "mainSwiper");

const navContainer = document.querySelector(".featured-nav-container");

const nextArrow = navContainer.querySelector(".featured-nav-next");

const prevArrow = navContainer.querySelector(".featured-nav-prev");

const thumbContainer = document.getElementById("thumb-container");

function changeBg() {

const adContainer = document.getElementById("adContainer");

const swiperSlide = [...featureSwiper.querySelectorAll(".swiper-slide")];

let current;

swiperSlide.forEach((slide, idx) => {

if (slide.classList.contains("swiper-slide-active")) {

current = slide;

const classesEl = current.getAttribute("class").slice(26, 27);

const ctaSlideIdx = current.firstElementChild.getAttribute("onclick").slice(48, 55);

current.querySelector(".cta").setAttribute("onclick", `(function(){ET.track({type:'clickURL',location:'cta-${ctaSlideIdx}'});})()`);

thumbContainer.style.backgroundColor = thumbs.prods[Number(classesEl)].bgColor;

adContainer.style.background = thumbs.prods[Number(classesEl)].bgColor;

adContainer.style.backgroundColor = thumbs.prods[Number(classesEl)].bgColor;

}

});

}

// TO ADD LINES ON LOGO

const mainLogo = document.createElement("div");

mainLogo.classList.add("mainLogo");

const swiperContainer = document.querySelector(".swiper-container");

swiperContainer.prepend(mainLogo);

// TO ADD DISCLAIMER

const disclaimer = document.createElement("div");

disclaimer.classList.add("disclaimer");

swiperContainer.prepend(disclaimer);

disclaimer.innerHTML = "We independently review everything we recommend. When you buy through our links, we may earn a commission.";

// SET UP FEATURED COPIES BEFORE START SWIPPING

const firstSlideCopy = document.querySelector(".swiper-slide-active .featured-copy .price");

const ctaFirstFeatSlide = document.querySelector(".swiper-slide-active .featured-copy .cta");

const firstCopy = document.createElement("p");

firstSlideCopy.prepend(firstCopy);

firstCopy.innerText = thumbs.prods[3].extraCopy;

ctaFirstFeatSlide.innerText = thumbs.prods[3].linkCopy;

const featuredCopyOne = document.querySelectorAll(".featured-area .featured-pic-0 .price");

const featuredCtaOne = document.querySelectorAll(".featured-area .featured-pic-0 .cta");

featuredCopyOne.forEach((one) => {

console.log(one.firstChild);

if(one.firstChild === 'p') {

one.querySelector('p').innerText = thumbs.prods[3].extraCopy;

} else {

const copyOne = document.createElement('p');

one.prepend(copyOne);

copyOne.innerText = thumbs.prods[3].extraCopy;

}

});

featuredCtaOne.forEach((one) => {

one.innerText = thumbs.prods[3].linkCopy;

});

const featuredCopyTwo = document.querySelectorAll(".featured-area .featured-pic-1 .price");

const featuredCtaTwo = document.querySelectorAll(".featured-area .featured-pic-1 .cta");

featuredCopyTwo.forEach((two) => {

const copyTwo = document.createElement("p");

two.prepend(copyTwo);

copyTwo.innerText = thumbs.prods[0].extraCopy;

});

featuredCtaTwo.forEach((two) => {

two.innerText = thumbs.prods[0].linkCopy;

});

const featuredCopyThree = document.querySelectorAll(".featured-area .featured-pic-2 .price");

const featuredCtaThree = document.querySelectorAll(".featured-area .featured-pic-2 .cta");

featuredCopyThree.forEach((three) => {

const copyThree = document.createElement("p");

three.prepend(copyThree);

copyThree.innerText = thumbs.prods[1].extraCopy;

});

featuredCtaThree.forEach((three) => {

three.innerText = thumbs.prods[1].linkCopy;

});

const featuredCopyFour = document.querySelectorAll(".featured-area .featured-pic-3 .price");

const featuredCtaFour = document.querySelectorAll(".featured-area .featured-pic-3 .cta");

featuredCopyFour.forEach((four) => {

const copyFour = document.createElement("p");

four.prepend(copyFour);

copyFour.innerText = thumbs.prods[2].extraCopy;

});

featuredCtaFour.forEach((four) => {

four.innerText = thumbs.prods[2].linkCopy;

});

// TO ADD TITLE AND CTA LINK TO FEATURED SLIDE WHEN LOADING

const thumbsSwiper = document.getElementById("thumb-container");

const thumbSlides = [...thumbsSwiper.querySelectorAll(".swiper-slide")];

const numberOfProducts = thumbs.prods.length;

let current;

thumbSlides.forEach((slide) => {

slide.setAttribute("draggable", false);

if (slide.classList.contains("swiper-slide-visible")) {

current = slide;

const classesEl = current.getAttribute("class").slice(19, 20);

const slideId = Number(classesEl);

current.querySelector(".price").innerHTML = `${thumbs.prods[slideId].title}`;

if (current.querySelector(".price").childElementCount === 1) {

const anchorThumb = document.createElement("a");

current.querySelector(".price").append(anchorThumb);

current.querySelector(".price a").classList.add("link-thumb");

current.querySelector(".price a").setAttribute("href", `${thumbs.prods[slideId].link}`);

current.querySelector(".price a").setAttribute("target", "_blank");

current.querySelector(".price a").innerText = `${thumbs.prods[slideId].linkCopy}`;

}

});

function copyForThumbs() {

let current;

thumbSlides.forEach((slide, idx) => {

if (slide.classList.contains("swiper-slide-visible")) {

current = slide;

const classesEl = current.getAttribute("class").slice(19, 20);

const slideId = Number(classesEl);

current.querySelector(".price").innerHTML = `${thumbs.prods[slideId].title}`;

if (current.querySelector(".price").childElementCount === 1) {

const anchorThumb = document.createElement("a");

current.querySelector(".price").append(anchorThumb);

current.querySelector(".price a").classList.add("link-thumb");

current.querySelector(".price a").setAttribute("href", `${thumbs.prods[slideId].link}`);

current.querySelector(".price a").setAttribute("onclick", `(function(){ET.track({type:'clickURL',location:'cta-product-${slideId}'});})()`);

current.querySelector(".price a").setAttribute("target", "_blank");

current.querySelector(".price a").innerText = `${thumbs.prods[slideId].linkCopy}`;

}

});

}

// COPY FOR THUMBS ON TOUCH

function copyThumbsOntouch() {

let current;

thumbSlides.forEach((slide, idx) => {

//if (slide.classList.contains("swiper-slide-visible")) {

current = slide;

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.