Colossus Filters Facets on Shadows 10.xx

[lesliekirk]

Can the Facets (Filters) layout that is in Colossus be used in Shadows 10.xx? I'm wanted to "move" the facets on the category page from the aside up to the filter div. Any tips?

[RTHOMASDESIGN]

Yes, it can be done. Aside from incorporating the Colossus template code/js/css I don't really have any tips :-/

Example:
https://www.christmastraditions.com/...na-parker.html

-Ryan

[lesliekirk]

Yes, it can be done. Aside from incorporating the Colossus template code/js/css I don't really have any tips :-/

Example:
https://www.christmastraditions.com/...na-parker.html

-Ryan

That's what I'm needing

[afiumano]

lesliekirk Did you get this working? These are the steps I have gone through but I am just getting a JS error (Uncaught TypeError: facetTemplate.getTemplateContent is not a function).

I copied over the 'refinery' js and css.
I copied over the content of the Facets Layout Template under Global Settings
I setup the Theme Component of "refinery_annex" and called it into the CTGY page.

[lesliekirk]

lesliekirk Did you get this working? These are the steps I have gone through but I am just getting a JS error (Uncaught TypeError: facetTemplate.getTemplateContent is not a function).

I copied over the 'refinery' js and css.
I copied over the content of the Facets Layout Template under Global Settings
I setup the Theme Component of "refinery_annex" and called it into the CTGY page.

I have not (yet). It's complicated by the fact I'm also using portions of the Luxe ReadyTheme for the swatch swap. The swatch swap works pretty well with Shadows. I can even get the swatch swap to work with Colossus but I think I've just got too much going on.

I need to step back and go at it again but GA4 got in the way

I will try your approach next time around because I know I am missing a LOT of javascript and I'm trying to be careful not to cause conflicts.

[lesliekirk]

lesliekirk Did you get this working? These are the steps I have gone through but I am just getting a JS error (Uncaught TypeError: facetTemplate.getTemplateContent is not a function).

I copied over the 'refinery' js and css.
I copied over the content of the Facets Layout Template under Global Settings
I setup the Theme Component of "refinery_annex" and called it into the CTGY page.

In my mashup I had a page code CTGY_SWAP which in turn created "js-CTGY_SWAP" which was causing the filters to not display on my page. I hard-coded it to "js-CTGY". That may or may not be your gotcha. Just thought I'd throw that out there. - Leslie

[afiumano]

Well, I am having to completely backup on this. I undid all of my changes to just try to get facets working at all. I only need to setup a Standard Category facet at the moment. This works on the SRCH & PLST pages but NOT on the CTGY page. I also enabled the price facet just to test. The Pricing facet shows on all 3 pages, but again the Category facet only shows on the SRCH & PLST pages. I have checked the "items" assigned to the CTGY page and reverted back template code to original Shadows but nothing is working.

[lesliekirk]

Well, I am having to completely backup on this. I undid all of my changes to just try to get facets working at all. I only need to setup a Standard Category facet at the moment. This works on the SRCH & PLST pages but NOT on the CTGY page. I also enabled the price facet just to test. The Pricing facet shows on all 3 pages, but again the Category facet only shows on the SRCH & PLST pages. I have checked the "items" assigned to the CTGY page and reverted back template code to original Shadows but nothing is working.

FWIW I've switched to Colossus. I'm super frustrated that Colossus hasn't been updated nor are items like the facets layout more interchangeable.

[afiumano]

With the help of Miva Support, I was able to get this done. I am going to post the steps they gave me that ultimately worked for my Shadows store:

Steps to setup Colossus Facet Filtering on Shadows:

Go to this page: https://docs.miva.com/readytheme-col....html#refinery

Create the 'refinery.css' file and 'refinery.js' file using the code on that page.

Edit the related lines in refinery.js file with the below:

let totalSpace = 300;

if (window.innerWidth >= minDisplayWidth && window.innerWidth < 1173) {
maxDisplay = 10;
}
else if (window.innerWidth >= 1173) {
maxDisplay = 10;
}
else {
maxDisplay = 10;
}

Upload the refinery.css and the refinery.js to your theme on the server.

Go to "User Interface" > "CSS/JavaScript Resources" and add the css file and js file you created using the correct path

Make sure the files are set to "Global" and "Active"
The JS file does not need to be added to a Resource Group
Add the refinery.css file to the 'css_list' Resource Group

*********************************

Create a 'custom.js' file (if one does not already exist) and add the below code making sure to update the line of code that has the path to the refinery.js file:

script.src = 'b08/themes/00000001/shadows/refinery/refinery.js';

