Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-142003: Mini Compare Chart Mobile styling #1989

Merged
merged 4 commits into from
Mar 18, 2024
Merged

MWPW-142003: Mini Compare Chart Mobile styling #1989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
610d499
MWPW-142003: Mini Compare Chart Mobile styling
Axelcureno Mar 14, 2024
009042c
Merge branch 'stage' into MWPW-142003
Axelcureno Mar 15, 2024
37c95d3
Merge branch 'stage' into MWPW-142003
Axelcureno Mar 18, 2024
81f005a
Merge branch 'stage' into MWPW-142003
Blainegunn Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 17 additions & 13 deletions libs/blocks/merch-card/merch-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@ const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART];
// Force cards to refresh once they become visible so that the footer rows are properly aligned.
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const container = entry.target.closest('main > div');
if (!container) return;
[...container.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate());
if (entry.target.clientHeight === 0) return;
intersectionObserver.unobserve(entry.target);
entry.target.requestUpdate();
});
});

Expand All @@ -35,7 +34,7 @@ const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName);
const isParagraphTag = (tagName) => tagName === 'P';

const appendSlot = (slotEls, slotName, merchCard) => {
if (slotEls.length === 0) return;
if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return;
const newEl = createTag(
'p',
{ slot: slotName, class: slotName },
Expand Down Expand Up @@ -190,7 +189,7 @@ const simplifyHrs = (el) => {
});
};

function extractQuantitySelect(el) {
async function extractQuantitySelect(el) {
const quantitySelectConfig = el.querySelector('ul');
if (!quantitySelectConfig) return null;
const configMarkup = quantitySelectConfig.querySelector('li');
Expand All @@ -202,7 +201,7 @@ function extractQuantitySelect(el) {
const quantityValues = config[1].textContent.split(',').map((value) => value.trim())
.filter((value) => /^\d+$/.test(value));
if (quantityValues.length !== 3) return null;
import('../../deps/merch-quantity-select.js');
await import('../../deps/merch-quantity-select.js');
[attributes.min, attributes.max, attributes.step] = quantityValues.map(Number);
const quantitySelect = createTag('merch-quantity-select', attributes);
quantitySelectConfig.remove();
Expand Down Expand Up @@ -240,8 +239,12 @@ const decorateFooterRows = (merchCard, footerRows) => {

const setMiniCompareOfferSlot = (merchCard, offers) => {
if (merchCard.variant !== MINI_COMPARE_CHART) return;
const miniCompareOffers = createTag('div', { slot: 'offers' }, offers);
if (offers === undefined) { miniCompareOffers.appendChild(createTag('p')); }
const miniCompareOffers = merchCard.querySelector('div[slot="offers"]');
if (offers) {
miniCompareOffers.append(offers);
} else {
miniCompareOffers.appendChild(createTag('p'));
}
merchCard.appendChild(miniCompareOffers);
};

Expand Down Expand Up @@ -306,10 +309,7 @@ const init = async (el) => {
}
let footerRows;
if (cardType === MINI_COMPARE_CHART) {
const container = el.closest('[data-status="decorated"]');
if (container) {
intersectionObserver.observe(container);
}
intersectionObserver.observe(merchCard);
footerRows = getMiniCompareChartFooterRows(el);
}
const images = el.querySelectorAll('picture');
Expand Down Expand Up @@ -386,7 +386,11 @@ const init = async (el) => {
merchCard.appendChild(footer);

if (MULTI_OFFER_CARDS.includes(cardType)) {
const quantitySelect = extractQuantitySelect(el);
if (merchCard.variant === MINI_COMPARE_CHART) {
const miniCompareOffers = createTag('div', { slot: 'offers' });
merchCard.append(miniCompareOffers);
}
const quantitySelect = await extractQuantitySelect(el, cardType);
const offerSelection = el.querySelector('ul');
if (offerSelection) {
const { initOfferSelection } = await import('./merch-offer-select.js');
Expand Down
1 change: 1 addition & 0 deletions libs/blocks/merch-card/merch-offer-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ function createDynamicSlots(el, bodySlot) {
const descriptionSlot = el.querySelector('p[slot="description"]');
if (descriptionSlot) {
descriptionSlot.innerHTML += description.innerHTML;
description.parentNode.removeChild(description);
}
}
}
Expand Down
Loading
Loading