Skip to content

Instantly share code, notes, and snippets.

@Sally165
Created April 21, 2023 10:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Sally165/3d86b8e3a2536654df484b26e8509b1e to your computer and use it in GitHub Desktop.
Save Sally165/3d86b8e3a2536654df484b26e8509b1e to your computer and use it in GitHub Desktop.
<script>
window.addEventListener('load', () => {
$('.cart-popup__close').on('click', hidePopupCart);
$('body').on('click', hidePopupCart);
var pfATCs = $('#__pf').find('[data-pf-type="ProductATC"]');
pfATCs.click(e => {
var checkoutAction = e.currentTarget.getAttribute('data-checkout');
if (checkoutAction === 'same') {
window.__pagefly_helper_store__ && window.__pagefly_helper_store__.subscribe(function(item) {
console.log('check item', item);
$.getJSON('/cart.json').then(cart => {
// Update quantity and title
$('[data-cart-popup-title]').text(item.product_title);
$('[data-cart-popup-quantity]').text(item.quantity);
$('[data-cart-popup-quantity-label]').text(
theme.strings.quantityLabel.replace('[count]', item.quantity)
);
// Update image in Pop-up
if (item.featured_image.url === null) {
$('[data-cart-popup-image-wrapper]').addClass('hide');
return;
}
var $placeholder = $('[data-placeholder-size]');
var maxWidth = 95 * item.featured_image.aspect_ratio;
var heightRatio = 100 / item.featured_image.aspect_ratio;
$('[data-cart-popup-image-placeholder]').css('max-width', maxWidth);
$placeholder.css('padding-top', heightRatio + '%');
// Update image feature
if (item.featured_image.url === null) return;
$('[data-cart-popup-image-wrapper]').removeClass('hide');
var sizedImageUrl = theme.Images.getSizedImageUrl(item.featured_image.url, '200x');
$('.cart-popup-item__image--placeholder').addClass('hide');
if ($('[data-cart-popup-image]').length > 0) {
$('[data-cart-popup-image]')[0].src = sizedImageUrl;
// Update quantity in cart Icon
var ariaLabel;
if (item.quantity === 1) {
ariaLabel = theme.strings.oneCartCount;
} else if (item.quantity > 1) {
ariaLabel = theme.strings.otherCartCount.replace('[count]', item.quantity);
}
$('[data-cart-popup-cart-quantity]').text(cart.item_count).attr('aria-label', ariaLabel);
$('[data-cart-count-bubble]').removeClass('hide');
$('[data-cart-count]').text(cart.item_count);
// Open Cart Pop-up
theme.Helpers.prepareTransition(document.querySelector('.cart-popup-wrapper'))
document.querySelector('.cart-popup-wrapper').classList.remove('cart-popup-wrapper--hidden');
} else {
var image = document.createElement('img');
image.src = sizedImageUrl;
image.alt = item.featured_image.alt;
image.classList.add('cart-popup-item__image');
image.dataset.cartPopupImage = '';
image.onload = function() {
$('[data-cart-popup-image-wrapper]').append(image);
}
// Update quantity in cart Icon
var ariaLabel;
if (item.quantity === 1) {
ariaLabel = theme.strings.oneCartCount;
} else if (item.quantity > 1) {
ariaLabel = theme.strings.otherCartCount.replace('[count]', item.quantity);
}
$('[data-cart-popup-cart-quantity]').text(cart.item_count).attr('aria-label', ariaLabel);
$('[data-cart-count-bubble]').removeClass('hide');
$('[data-cart-count]').text(cart.item_count);
// Open Cart Pop-up
theme.Helpers.prepareTransition(document.querySelector('.cart-popup-wrapper'))
document.querySelector('.cart-popup-wrapper').classList.remove('cart-popup-wrapper--hidden');
}
})
})
}
})
})
function hidePopupCart() {
if(!document.querySelector('.cart-popup-wrapper').classList.contains('cart-popup-wrapper--hidden')) {
theme.Helpers.prepareTransition(document.querySelector('.cart-popup-wrapper'))
document.querySelector('.cart-popup-wrapper').classList.add('cart-popup-wrapper--hidden');
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment