Skip to content

Commit

Permalink
TECH-776 Add compare remove functionality, start add to cart function…
Browse files Browse the repository at this point in the history 
…ality
  • Loading branch information
@ChelseyRiewerTrellis
ChelseyRiewerTrellis committed Oct 16, 2024
1 parent 079dfc8 commit 9ded90f
Showing 1 changed file with 75 additions and 6 deletions.
81 changes: 75 additions & 6 deletions assets/compare.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ class CompareItemButton extends HTMLElement {
itemsToCompareButtons.forEach((itemToCompareButton) => {
const itemImage = itemToCompareButton.getAttribute('data-compare-pdp-image');
const itemName = itemToCompareButton.closest('.variant-item')?.querySelector('.variant-item__name').textContent;
const itemImageHTML = `<div class='twcss-flex twcss-justify-center twcss-gap-2 twcss-flex-col twcss-border-gray-200 twcss-border sticky-compare__item'>
const itemID = itemToCompareButton.closest('.variant-item').getAttribute('data-variant-id');
const itemImageHTML = `<div class='twcss-flex twcss-justify-center twcss-gap-2 twcss-flex-col twcss-border-gray-200 twcss-border sticky-compare__item' data-id='${itemID}'>
<img class='twcss-flex twcss-self-center' src='${itemImage}' alt='${itemName}'>
<span class='twcss-text-base twcss-text-center'>
${itemName}
Expand All @@ -44,6 +45,8 @@ customElements.define('compare-product-button', CompareItemButton);
class StickyCompareButton extends HTMLElement {
constructor () {
super();
this.stickyCompareButtonItemCount = this.querySelector('sticky-compare-count');
this.stickyCompare = document.querySelector('sticky-compare')
this.compareModalOverlay = document.querySelector('compare-modal-overlay')
this.compareModal = document.querySelector('compare-modal');
this.compareModalItemsContainer = document.querySelector('compare-modal-items');
Expand Down Expand Up @@ -91,6 +94,8 @@ class StickyCompareButton extends HTMLElement {
return variant.id === parseInt(itemsToCompareID)
});
this.buildCompareModalItem(variantItem);
this.compareModalItemRemove();
this.addCompareItemToCart();
});
}

Expand All @@ -101,6 +106,7 @@ class StickyCompareButton extends HTMLElement {
const itemImage = item.featured_image.src;
const itemImageAlt = item.featured_image.alt;
const itemSku = item.sku;
const itemID = item.id;

// Format the price
const formatter = new Intl.NumberFormat('en-US', {
Expand All @@ -109,7 +115,8 @@ class StickyCompareButton extends HTMLElement {
trailingZeroDisplay: 'stripIfInteger'
});

const itemHTML = `<div class="compare-variant-item__item twcss-flex-1 twcss-basis-1/2">
const itemHTML = `<div class="compare-variant-item__item twcss-flex-1 twcss-basis-1/2 twcss-flex twcss-flex-col">
<button aria-label='Remove item from Comparison table' class="compare-variant-item__remove twcss-text-5xl twcss-ml-auto twcss-mb-4" data-id='${itemID}'>&times</button>
<div class="compare-variant-item__image twcss-mb-4">
<img class="twcss-aspect-square" src="${itemImage}" alt="${itemImageAlt}">
</div>
Expand All @@ -120,18 +127,80 @@ class StickyCompareButton extends HTMLElement {
<div class="compare-variant-item__variant">
${itemVariantTitle}
</div>
<div class="compare-variant-item__sku">
${itemSku}
</div>
<div class=""compare-variant-item__price">
${ itemSku ? `<div class="compare-variant-item__sku">${itemSku}</div>` : ''}
<div class="compare-variant-item__price">
${(formatter.format(itemPrice / 100))}
</div>
${item.available === true ? this.addQtyToCompareItem(itemTitle, itemID) : '<p>Out of Stock</p>'}
${item.available === true ? `<button class="compare-variant-item__button button button--primary" aria-label="Add ${itemTitle} to cart">Add to Cart</button>` : ''}
</div>
</div>`;

this.compareModalItemsContainer.insertAdjacentHTML('beforeend', itemHTML)
}

addQtyToCompareItem(itemTitle, itemID) {
return `<div class="compare-variant-item__qty">
<quantity-input class="quantity cart-quantity">
<button class="quantity__button" name="minus" type="button">
<span class="visually-hidden">Decrease quantity for ${itemTitle}</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-minus" fill="none" viewBox="0 0 10 2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z" fill="currentColor">
</path></svg>
</button>
<input class="quantity__input" data-quantity-variant-id="${itemID}" type="number" name="updates[]" value="1" data-cart-quantity="1" min="1" data-min="1" step="1" aria-label="Quantity for ${itemTitle}" id="Quantity-${itemID}" data-index="${itemID}">
<button class="quantity__button" name="plus" type="button">
<span class="visually-hidden">Increase quantity for ${itemTitle}</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-plus" fill="none" viewBox="0 0 10 10">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor">
</path></svg>
</button>
</quantity-input>
</div>`
}

addCompareItemToCart() {
const compareVariantsAddToCart = document.querySelectorAll('.compare-variant-item__button');
compareVariantsAddToCart.forEach((compareVariantAddToCart) => {
compareVariantAddToCart.addEventListener(('click'), () => {

});
});
}

compareModalItemRemove() {
const compareItemsRemove = this.compareModal.querySelectorAll('.compare-variant-item__remove');

compareItemsRemove.forEach((compareItemRemove) => {
compareItemRemove.addEventListener(('click'), () => {
// Grab item to removes ID
const compareItemID = compareItemRemove.getAttribute('data-id');

// Remove from sticky bar
const stickyCompareItem = document.querySelector(`.sticky-compare__item[data-id="${compareItemID}"]`);
if (stickyCompareItem) stickyCompareItem.remove();

// Uncheck compare item
const compareItemToUncheck = document.querySelector(`.variant-item[data-variant-id="${compareItemID}"] .variant-item__compare-button--compare`);
if(compareItemToUncheck) compareItemToUncheck.classList.remove('variant-item__compare-button--compare');

// Remove from modal
compareItemRemove.closest('.compare-variant-item__item').remove();

// Check if there is only one item in the compare modal left
const compareItems = this.compareModal.querySelectorAll('.compare-variant-item__item');
if (compareItems.length === 1) {
this.closeCompareModal();

this.stickyCompare.classList.add('hidden');
}

// Update the sticky button count
this.stickyCompareButtonItemCount.innerHTML = compareItems.length;
});
})
}

openCompareModal() {
this.compareModal.classList.remove('twcss-hidden');
this.compareModalOverlay.classList.remove('twcss-hidden');
Expand Down

0 comments on commit 9ded90f

Please sign in to comment.