Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

allow multiple galleries on page and init of dynamically loaded galleries

This commit is contained in:
Manos Psychogyiopoulos 2017-03-13 18:58:39 +02:00
parent 0433af97fd
commit 1d5cd9409e
2 changed files with 90 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/js/frontend/add-to-cart-variation.js
View File

@ -10,6 +10,7 @@
this.$singleVariationWrap = $form.find( '.single_variation_wrap' );
this.$resetVariations = $form.find( '.reset_variations' );
this.$product = $form.closest( '.product' );
this.$product_gallery = this.$product.find( '.woocommerce-product-gallery' );
this.variationData = $form.data( 'product_variations' );
this.useAjax = false === this.variationData;
this.xhr = false;
@ -527,7 +528,9 @@
* Reset the slide position if the variation has a different image than the current one
*/
$.fn.wc_maybe_trigger_slide_position_reset = function( variation ) {
var $form = $( this ),
var $form = $( this ),
$product = $form.closest( '.product' ),
$product_gallery = $product.find( '.woocommerce-product-gallery' ),
reset_slide_position = false,
new_image_id = ( variation && variation.image_id ) ? variation.image_id : '';
@ -538,7 +541,7 @@
$form.attr( 'current-image', new_image_id );
if ( reset_slide_position ) {
$( 'body' ).trigger( 'woocommerce_gallery_reset_slide_position' );
$product_gallery.trigger( 'woocommerce_gallery_reset_slide_position' );
}
};
@ -548,6 +551,7 @@
$.fn.wc_variations_image_update = function( variation ) {
var $form = this,
$product = $form.closest( '.product' ),
$product_gallery = $product.find( '.woocommerce-product-gallery' ),
$gallery_img = $product.find( '.flex-control-nav li:eq(0) img' ),
$gallery_wrapper = $product.find( '.woocommerce-product-gallery__wrapper ' ),
$product_img_wrap = $gallery_wrapper.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ),
@ -583,7 +587,7 @@
}
window.setTimeout( function() {
$( 'body' ).trigger( 'woocommerce_init_gallery' );
$product_gallery.trigger( 'woocommerce_gallery_init_zoom' );
$form.wc_maybe_trigger_slide_position_reset( variation );
$( window ).trigger( 'resize' );
}, 10 );

136
assets/js/frontend/single-product.js
View File

@ -22,7 +22,7 @@ jQuery( function( $ ) {
} else {
$tabs.find( 'li:first a' ).click();
}
})
} )
.on( 'click', '.wc-tabs li a, ul.tabs li a', function( e ) {
e.preventDefault();
var $tab = $( this );
@ -34,16 +34,16 @@ jQuery( function( $ ) {
$tab.closest( 'li' ).addClass( 'active' );
$tabs_wrapper.find( $tab.attr( 'href' ) ).show();
})
} )
// Review link
.on( 'click', 'a.woocommerce-review-link', function() {
$( '.reviews_tab a' ).click();
return true;
})
} )
// Star ratings for comments
.on( 'init', '#rating', function() {
$( '#rating' ).hide().before( '<p class="stars"><span><a class="star-1" href="#">1</a><a class="star-2" href="#">2</a><a class="star-3" href="#">3</a><a class="star-4" href="#">4</a><a class="star-5" href="#">5</a></span></p>' );
})
} )
.on( 'click', '#respond p.stars a', function() {
var $star = $( this ),
$rating = $( this ).closest( '#respond' ).find( '#rating' ),
@ -55,7 +55,7 @@ jQuery( function( $ ) {
$container.addClass( 'selected' );
return false;
})
} )
.on( 'click', '#respond #submit', function() {
var $rating = $( this ).closest( '#respond' ).find( '#rating' ),
rating = $rating.val();
@ -65,12 +65,7 @@ jQuery( function( $ ) {
return false;
}
})
.on( 'woocommerce_init_gallery', function() {
if ( $.isFunction( $.fn.zoom ) && wc_single_product_params.zoom_enabled ) {
wc_product_gallery.init_zoom();
}
});
} );
//Init Tabs and Star Ratings
$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );
@ -78,28 +73,30 @@ jQuery( function( $ ) {
/**
* Product gallery class.
*/
var wc_product_gallery = {
var Product_Gallery = function( $el ) {
this.$el = $el;
/**
* Initialize gallery actions and events.
*/
init: function() {
if ( $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled ) {
this.init_flexslider();
}
if ( $.isFunction( $.fn.zoom ) && wc_single_product_params.zoom_enabled ) {
this.init_zoom();
}
if ( typeof PhotoSwipe !== 'undefined' && wc_single_product_params.photoswipe_enabled ) {
this.init_photoswipe();
}
},
this.init = function() {
this.init_flexslider();
this.init_zoom();
this.init_photoswipe();
};
/**
* Initialize flexSlider.
*/
init_flexslider: function() {
$( '.woocommerce-product-gallery' ).flexslider({
this.init_flexslider = function() {
if ( ! $.isFunction( $.fn.flexslider ) || ! wc_single_product_params.flexslider_enabled ) {
return;
}
$el.flexslider( {
selector: '.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image',
animation: wc_single_product_params.flexslider.animation,
smoothHeight: wc_single_product_params.flexslider.smoothHeight,
@ -118,24 +115,29 @@ jQuery( function( $ ) {
if ( height > largest_height ) {
largest_height = height;
}
});
} );
$images.each( function() {
$( this ).css( 'min-height', largest_height );
});
} );
}
});
$( 'body' ).on( 'woocommerce_gallery_reset_slide_position', function(){
$( '.woocommerce-product-gallery' ).flexslider( 0 );
} );
},
$el.on( 'woocommerce_gallery_reset_slide_position', this.reset_slide_position );
$el.on( 'woocommerce_gallery_init_zoom', this.init_zoom );
};
/**
* Init zoom.
*/
init_zoom: function() {
var zoom_target = $( '.woocommerce-product-gallery__image' ),
this.init_zoom = function() {
if ( ! $.isFunction( $.fn.zoom ) || ! wc_single_product_params.zoom_enabled ) {
return;
}
var zoom_target = $( '.woocommerce-product-gallery__image', $el ),
enable_zoom = false;
if ( ! wc_single_product_params.flexslider_enabled ) {
@ -145,7 +147,7 @@ jQuery( function( $ ) {
$( zoom_target ).each( function( index, target ) {
var image = $( target ).find( 'img' );
if ( image.attr( 'width' ) > $( '.woocommerce-product-gallery' ).width() ) {
if ( image.attr( 'width' ) > $el.width() ) {
enable_zoom = true;
return false;
}
@ -156,15 +158,19 @@ jQuery( function( $ ) {
zoom_target.trigger( 'zoom.destroy' );
zoom_target.zoom({
touch: false
});
} );
}
},
};
this.reset_slide_position = function() {
$el.flexslider( 0 );
};
/**
* Get product gallery image items.
*/
get_gallery_items: function() {
var $slides = $( '.woocommerce-product-gallery__wrapper' ).children(),
this.get_gallery_items = function() {
var $slides = $( '.woocommerce-product-gallery__wrapper', $el ).children(),
items = [],
index = $slides.filter( '.' + 'flex-active-slide' ).index();
@ -181,41 +187,49 @@ jQuery( function( $ ) {
title: img.attr( 'title' )
};
items.push( item );
});
} );
}
return {
index: index,
items: items
};
},
};
/**
* Init PhotoSwipe.
*/
init_photoswipe: function() {
if ( wc_single_product_params.zoom_enabled ) {
$( '.woocommerce-product-gallery--with-images' ).prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' );
$( document ).on( 'click', '.woocommerce-product-gallery__trigger', this.trigger_photoswipe );
this.init_photoswipe = function() {
if ( typeof PhotoSwipe === 'undefined' || ! wc_single_product_params.photoswipe_enabled ) {
return;
}
$( document ).on( 'click', '.woocommerce-product-gallery__image a', this.trigger_photoswipe );
},
if ( wc_single_product_params.zoom_enabled ) {
if ( $el.hasClass( 'woocommerce-product-gallery--with-images' ) ) {
$el.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' );
}
$el.on( 'click', '.woocommerce-product-gallery__trigger', { gallery: this }, this.trigger_photoswipe );
}
$el.on( 'click', '.woocommerce-product-gallery__image a', { gallery: this }, this.trigger_photoswipe );
};
/**
* Initialise photoswipe.
*/
trigger_photoswipe: function( e ) {
this.trigger_photoswipe = function( e ) {
e.preventDefault();
var pswpElement = $( '.pswp' )[0],
items = wc_product_gallery.get_gallery_items(),
items = e.data.gallery.get_gallery_items(),
target = $( e.target ),
clicked;
if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) {
clicked = e.target.closest( 'figure' );
} else {
clicked = target.parents( '.woocommerce-product-gallery' ).find( '.flex-active-slide' );
clicked = e.data.gallery.$el.find( '.flex-active-slide' );
}
var options = {
@ -230,8 +244,24 @@ jQuery( function( $ ) {
// Initializes and opens PhotoSwipe.
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items.items, options );
gallery.init();
}
};
this.init();
};
wc_product_gallery.init();
});
/**
* Function to call wc_product_gallery on jquery selector.
*/
$.fn.wc_product_gallery = function() {
new Product_Gallery( this );
return this;
};
/*
* Initialize all galleries on page.
*/
$( '.woocommerce-product-gallery' ).each( function() {
$( this ).wc_product_gallery( this );
} );
} );