Make sure to add the custom.js file to "User Interface" > "CSS/JavaScript Resources" if it isn't already there. Mine was in the "footer_js" resource group

/**
* This is a a minimal polyfill for <template> use in IE 9-11.
* http://ironlasso.com/template-tag-polyfill-for-internet-explorer/
*/
Element.prototype.getTemplateContent = function () {
'use strict';

return function (element) {

if (element.content) {
return element.content;
}

var template = element,
templateContent,
documentContent;

templateContent = template.childNodes;
documentContent = document.createDocumentFragment();

while (templateContent[0]) {
documentContent.appendChild(templateContent[0]);
}

template.content = documentContent;
return documentContent;

}(this);
};

/**
* 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();
}

// Create new script element
const script = document.createElement('script');
script.src = 'b08/themes/00000001/shadows/refinery/refinery.js';

// Append to the 'head' element
document.head.appendChild(script);

}

var loadSubcategoryTimeout;
var loadRefineryTimeout;

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

// subcategoryNavigationBlock.css('visibility', 'hidden');
// loadSubcategoryNavigation();
}, 100);
}

if (!loadRefineryTimeout) {
loadRefineryTimeout = setTimeout(function () {
loadRefineryTimeout = null;

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

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

*************************

Go to "User Interface" > "Theme Components" > "Content Sections"
Click the button "Add Content Section" if one called "refinery_annex" doesn't exist

Use Code 'refinery_annex' and give it a name such as: Extension: Refinery Annex

Paste in the code from the https://docs.miva.com/readytheme-col....html#refinery page under the heading:
THEME_NAME/extensions/facets/refinery/refinery-annex.html


*************************

On CTGY details page template the below item needs to be directly under the opening <body> tag

<mvt:item name="readytheme" param="contentsection( 'refinery_annex' )" />

On the CTGY details template add the following code below the facets item:

<button class="t-filters-trigger" data-hook="open-refinery-annex" type="button">
<span>Filters</span>
<strong>(&mvte:facets:applied_facet_count;)</strong>
</button>

****************************

Add the below to 'theme.css' under the Category Page section:

.t-display-list-filtering {
width: 100%;
flex-wrap: nowrap;
}

.t-filters-trigger {
display: flex;
align-items: center;
width: 100%;
max-width: 50%;
padding: 1em 1rem;
position: relative;
color: #333;
font-size: 0.75rem;
font-weight: 600;
text-align: left;
background-color: #fff;
border: solid rgba(205, 205, 205, 0.7);
border-width: 1px 0 1px 1px;
cursor: pointer;
outline: none;
}

.t-filters-trigger > *:not(:empty) {
padding-right: 0.25em;
padding-left: 0.25em;
pointer-events: none;
}

.t-display-list-filtering .x-display-list-filtering__per-page,
.t-display-list-filtering .x-display-list-filtering__sort-by {
flex: 1 1 auto;
margin-right: 0;
}

.t-display-list-filtering .x-display-list-filtering__per-page,
.t-display-list-filtering .x-display-list-filtering__sort-by,
.t-display-list-filtering .c-form-list__item,
.t-display-list-filtering .c-form-label,
.t-display-list-filtering .c-form-select {
margin-bottom: 0;
}

.t-display-list-filtering .c-form-label {
font-size: 0.6875rem;
}

.t-display-list-filtering .c-form-select__dropdown {
padding: 0;
font-size: 0.75rem;
background-color: #fff;
border: 0 none;
color: initial;
}

@media (min-width: 60em) {
.t-display-list-filtering {
width: auto;
}

.t-filters-trigger {
display: none;
}

.t-display-list-filtering .x-display-list-filtering__per-page:not(:last-child),
.t-display-list-filtering .x-display-list-filtering__sort-by:not(:last-child) {
margin-right: 1rem;
}

.t-display-list-filtering .x-display-list-filtering__per-page:last-child,
.t-display-list-filtering .x-display-list-filtering__sort-by:last-child {
margin-right: 0;
}
}

************************

Replace the entire section "EXTENSIONS / CATEGORY TREE / CATEGORY TREE" with the css in the below link in the 'extensions.css' file if needed:

https://github.com/mivaecommerce/rea...egory-tree.css

************************

Global Settings > Facets Layout

I had to change the first line to this: (this hid the facets section when a category didn't have facets, as well as showed facets when there was only one facet on a category)

<mvt:if expr="l.settings:facets:facet_count GT 0 AND l.settings:category_listing:products_on_page_count GT 1 OR l.settings:all_products:products_on_page_count GT 1 OR l.settings:search_results:products_on_page_count GT 1">