Multiple Theme Component Product Listings on a Page

[lesliekirk]

I would like to create a page that has multiple Product Listing Ready Theme items on a page. (Please note that the PageBuilder Carousels are not robust enough for this task - they lack the ability to include Product Custom Fields).

I am already behind the eight ball because I cannot get the addition of javascript to the theme.js from tip here. I have been playing with it by changing the js-CTGY body tag to js-SFNT. I have done something similar in other ReadyThemes where I have to repeat the javascript for each carousel and rename the ID for it. I think if I can get the javascript for the jsCTGY to fire I could move on. I am wondering if there is some sort of conflict due to the other uses of the slick slider on the CTGY page. I am not seeing any errors in the console.

Many thanks! Leslie

[lesliekirk]

Let's see if I can post the javascript here. When I add it to the jsCTGY section it does not work but if I change the page body tag to js-SFNT it does.

/**
* Load and initialize the Slick plugin for Featured Products
*/
$.loadScript(theme_path + 'plugins/slick/slick.min.js', function () {
$.hook('featured-products').slick({
draggable: false,
infinite: false,
slidesToScroll: 3,
slidesToShow: 3,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToScroll: 3,
slidesToShow: 3
}
},
{
breakpoint: 960,
settings: {
slidesToScroll: 3,
slidesToShow: 3
}
},
{
breakpoint: 748,
settings: {
slidesToScroll: 2,
slidesToShow: 2
}
},
{
breakpoint: 360,
settings: {
slidesToScroll: 1,
slidesToShow: 1
}
}
]
});
});
},

I'm wondering if I'm either adding it wrong or if something is conflicting in the jsCTGY function.

jsCTGY: function() {
var subcategoryNavigation = document.querySelector('[data-hook="subcategory-navigation"]');
var subcategoryNavigationBlock = $.hook('subcategory-navigation-block');
var subcategoryNavigationSlider = $.hook('subcategory-navigation-slider');

function loadSubcategoryNavigation() {
subcategoryNavigationBlock.css('visibility', 'hidden');
if (/**document.body.clientWidth >= 960 &&*/ subcategoryNavigationSlider.html() === '') {
subcategoryNavigationSlider.append(document.import Node(subcategoryNavigation.getTemplateContent(), true));

$.loadScript(theme_path + 'plugins/slick/slick.min.js', function () {
subcategoryNavigationSlider.slick({
draggable: false,
infinite: false,
slidesToScroll: 8,
slidesToShow: 8,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToScroll: 6,
slidesToShow: 6
}
},
{
breakpoint: 960,
settings: {
slidesToScroll: 4,
slidesToShow: 4
}
},
{
breakpoint: 959,
//settings: 'unslick'
settings: {
slidesToScroll: 2,
slidesToShow: 2
}
}
]
});
});

subcategoryNavigationSlider.on('destroy', function () {
subcategoryNavigationSlider.empty();
});

subcategoryNavigationBlock.css('visibility', 'visible');
}
subcategoryNavigationBlock.css('visibility', 'visible');
}


/**
* Load and initialize the Refinery extension
*/
var facetsContainer = $.hook('add-refinery');
var facetTemplate = document.querySelector('[data-hook="horizontal-refinery"]');

if (facetTemplate !== null) {
var facetTemplateContent = facetTemplate.getTemplateContent();
}

var hasRefinery = $.hook('refinery');
var hasRefineryAnnex = $.hook('refinery-annex');

function loadRefinery() {
facetsContainer.css('visibility', 'hidden');
if (document.body.clientWidth >= 959 && facetsContainer.html() === '') {
facetsContainer.append(document.importNode(facetTe mplateContent, true));
facetsContainer.css('visibility', 'visible');
}
else if (document.body.clientWidth < 959) {
facetsContainer.empty();
}
$.loadScript(theme_path + 'extensions/facets/refinery/refinery.js');

}

var loadSubcategoryTimeout;
var loadRefineryTimeout;

window.addEventListener('resize', function () {
if (!loadSubcategoryTimeout) {
loadSubcategoryTimeout = setTimeout(function () {
loadSubcategoryTimeout = null;

subcategoryNavigationBlock.css('visibility', 'hidden');
loadSubcategoryNavigation();
}, 100);
}
}, false);
window.addEventListener('resize', function () {
if (!loadRefineryTimeout) {
loadRefineryTimeout = setTimeout(function () {
loadRefineryTimeout = null;

if (hasRefinery) {
facetsContainer.css('visibility', 'hidden');
loadRefinery();
}
}, 100);
}
}, false);
loadSubcategoryNavigation();

if (hasRefinery || hasRefineryAnnex) {
loadRefinery();
}

/**
* Accordion Extension
*/
(function () {
'use strict';

let accordionToggles = document.querySelectorAll('[data-hook="accordion-toggle"]');

for (let id = 0; id < accordionToggles.length; id++) {
accordionToggles[id].addEventListener('click', function (event) {
let parent = this.parentElement.closest('li');

parent.classList.toggle('is-active');
});
}
})();


/**
* Sub-Subcategory/Product Slider
*/
var subcategoryProductList = $.hook('subcategory-product-list');

if (subcategoryProductList.length > 0) {
$.loadScript(theme_path + 'plugins/slick/slick.min.js', function () {
subcategoryProductList.each(function () {
var header = $(this).prev($.hook('subcategory-product-list__heading'));

$(this).slick({
appendArrows: header,
draggable: false,
infinite: false,
slidesToScroll: 4,
slidesToShow: 4,
responsive: [
{
breakpoint: 768,
settings: {
appendArrows: header,
slidesToScroll: 2,
slidesToShow: 2
}
},
{
breakpoint: 640,
settings: {
appendArrows: $(this),
slidesToScroll: 2,
slidesToShow: 2
}
}
]
});
});
});

}


},

Then if I can get it to work correctly on the CTGY page I need to figure out how to load a number of these onto one page. Let's see if the forum will let me save this to post.

[lesliekirk]

I got all this figured out. It was a pesky extra couple of characters },

I am now able to add multiple carousels to the CTGY page. I'm sure the way I did it is very cludgy but "it works for me" until I can find a more elegant solution.