Skip to content

Commit

Permalink
TH-16: Storefront > issue of popup alerts not translated (#32)
Browse files Browse the repository at this point in the history
  • Loading branch information
MohamedJamoun authored Aug 26, 2024
1 parent bd46717 commit c68a7b8
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 53 deletions.
6 changes: 2 additions & 4 deletions themes/aura/assets/express-checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ async function placeOrder() {

formFields.forEach(field => {
const fieldName = field.indexOf('extra_fields') > -1 ? field.replace('extra_fields.', 'extra_fields[') + ']' : field;

const formField = form.querySelector(`[name="${fieldName}"]`);
const errorEl = form.querySelector(`.validation-error[data-error="${fieldName}"]`);
if (formField) {
Expand All @@ -44,11 +44,9 @@ async function placeOrder() {
});
});

notify(err.detail, 'error');

const formTop = form.getBoundingClientRect().top;

if(!document.querySelector('#yc-sticky-checkout')) {
if (!document.querySelector('#yc-sticky-checkout')) {
window.scrollBy({ top: formTop - window.innerHeight / 3, behavior: 'smooth' });
}
})
Expand Down
31 changes: 17 additions & 14 deletions themes/aura/assets/product.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function uploadImage(element) {
const uploadArea = parentSection.querySelector('.yc-upload');
const imagePreview = parentSection.querySelector('.yc-upload-preview');
const imageWrapper = imagePreview.querySelector('.yc-image-preview');
const progressContainer = imagePreview.querySelector('.progress-container');
const progressContainer = imagePreview.querySelector('.progress-container');
const imageName = $('.yc-image-info .image-name');
const imageSize = $('.yc-image-info .image-size');
const closePreviewButton = $('#close-preview');
Expand Down Expand Up @@ -66,10 +66,13 @@ function uploadImage(element) {
smoothProgressBar();
});

const res = await youcanjs.product.upload(this.files[0]);
if (res.error) return notify(res.error, 'error');
try {
const res = await youcanjs.product.upload(this.files[0]);

uploadedImageLink.value = res.link;
uploadedImageLink.value = res.link;
} catch (error) {
error.meta.fields.image.map(message => notify(message, 'error'));
}
}
});

