Skip to content
This repository has been archived by the owner on Jul 18, 2024. It is now read-only.

Commit

Permalink
QA fixes for cod-theme (#378)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AliHMIMS
AliHMIMS authored Aug 18, 2023
1 parent eb94fae commit 0804c2e
Show file tree
Hide file tree
Showing 45 changed files with 695 additions and 419 deletions.
9 changes: 7 additions & 2 deletions assets/add-to-cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ async function addToCart(snippetId) {
const parentSection = document.querySelector(`#s-${snippetId}`);
const variantId = parentSection.querySelector(`#variantId`)?.value || undefined;
const quantity = parentSection.querySelector(`#quantity`)?.value || 1;
const inventory = parentSection.querySelector(`#_inventory`)?.value || null;
const uploadedImageLink = parentSection.querySelector(`#yc-upload-link`)?.value || undefined;

if (!variantId) {
Expand All @@ -12,6 +13,10 @@ async function addToCart(snippetId) {
return notify(ADD_TO_CART_EXPECTED_ERRORS.quantity_smaller_than_zero, 'error');
}

if (inventory == 0) {
return notify(ADD_TO_CART_EXPECTED_ERRORS.empty_inventory, 'error');
}

try {
load('#loading__cart');

Expand Down Expand Up @@ -116,7 +121,7 @@ function cartTemplate(item) {
variationsArray.push(`${key}: ${item.productVariant.variations[key]}`);
}
}
const variationsString = variationsArray.join('  ');
const variationsString = variationsArray.join('<br/>');
const variationsCheck = variationsString === 'default: default' ? '' : variationsString;

// Check if there's an image URL available
Expand All @@ -129,7 +134,7 @@ function cartTemplate(item) {
<div class="item-details">
<p class="product-name">${item.productVariant.product.name}</p>
<div class="variants">
${CART_DRAWER_TRANSLATION.quantityVariant}: ${item.quantity} &nbsp;${variationsCheck}
${CART_DRAWER_TRANSLATION.quantityVariant}: ${item.quantity} <br/>'${variationsCheck}
</div>
<div class="product-price">
<span class="compare-price">${item.productVariant.compare_at_price ? `${item.productVariant.compare_at_price} ${currencyCode}` : ''}</span>
Expand Down
7 changes: 1 addition & 6 deletions assets/express-checkout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,7 @@
}
}
.yc-sticky-checkout .step-2-wrapper .close-icon {
display: none;
}
@media (min-width: 768px) {
.yc-sticky-checkout .step-2-wrapper .close-icon {
display: block;
}
display: block;
}
@media (min-width: 768px) {
.yc-sticky-checkout .step-2-wrapper .back-icon {
Expand Down
8 changes: 4 additions & 4 deletions assets/featured-products.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,11 @@
text-align: start;
margin-top: 12px;
padding: 0 6px;
text-align: center;
}
@media (min-width: 768px) {
.yc-featured-products .product-list .product-block .product-details {
margin-top: 10px;
text-align: center;
}
}
.yc-featured-products .product-list .product-block .product-details .product-title {
Expand Down Expand Up @@ -105,12 +105,12 @@
flex-direction: column;
align-items: start;
gap: 7px;
margin-top: 12px;
padding: 0 6px;
margin: 12px auto 0;
padding: 0 6px 6px;
align-items: center;
}
@media (min-width: 768px) {
.yc-featured-products .product-list .product-block .prices {
align-items: center;
margin: 15px auto 20px;
gap: 10px;
}
Expand Down
2 changes: 1 addition & 1 deletion assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ body {
}

.container {
max-width: 1440px !important;
max-width: 1124px !important;
margin: 0 auto;
padding: 0 20px;
}
Expand Down
2 changes: 2 additions & 0 deletions assets/notice-bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@
color: var(--yc-notice-text-color);
font-size: var(--yc-notice-font-size);
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
}
.yc-notice .content img {
height: 17px;
Expand Down
4 changes: 2 additions & 2 deletions assets/product.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
.yc-single-product .product-images {
position: sticky;
top: calc(var(--yc-nav-height) + 20px);
width: 100%;
width: 80%;
margin: unset;
}
}
Expand Down Expand Up @@ -161,7 +161,7 @@
margin: 0 auto;
width: 100%;
border-radius: 4px;
height: 150px;
height: 100px;
object-fit: contain;
}
@media screen and (max-width: 768px) {
Expand Down
148 changes: 81 additions & 67 deletions assets/product.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,40 @@ function setVariant(parentSection, id) {
variantIdInput.value = id;
}

/**
* Sets inventory of product variant.
* And disable add to cart button when inventory is not sufficient.
*
* @param {HTMLElement} parentSection
* @param {Number} inventory
*/
function setInventory(parentSection, inventory) {
const inventoryInput = parentSection.querySelector('#_inventory');

inventoryInput.value = globalProduct.isTrackingInventory ? inventory : null;

/** @type {HTMLButtonElement} addToCartButton */
const addToCartButton = parentSection.querySelector('.yc-btn');

if (!addToCartButton) {
return;
}

if (!addToCartButton.disabled && addToCartButton.getAttribute('data-text') === null) {
addToCartButton.setAttribute('data-text', addToCartButton.innerHTML);
}

const isAddToCartDisabled = globalProduct.isTrackingInventory && inventory === 0;

addToCartButton.disabled = isAddToCartDisabled;

if (isAddToCartDisabled) {
addToCartButton.innerHTML = TRANSLATED_TEXT.empty_inventory;
} else {
addToCartButton.innerHTML = addToCartButton.getAttribute('data-text');
}
}

/**
* Sets default options for a product
* @param {HTMLElement} parentSection
Expand All @@ -167,7 +201,9 @@ function selectDefaultOptions(parentSection) {
const options = parentSection.querySelectorAll('.product-options > div');

if (!options || !options.length) {
return setVariant(parentSection, variants[0]?.id);
setInventory(parentSection, defaultVariant?.inventory);

return setVariant(parentSection, defaultVariant?.id);
}

options.forEach((option) => {
Expand Down Expand Up @@ -199,6 +235,7 @@ function selectDefaultOptions(parentSection) {

const selectedVariant = getSelectedVariant(parentSection);

setInventory(parentSection, selectedVariant.inventory);
setVariant(parentSection, selectedVariant.id);
}

Expand Down Expand Up @@ -265,19 +302,6 @@ function getSelectedVariant(parentSection) {
});
}

/**
* Get the currency Symbol
* @param {HTMLElement} parentSection
* @return {String} currency symbol
*/
function currencySymbol(parentElement) {
const currentParent = parentElement.querySelector('.product-price');
const priceContent = currentParent.innerText;
const currencySymbol = priceContent.replace(/[0-9.,]/g, "").trim();

return currencySymbol;
}

/**
* Updates product details after variant change
* @param {HTMLElement} parentSection
Expand All @@ -296,28 +320,38 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {
const productPrices = parentSection.querySelectorAll('.product-price');
const showStickyCheckoutPrice = $('#sticky-price');

if(productPrices.length === 0){
if(showStickyCheckoutPrice) {
showStickyCheckoutPrice.innerHTML = `${price} ${Dotshop.currency}`;
}

return;
}

productPrices.forEach(productPrice => {
const displayValue = `${price} ${currencySymbol(parentSection)}`;
const displayValue = `${price} ${Dotshop.currency}`;

productPrice.innerText = displayValue;

if(showStickyCheckoutPrice) {
showStickyCheckoutPrice.innerHTML = productPrice.innerHTML;
}
})
});
}

const variantCompareAtPrices = parentSection.querySelectorAll('.compare-price');

if(compareAtPrice) {
variantCompareAtPrices.forEach(variantComparePrice => {
variantComparePrice.innerHTML = `<del> ${compareAtPrice} ${currencySymbol(parentSection)} </del>`;
variantComparePrice.innerHTML = `<del> ${compareAtPrice} ${Dotshop.currency} </del>`;
})
} else {
variantCompareAtPrices.forEach(variantComparePrice => {
variantComparePrice.innerHTML = ``;
})
}

goToCheckoutStep();
}

/**
Expand Down Expand Up @@ -354,36 +388,27 @@ function teleportCheckoutElements(parentSection) {
const quantity = parentSection.querySelector('.product-quantity');
const options = parentSection.querySelector('.product-options');

if(!quantity || !options){
return;
}

// Create placeholder for the teleported items
const quantityPlaceholder = createPlaceholderDiv('quantity-placeholder');
const optionsPlaceholder = createPlaceholderDiv('options-placeholder');
quantity.parentElement.appendChild(quantityPlaceholder);
options.parentElement.appendChild(optionsPlaceholder);

// teleport elements
if (window.matchMedia("(max-width: 768px)").matches) {
teleport(options, '#checkout_step_1 .options');
teleport(quantity, '#checkout_step_1 .options');
}
}

function teleportProductName() {
const elementContent = $('.product-name').textContent;
const elementContent = $('.product-name').textContent || globalProduct.name;

$('#product-name').textContent = elementContent;
}

function teleportProductCard(step) {
function teleportProductCard() {
const productCard = $('.yc-product-card');

switch (step) {
case 1:
teleport(productCard, '#checkout_step_1 .variant-card-1');
break;
case 2:
teleport(productCard, '#checkout_step_2 .variant-card-2');
break;
}
teleport(productCard, '#checkout_step_2 .variant-card-2');
}

function showStickyCheckout() {
Expand All @@ -408,10 +433,8 @@ function triggerCheckout(parentId) {

teleportProductName();

if (window.matchMedia("(max-width: 768px)").matches) {
goToCheckoutStep(1);
} else {
goToCheckoutStep(2);
if (!window.matchMedia("(max-width: 768px)").matches) {
goToCheckoutStep();
}

overlay.addEventListener('click', () => {
Expand All @@ -422,16 +445,7 @@ function triggerCheckout(parentId) {
}

function responsiveStickyCheckout() {
const quantity = $('.product-quantity');
const options = $('.product-options');

if(window.innerWidth >= 768) {
goToCheckoutStep(2);
} else if (window.innerWidth < 768) {
goToCheckoutStep(1);
teleport(options, '#checkout_step_1 .options');
teleport(quantity, '#checkout_step_1 .options');
}
goToCheckoutStep();
}

function hideCheckout() {
Expand Down Expand Up @@ -520,32 +534,28 @@ function showSelectedVariants() {
// Show selected quantity in checkout_step_2

function showSelectedQuantity() {
const quantityValue = $('.product-quantity input')?.value;
const quantityValue = $('.product-quantity input')?.value || 1;
$('#variant_quantity').innerHTML = `<span class='quantity-value'>x${quantityValue}</span`;
}

// Sticky checkout steps conditions

function goToCheckoutStep(step) {
$('#checkout_step_1').style.display = 'none';
$('#checkout_step_2').style.display = 'none';
function goToCheckoutStep(close = false) {
if (!$('#checkout_step_2')) {
return;
}

switch (step) {
case 1:
$('#checkout_step_1').style.display = 'flex';
teleportProductCard(1);
break;
case 2:
$('#checkout_step_2').style.display = 'flex';
$(' #express-checkout-form').style.display = 'block';
teleportProductCard(2);
showSelectedVariants();
showSelectedQuantity();
break;
default:
hideCheckout();
break;
if (close) {
hideCheckout();

return;
}

$('#checkout_step_2').style.display = 'flex';
$(' #express-checkout-form').style.display = 'block';
teleportProductCard();
showSelectedVariants();
showSelectedQuantity();
}

function setup() {
Expand All @@ -555,7 +565,7 @@ function setup() {

singleProductSections.forEach((section) => {
const productDetails = section.querySelector('.product-options');
const variant = variants[0];
const variant = defaultVariant;

updateProductDetails(
section,
Expand All @@ -576,6 +586,8 @@ function setup() {
selectedVariant.price,
selectedVariant.compare_at_price
);

setInventory(section, selectedVariant.inventory);
});

observer.observe(productDetails, {
Expand All @@ -587,6 +599,8 @@ function setup() {

selectDefaultOptions(section);
});

goToCheckoutStep();
}

setup();
Loading

0 comments on commit 0804c2e

Please sign in to comment.