Shadows 10.12.02 PROD Page Tabbed Content Conflict

[Nick]

If I understand this correctly we should be able to create a flex component that this will work in?

<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields :variant_price_range">
&mvt:product:customfield_values:customfields:variant_price_range;
<mvt:else>
<mvt:if expr="ISNULL l.settings:product:customfield_values:customfields:nobuy">
<mvt:if expr="l.settings:product:price GT '0.00'">
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
<span class="x-product-list__price_set">
<span class="x-product-list__price u-text-bold">&mvt:product:formatted_price;</span>
<span class="x-product-list__price u-color-gray-500 u-text-medium"><s>&mvt:product:formatted_base_price;</s></span>
</span>
<mvt:else>
<span class="x-product-list__price">&mvt:product:formatted_price;</span>
</mvt:if>
<mvt:item name="readytheme" param="contentsection( 'mvaffirm_configuration' )" />
</mvt:if></mvt:if> </mvt:if>

If you add that code to a Page Fragment, then using the Product List Flex Component you can add the fragment to the flex component:

PLFC_DEtails.JPG

[Mark Hood]

Seems to display the just the regular price but ignores the custom fields so I probably missed something. Still shows if nobuy and doesn't show the range prices or sale pricing

I did assign customfields to the fragment...

[lesliekirk]

Circling back to this. I Googled and found a different variation of the Tabbed Content. It works perfectly within an HTML page. The minute I try to use it in place of the existing tabbed content, I get a javascript error. (At least I get an error)

Uncaught TypeError: can't access property "hidden", panels[oldIndex] is undefined

(function () {
// Get relevant elements and collections
const tabbed = document.querySelector('.tabbed');
const tablist = tabbed.querySelector('ul');
const tabs = tablist.querySelectorAll('a');
const panels = tabbed.querySelectorAll('[id^="section"]');

// The tab switching function
const switchTab = (oldTab, newTab) => {
newTab.focus();
// Make the active tab focusable by the user (Tab key)
newTab.removeAttribute('tabindex');
// Set the selected state
newTab.setAttribute('aria-selected', 'true');
oldTab.removeAttribute('aria-selected');
oldTab.setAttribute('tabindex', '-1');
// Get the indices of the new and old tabs to find the correct
// tab panels to show and hide
let index = Array.prototype.indexOf.call(tabs, newTab);
let oldIndex = Array.prototype.indexOf.call(tabs, oldTab);
panels[oldIndex].hidden = true;
panels[index].hidden = false;
};

// Add the tablist role to the first <ul> in the .tabbed container
tablist.setAttribute('role', 'tablist');

// Add semantics are remove user focusability for each tab
Array.prototype.forEach.call(tabs, (tab, i) => {
tab.setAttribute('role', 'tab');
tab.setAttribute('id', 'tab' + (i + 1));
tab.setAttribute('tabindex', '-1');
tab.parentNode.setAttribute('role', 'presentation');

// Handle clicking of tabs for mouse users
tab.addEventListener('click', e => {
e.preventDefault();
let currentTab = tablist.querySelector('[aria-selected]');
if (e.currentTarget !== currentTab) {
switchTab(currentTab, e.currentTarget);
}
});

// Handle keydown events for keyboard users
tab.addEventListener('keydown', e => {
// Get the index of the current tab in the tabs node list
let index = Array.prototype.indexOf.call(tabs, e.currentTarget);
// Work out which key the user is pressing and
// Calculate the new tab's index where appropriate
let dir = e.which === 37 ? index - 1 : e.which === 39 ? index + 1 : e.which === 40 ? 'down' : null;
if (dir !== null) {
e.preventDefault();
// If the down key is pressed, move focus to the open panel,
// otherwise switch to the adjacent tab
dir === 'down' ? panels[i].focus() : tabs[dir] ? switchTab(e.currentTarget, tabs[dir]) : void 0;
}
});
});

I've tried including it in the Page Footer, I've tried including it after the Global Footer, and I've even tried including it right after the snippet for the tabs.

https://www.jagbits.com/product/JLM1...028ddd1eac791a

Good grief, I am so close to being able to launch this update (using Miva's search).

[lesliekirk]

FYI - I figured it out and I have it working now. I didn't have "section" in the ID tag.

[lesliekirk]

I need to bring this post back on topic, as I have another site that cannot use the PROD PageBuilder. I need to use the x-a11y-tabs that were used in the previous version of Shadows, as I try to use as much of Shadows 10.13.00 with PageBuilder as I can. Again, it seems to be an issue with the javascript not firing. Even if I directly link to the extensions.js file, it does not work because I get

Uncaught SyntaxError: redeclaration of const tabbedContent

, which I think is telling me the file is already there.

Am I going to once again have to use an alternate tabbed content script to make this work?