Expand All @@ -78,13 +81,13 @@ function uploadImage(element) {
const fileSizeInKB = fileSizeInBytes / 1024;
const fileSizeInMB = fileSizeInKB / 1024;

if(fileSizeInMB > 2) {
if (fileSizeInMB > 2) {
source.src = '';
source.style.height = "40px";
imageName.style.color = "red";
imageName.innerText = sizeBigMessage;
imageSize.innerText = fileSizeInMB.toFixed(2) + " Mb";
} else if(fileSizeInMB < 1) {
} else if (fileSizeInMB < 1) {
imageName.style.color = "inherit";
imageSize.innerText = fileSizeInKB.toFixed(2) + " Kb";
} else {
Expand Down Expand Up @@ -331,8 +334,8 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {
const productPrices = parentSection.querySelectorAll('.product-price');
const showStickyCheckoutPrice = $('#sticky-price');

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

Expand All @@ -344,15 +347,15 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {

productPrice.innerText = displayValue;

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

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

if(compareAtPrice) {
if (compareAtPrice) {
variantCompareAtPrices.forEach(variantComparePrice => {
variantComparePrice.innerHTML = `<del> ${compareAtPrice} ${Dotshop.currency} </del>`;
})
Expand Down Expand Up @@ -399,7 +402,7 @@ function teleportCheckoutElements(parentSection) {
const quantity = parentSection.querySelector('.product-quantity');
const options = parentSection.querySelector('.product-options');

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

Expand Down Expand Up @@ -511,17 +514,17 @@ function showSelectedVariants() {

switch (variantType) {
case 'textual_buttons':
const textualButton = variant.querySelector('.yc-options-item.active')?.textContent;
const textualButton = variant.querySelector('.yc-options-item.active')?.textContent;
variantOption = createAndSetText(variantName, textualButton, 'yc-textual-item').element;
break;
break;
case 'color_base_buttons':
const colorBaseButton = variant.querySelector('.color-item.active .preview')?.outerHTML;
variantOption = createAndSetText(variantName, colorBaseButton, 'colored-button').element;
break;
case 'radio_buttons':
const radioButton = variant.querySelector('.yc-radio-buttons.active input[type="radio"]')?.value;
variantOption = createAndSetText(variantName, radioButton).element;
break;
break;
case 'dropdown':
const dropDown = variant.querySelector('.dropdown-content li.selected')?.innerText;
variantOption = createAndSetText(variantName, dropDown).element;
Expand Down
4 changes: 1 addition & 3 deletions themes/harmony/assets/express-checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,9 @@ async function placeOrder() {
});
});

notify(err.detail, 'error');

const formTop = form.getBoundingClientRect().top;

if(!document.querySelector('#yc-sticky-checkout')) {
if (!document.querySelector('#yc-sticky-checkout')) {
window.scrollBy({ top: formTop - window.innerHeight / 3, behavior: 'smooth' });
}
})
Expand Down
31 changes: 17 additions & 14 deletions themes/harmony/assets/product.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function uploadImage(element) {
const uploadArea = parentSection.querySelector('.yc-upload');
const imagePreview = parentSection.querySelector('.yc-upload-preview');
const imageWrapper = imagePreview.querySelector('.yc-image-preview');
const progressContainer = imagePreview.querySelector('.progress-container');
const progressContainer = imagePreview.querySelector('.progress-container');
const imageName = $('.yc-image-info .image-name');
const imageSize = $('.yc-image-info .image-size');
const closePreviewButton = $('#close-preview');
Expand Down Expand Up @@ -66,10 +66,13 @@ function uploadImage(element) {
smoothProgressBar();
});

const res = await youcanjs.product.upload(this.files[0]);
if (res.error) return notify(res.error, 'error');
try {
const res = await youcanjs.product.upload(this.files[0]);

uploadedImageLink.value = res.link;
uploadedImageLink.value = res.link;
} catch (error) {
error.meta.fields.image.map(message => notify(message, 'error'));
}
}
});

Expand All @@ -78,13 +81,13 @@ function uploadImage(element) {
const fileSizeInKB = fileSizeInBytes / 1024;
const fileSizeInMB = fileSizeInKB / 1024;

if(fileSizeInMB > 2) {
if (fileSizeInMB > 2) {
source.src = '';
source.style.height = "40px";
imageName.style.color = "red";
imageName.innerText = sizeBigMessage;
imageSize.innerText = fileSizeInMB.toFixed(2) + " Mb";
} else if(fileSizeInMB < 1) {
} else if (fileSizeInMB < 1) {
imageName.style.color = "inherit";
imageSize.innerText = fileSizeInKB.toFixed(2) + " Kb";
} else {
Expand Down Expand Up @@ -331,8 +334,8 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {
const productPrices = parentSection.querySelectorAll('.product-price');
const showStickyCheckoutPrice = $('#sticky-price');

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

Expand All @@ -344,15 +347,15 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {

productPrice.innerText = displayValue;

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

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

if(compareAtPrice) {
if (compareAtPrice) {
variantCompareAtPrices.forEach(variantComparePrice => {
variantComparePrice.innerHTML = `<del> ${compareAtPrice} ${Dotshop.currency} </del>`;
})
Expand Down Expand Up @@ -399,7 +402,7 @@ function teleportCheckoutElements(parentSection) {
const quantity = parentSection.querySelector('.product-quantity');
const options = parentSection.querySelector('.product-options');

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

Expand Down Expand Up @@ -511,17 +514,17 @@ function showSelectedVariants() {

switch (variantType) {
case 'textual_buttons':
const textualButton = variant.querySelector('.yc-options-item.active')?.textContent;
const textualButton = variant.querySelector('.yc-options-item.active')?.textContent;
variantOption = createAndSetText(variantName, textualButton, 'yc-textual-item').element;
break;
break;
case 'color_base_buttons':
const colorBaseButton = variant.querySelector('.color-item.active .preview')?.outerHTML;
variantOption = createAndSetText(variantName, colorBaseButton, 'colored-button').element;
break;
case 'radio_buttons':
const radioButton = variant.querySelector('.yc-radio-buttons.active input[type="radio"]')?.value;
variantOption = createAndSetText(variantName, radioButton).element;
break;
break;
case 'dropdown':
const dropDown = variant.querySelector('.dropdown-content li.selected')?.innerText;
variantOption = createAndSetText(variantName, dropDown).element;
Expand Down
4 changes: 1 addition & 3 deletions themes/meraki/assets/express-checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,9 @@ async function placeOrder() {
});
});

notify(err.detail, 'error');

const formTop = form.getBoundingClientRect().top;

if(!document.querySelector('#yc-sticky-checkout')) {
if (!document.querySelector('#yc-sticky-checkout')) {
window.scrollBy({ top: formTop - window.innerHeight / 3, behavior: 'smooth' });
}
})
Expand Down
33 changes: 18 additions & 15 deletions themes/meraki/assets/product.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/
function previewProductImage(element, event) {
event?.stopPropagation();

const parentSection = element.closest('.yc-single-product');
const thumbnail = parentSection.querySelector('.main-image');

Expand All @@ -24,7 +24,7 @@ function uploadImage(element) {
const uploadArea = parentSection.querySelector('.yc-upload');
const imagePreview = parentSection.querySelector('.yc-upload-preview');
const imageWrapper = imagePreview.querySelector('.yc-image-preview');
const progressContainer = imagePreview.querySelector('.progress-container');
const progressContainer = imagePreview.querySelector('.progress-container');
const imageName = $('.yc-image-info .image-name');
const imageSize = $('.yc-image-info .image-size');
const closePreviewButton = $('#close-preview');
Expand Down Expand Up @@ -68,10 +68,13 @@ function uploadImage(element) {
smoothProgressBar();
});

const res = await youcanjs.product.upload(this.files[0]);
if (res.error) return notify(res.error, 'error');
try {
const res = await youcanjs.product.upload(this.files[0]);

uploadedImageLink.value = res.link;
uploadedImageLink.value = res.link;
} catch (error) {
error.meta.fields.image.map(message => notify(message, 'error'));
}
}
});

Expand All @@ -80,13 +83,13 @@ function uploadImage(element) {
const fileSizeInKB = fileSizeInBytes / 1024;
const fileSizeInMB = fileSizeInKB / 1024;

if(fileSizeInMB > 2) {
if (fileSizeInMB > 2) {
source.src = '';
source.style.height = "40px";
imageName.style.color = "red";
imageName.innerText = sizeBigMessage;
imageSize.innerText = fileSizeInMB.toFixed(2) + " Mb";
} else if(fileSizeInMB < 1) {
} else if (fileSizeInMB < 1) {
imageName.style.color = "inherit";
imageSize.innerText = fileSizeInKB.toFixed(2) + " Kb";
} else {
Expand Down Expand Up @@ -332,8 +335,8 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {
const productPrices = parentSection.querySelectorAll('.product-price');
const showStickyCheckoutPrice = $('#sticky-price');

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

Expand All @@ -345,15 +348,15 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {

productPrice.innerText = displayValue;

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

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

if(compareAtPrice) {
if (compareAtPrice) {
variantCompareAtPrices.forEach(variantComparePrice => {
variantComparePrice.innerHTML = `<del> ${compareAtPrice} ${Dotshop.currency} </del>`;
})
Expand Down Expand Up @@ -400,7 +403,7 @@ function teleportCheckoutElements(parentSection) {
const quantity = parentSection.querySelector('.product-quantity');
const options = parentSection.querySelector('.product-options');

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

Expand Down Expand Up @@ -512,17 +515,17 @@ function showSelectedVariants() {

switch (variantType) {
case 'textual_buttons':
const textualButton = variant.querySelector('.yc-options-item.active')?.textContent;
const textualButton = variant.querySelector('.yc-options-item.active')?.textContent;
variantOption = createAndSetText(variantName, textualButton, 'yc-textual-item').element;
break;
break;
case 'color_base_buttons':
const colorBaseButton = variant.querySelector('.color-item.active .preview')?.outerHTML;
variantOption = createAndSetText(variantName, colorBaseButton, 'colored-button').element;
break;
case 'radio_buttons':
const radioButton = variant.querySelector('.yc-radio-buttons.active input[type="radio"]')?.value;
variantOption = createAndSetText(variantName, radioButton).element;
break;
break;
case 'dropdown':
const dropDown = variant.querySelector('.dropdown-content li.selected')?.innerText;
variantOption = createAndSetText(variantName, dropDown).element;
Expand Down

0 comments on commit c68a7b8

Please sign in to comment.