Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added callback to allow reattaching slider after AJAX load. #86

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added callback to allow reattaching slider after AJAX load. #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 91 additions & 80 deletions assets/scripts/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,12 @@
(function ($) {
$(document).ready(function () {
initSlider();

// Adds slide navigation through variation thumbnails for variable products
// displayed in products listings.
if ($('.js-gallerya-slider').length > 0 && typeof $.fn.flickity === 'function') {
const arrowShape = 'M85,50.36033a2.72075,2.72075,0,0,0-2.74945-2.68906H24.01177L47.61119,24.59022a2.65667,2.65667,0,0,0,0-3.80232,2.79411,2.79411,0,0,0-3.88955,0L15.80559,48.09077a2.64614,2.64614,0,0,0,0,3.80232L43.729,79.21211a2.79185,2.79185,0,0,0,3.88771,0,2.64613,2.64613,0,0,0,0-3.80233L24.756,53.04939h57.4946A2.72075,2.72075,0,0,0,85,50.36033Z';

$('.js-gallerya-slider').each(function (index, element) {
const galleryaSlider = $(this).closest('.gallerya--slider, .gallerya--product-variation-slider');
const navigation = galleryaSlider.data('gallerya-navigation');
const pageDots = galleryaSlider.data('galleryaPageDots');
const thumbnails = galleryaSlider.find('.js-gallerya-thumbnail-slider');
const count = galleryaSlider.find('[data-gallerya-count]');
const productLink = galleryaSlider.parents('a.woocommerce-loop-product__link');
const sliderArgs = {
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
watchCSS: true,
lazyLoad: true,
};

if (!galleryaSlider.hasClass('gallerya--product-variation-slider')) {
sliderArgs.arrowShape = arrowShape;
}
if (typeof pageDots !== 'undefined') {
// Let the pageDots property be overriden by a data-attribute.
sliderArgs.pageDots = pageDots == true;
}
else if (typeof navigation === 'undefined' || navigation == false || thumbnails.length > 0) {
sliderArgs.pageDots = false;
}

// Adjust styling before slider init.
$(this).addClass('flickity');
$(this).flickity(sliderArgs);

// Handle the slide changing to update the variant url
$(this).on('change.flickity', function (event, index) {
const variantURL = $(this).find('li.is-selected').data('gallerya-variant-permalink');
if (variantURL) {
productLink.prop('href', variantURL);
}
});

const flickityData = $(this).data('flickity');
if (thumbnails.length > 0) {
const thumbnailsArgs = {
asNavFor: element,
contain: true,
pageDots: false,
imagesLoaded: true,
groupCells: true,
arrowShape: arrowShape,
};
thumbnails.flickity(thumbnailsArgs);

$(this).on('select.flickity', function () {
const index = flickityData.selectedIndex;
const className = 'is-currently-selected';
thumbnails.find('.flickity-slider li').removeClass(className)
.eq(index).addClass(className);
});
}
if (count) {
$(this).on('select.flickity', function () {
const slideNumber = flickityData.selectedIndex + 1;
count.text(slideNumber + '/' + flickityData.slides.length);
});
}
});

$('.woocommerce-loop-product__link').on('click', function (e) {
// Prevent clicks onto slider arrows to bubble through to wrapping product link.
if ($(e.target).closest('.flickity-prev-next-button').length !== 0){
e.stopPropagation();
return false;
}
});
}

// Reinitialize slider for Woocommerce Related Accessories
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The event actually doesn't seem to be related to related-accessories, so we should drop its name from the comment here.

$(document).on('reloadGalleryaSlider', function () {
initSlider();
});

// Adds lightbox functionality to product gallery.
$().fancybox({
selector : '[data-fancybox], .js-gallerya-lightbox .gallerya__image > a, .woocommerce-product-gallery .woocommerce-product-gallery__image > a',
Expand Down Expand Up @@ -263,6 +189,91 @@
});
}

/**
* Initialize gallerya slider
*/
function initSlider() {
// Adds slide navigation through variation thumbnails for variable products
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good idea to do in general, but can you move the code back up to its original position in the file?

// displayed in products listings.
if ($('.js-gallerya-slider').length > 0 && typeof $.fn.flickity === 'function') {
const arrowShape = 'M85,50.36033a2.72075,2.72075,0,0,0-2.74945-2.68906H24.01177L47.61119,24.59022a2.65667,2.65667,0,0,0,0-3.80232,2.79411,2.79411,0,0,0-3.88955,0L15.80559,48.09077a2.64614,2.64614,0,0,0,0,3.80232L43.729,79.21211a2.79185,2.79185,0,0,0,3.88771,0,2.64613,2.64613,0,0,0,0-3.80233L24.756,53.04939h57.4946A2.72075,2.72075,0,0,0,85,50.36033Z';

$('.js-gallerya-slider').each(function (index, element) {
const galleryaSlider = $(this).closest('.gallerya--slider, .gallerya--product-variation-slider');
const navigation = galleryaSlider.data('gallerya-navigation');
const pageDots = galleryaSlider.data('galleryaPageDots');
const thumbnails = galleryaSlider.find('.js-gallerya-thumbnail-slider');
const count = galleryaSlider.find('[data-gallerya-count]');
const productLink = galleryaSlider.parents('a.woocommerce-loop-product__link');
const sliderArgs = {
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
watchCSS: true,
lazyLoad: true,
};

if (!galleryaSlider.hasClass('gallerya--product-variation-slider')) {
sliderArgs.arrowShape = arrowShape;
}
if (typeof pageDots !== 'undefined') {
// Let the pageDots property be overriden by a data-attribute.
sliderArgs.pageDots = pageDots == true;
}
else if (typeof navigation === 'undefined' || navigation == false || thumbnails.length > 0) {
sliderArgs.pageDots = false;
}

// Adjust styling before slider init.
$(this).addClass('flickity');
$(this).flickity(sliderArgs);

// Handle the slide changing to update the variant url
$(this).on('change.flickity', function (event, index) {
const variantURL = $(this).find('li.is-selected').data('gallerya-variant-permalink');
if (variantURL) {
productLink.prop('href', variantURL);
}
});

const flickityData = $(this).data('flickity');
if (thumbnails.length > 0) {
const thumbnailsArgs = {
asNavFor: element,
contain: true,
pageDots: false,
imagesLoaded: true,
groupCells: true,
arrowShape: arrowShape,
};
thumbnails.flickity(thumbnailsArgs);

$(this).on('select.flickity', function () {
const index = flickityData.selectedIndex;
const className = 'is-currently-selected';
thumbnails.find('.flickity-slider li').removeClass(className)
.eq(index).addClass(className);
});
}
if (count) {
$(this).on('select.flickity', function () {
const slideNumber = flickityData.selectedIndex + 1;
count.text(slideNumber + '/' + flickityData.slides.length);
});
}
});

$('.woocommerce-loop-product__link').on('click', function (e) {
// Prevent clicks onto slider arrows to bubble through to wrapping product link.
if ($(e.target).closest('.flickity-prev-next-button').length !== 0) {
e.stopPropagation();
return false;
}
});
}
}

/**
* Swaps first and second slide of product gallery, if first is a video.
*/
Expand Down
2 changes: 1 addition & 1 deletion dist/scripts/flickity.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/scripts/script.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading