Skip to content

Commit

Permalink
Update multiple quick add modals for parity throughout multiple sections
Browse files Browse the repository at this point in the history
Refresh quick order list elements after rendering

Simplify the refresh

Better variable naming

Better refresh after render

Clean up variant selector
  • Loading branch information
cfxd committed Sep 25, 2024
1 parent cd041f6 commit fc82fde
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 7 deletions.
28 changes: 22 additions & 6 deletions assets/quick-order-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ if (!customElements.get('quick-order-list')) {
id: this.quickOrderListId,
section: document.getElementById(this.quickOrderListId).dataset.section,
selector: `#${this.quickOrderListId} .js-contents`,
variantSelector: `.quick-order-list__container .variant-item[data-variant-id="[variant-id]"]`,
},
{
id: 'cart-icon-bubble',
Expand All @@ -211,11 +212,13 @@ if (!customElements.get('quick-order-list')) {
id: `quick-order-list-live-region-text-${this.dataset.productId}`,
section: 'cart-live-region-text',
selector: '.shopify-section',
selectorAll: `.quick-order-list__live-region-text[data-product-id="${this.dataset.productId}"]`,
},
{
id: `quick-order-list-total-${this.dataset.productId}-${this.dataset.section}`,
section: document.getElementById(this.quickOrderListId).dataset.section,
selector: `#${this.quickOrderListId} .quick-order-list__total`,
selectorAll: `.quick-order-list__total[data-product-id="${this.dataset.productId}"]`,
},
{
id: 'CartDrawer',
Expand Down Expand Up @@ -258,11 +261,22 @@ if (!customElements.get('quick-order-list')) {
? sectionElement.querySelector(section.selector)
: sectionElement;
if (elementToReplace) {
if (section.selector === `#${this.quickOrderListId} .js-contents` && this.ids.length > 0) {
if (section.variantSelector && this.ids.length > 0) {
this.ids.flat().forEach((i) => {
elementToReplace.querySelector(`#Variant-${i}`).innerHTML = this.getSectionInnerHTML(
document
.querySelectorAll(section.variantSelector.replace('[variant-id]', i))
.forEach((variantElementToReplace) => {
variantElementToReplace.innerHTML = this.getSectionInnerHTML(
parsedState.sections[section.section],
`#Variant-${i}`
);
});
});
} else if (section.selectorAll) {
document.querySelectorAll(section.selectorAll).forEach((allElementToReplace) => {
allElementToReplace.innerHTML = this.getSectionInnerHTML(
parsedState.sections[section.section],
`#Variant-${i}`
section.selector
);
});
} else {
Expand All @@ -273,9 +287,11 @@ if (!customElements.get('quick-order-list')) {
}
}
});
this.defineInputsAndQuickOrderTable();
this.addMultipleDebounce();
this.ids = [];
document.querySelectorAll(`quick-order-list[data-product-id="${this.dataset.productId}"]`).forEach((el) => {
el.defineInputsAndQuickOrderTable();
el.addMultipleDebounce();
el.ids = [];
});
}

getTableHead() {
Expand Down
4 changes: 3 additions & 1 deletion snippets/quick-order-list.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,11 @@
</div>

<p
class="visually-hidden"
class="quick-order-list__live-region-text visually-hidden"
id="quick-order-list-live-region-text-{{ product.id }}"
aria-live="polite"
role="status"
data-product-id="{{ product.id }}"
></p>
<p
class="visually-hidden"
Expand All @@ -126,6 +127,7 @@
<div
class="quick-order-list__total{% unless is_modal %} gradient{% endunless %}"
id="quick-order-list-total-{{ product.id }}-{{ section.id }}"
data-product-id="{{ product.id }}"
>
<div class="quick-order-list-total__info">
<div class="quick-order-list-total__column small-hide medium-hide">
Expand Down

0 comments on commit fc82fde

Please sign in to comment.