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

allow init with args

This commit is contained in:
Manos Psychogyiopoulos 2017-03-14 12:55:25 +02:00
parent 281209c9ae
commit 9181f1c151
4 changed files with 62 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,6 @@
this.$singleVariationWrap = $form.find( '.single_variation_wrap' ); this.$singleVariationWrap = $form.find( '.single_variation_wrap' );
this.$resetVariations = $form.find( '.reset_variations' ); this.$resetVariations = $form.find( '.reset_variations' );
this.$product = $form.closest( '.product' ); this.$product = $form.closest( '.product' );
this.$product_gallery = this.$product.find( '.woocommerce-product-gallery' );
this.variationData = $form.data( 'product_variations' ); this.variationData = $form.data( 'product_variations' );
this.useAjax = false === this.variationData; this.useAjax = false === this.variationData;
this.xhr = false; this.xhr = false;
@ -22,10 +21,10 @@
this.$attributeFields.unbind( 'change ' ); this.$attributeFields.unbind( 'change ' );
// Methods. // Methods.
this.getChosenAttributes = this.getChosenAttributes.bind( this ); this.getChosenAttributes = this.getChosenAttributes.bind( this );
this.findMatchingVariations = this.findMatchingVariations.bind( this ); this.findMatchingVariations = this.findMatchingVariations.bind( this );
this.isMatch = this.isMatch.bind( this ); this.isMatch = this.isMatch.bind( this );
this.toggleResetLink = this.toggleResetLink.bind( this ); this.toggleResetLink = this.toggleResetLink.bind( this );
// Events. // Events.
$form.on( 'click', '.reset_variations', { variationForm: this }, this.onReset ); $form.on( 'click', '.reset_variations', { variationForm: this }, this.onReset );
@ -530,7 +529,7 @@
$.fn.wc_maybe_trigger_slide_position_reset = function( variation ) { $.fn.wc_maybe_trigger_slide_position_reset = function( variation ) {
var $form = $( this ), var $form = $( this ),
$product = $form.closest( '.product' ), $product = $form.closest( '.product' ),
$product_gallery = $product.find( '.woocommerce-product-gallery' ), $product_gallery = $product.find( '.images' ),
reset_slide_position = false, reset_slide_position = false,
new_image_id = ( variation && variation.image_id ) ? variation.image_id : ''; new_image_id = ( variation && variation.image_id ) ? variation.image_id : '';
@ -551,10 +550,9 @@
$.fn.wc_variations_image_update = function( variation ) { $.fn.wc_variations_image_update = function( variation ) {
var $form = this, var $form = this,
$product = $form.closest( '.product' ), $product = $form.closest( '.product' ),
$product_gallery = $product.find( '.woocommerce-product-gallery' ), $product_gallery = $product.find( '.images' ),
$gallery_img = $product.find( '.flex-control-nav li:eq(0) img' ), $gallery_img = $product.find( '.flex-control-nav li:eq(0) img' ),
$gallery_wrapper = $product.find( '.woocommerce-product-gallery__wrapper ' ), $product_img_wrap = $product_gallery.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ),
$product_img_wrap = $gallery_wrapper.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ),
$product_img = $product_img_wrap.find( '.wp-post-image' ); $product_img = $product_img_wrap.find( '.wp-post-image' );
if ( variation && variation.image && variation.image.src && variation.image.src.length > 1 ) { if ( variation && variation.image && variation.image.src && variation.image.src.length > 1 ) {
@ -565,9 +563,9 @@
$product_img.wc_set_variation_attr( 'sizes', variation.image.sizes ); $product_img.wc_set_variation_attr( 'sizes', variation.image.sizes );
$product_img.wc_set_variation_attr( 'title', variation.image.title ); $product_img.wc_set_variation_attr( 'title', variation.image.title );
$product_img.wc_set_variation_attr( 'alt', variation.image.alt ); $product_img.wc_set_variation_attr( 'alt', variation.image.alt );
$product_img.wc_set_variation_attr( 'data-large-image', variation.image.full_src ); $product_img.wc_set_variation_attr( 'data-large_image', variation.image.full_src );
$product_img.wc_set_variation_attr( 'data-large-image-width', variation.image.full_src_w ); $product_img.wc_set_variation_attr( 'data-large_image_width', variation.image.full_src_w );
$product_img.wc_set_variation_attr( 'data-large-image-height', variation.image.full_src_h ); $product_img.wc_set_variation_attr( 'data-large_image_height', variation.image.full_src_h );
$product_img_wrap.wc_set_variation_attr( 'data-thumb', variation.image.src ); $product_img_wrap.wc_set_variation_attr( 'data-thumb', variation.image.src );
$gallery_img.wc_set_variation_attr( 'src', variation.image.src ); $gallery_img.wc_set_variation_attr( 'src', variation.image.src );
} else { } else {
@ -578,11 +576,10 @@
$product_img.wc_reset_variation_attr( 'sizes' ); $product_img.wc_reset_variation_attr( 'sizes' );
$product_img.wc_reset_variation_attr( 'title' ); $product_img.wc_reset_variation_attr( 'title' );
$product_img.wc_reset_variation_attr( 'alt' ); $product_img.wc_reset_variation_attr( 'alt' );
$product_img.wc_reset_variation_attr( 'data-large-image' ); $product_img.wc_reset_variation_attr( 'data-large_image' );
$product_img.wc_reset_variation_attr( 'data-large-image-width' ); $product_img.wc_reset_variation_attr( 'data-large_image_width' );
$product_img.wc_reset_variation_attr( 'data-large-image-height' ); $product_img.wc_reset_variation_attr( 'data-large_image_height' );
$product_img_wrap.wc_reset_variation_attr( 'data-thumb' ); $product_img_wrap.wc_reset_variation_attr( 'data-thumb' );
$product_img.wc_reset_variation_attr( 'large-image' );
$gallery_img.wc_reset_variation_attr( 'src' ); $gallery_img.wc_reset_variation_attr( 'src' );
} }

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

@ -73,9 +73,27 @@ jQuery( function( $ ) {
/** /**
* Product gallery class. * Product gallery class.
*/ */
var Product_Gallery = function( $el ) { var Product_Gallery = function( $el, args ) {
this.$el = $el; var gallery = this;
this.$el = $el;
this.$images = $( '.woocommerce-product-gallery__image', $el );
// Make this object available.
$el.data['product_gallery'] = this;
// Pick functionality to initialize...
this.flexslider_enabled = $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled;
this.zoom_enabled = $.isFunction( $.fn.zoom ) && wc_single_product_params.zoom_enabled;
this.photoswipe_enabled = typeof PhotoSwipe !== 'undefined' && wc_single_product_params.photoswipe_enabled;
// ...also taking args into account.
if ( args ) {
this.flexslider_enabled = false === args.photoswipe_enabled ? false : this.flexslider_enabled;
this.zoom_enabled = false === args.zoom_enabled ? false : this.zoom_enabled;
this.photoswipe_enabled = false === args.photoswipe_enabled ? false : this.photoswipe_enabled;
}
/** /**
* Initialize gallery actions and events. * Initialize gallery actions and events.
@ -92,7 +110,7 @@ jQuery( function( $ ) {
*/ */
this.init_flexslider = function() { this.init_flexslider = function() {
if ( ! $.isFunction( $.fn.flexslider ) || ! wc_single_product_params.flexslider_enabled ) { if ( ! this.flexslider_enabled ) {
return; return;
} }
@ -106,10 +124,10 @@ jQuery( function( $ ) {
animationSpeed: wc_single_product_params.flexslider.animationSpeed, animationSpeed: wc_single_product_params.flexslider.animationSpeed,
animationLoop: wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true. animationLoop: wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true.
start: function() { start: function() {
var $images = $( '.woocommerce-product-gallery__image' );
var largest_height = 0; var largest_height = 0;
$images.each( function() { gallery.$images.each( function() {
var height = $( this ).height(); var height = $( this ).height();
if ( height > largest_height ) { if ( height > largest_height ) {
@ -117,7 +135,7 @@ jQuery( function( $ ) {
} }
} ); } );
$images.each( function() { gallery.$images.each( function() {
$( this ).css( 'min-height', largest_height ); $( this ).css( 'min-height', largest_height );
} ); } );
} }
@ -133,11 +151,11 @@ jQuery( function( $ ) {
*/ */
this.init_zoom = function() { this.init_zoom = function() {
if ( ! $.isFunction( $.fn.zoom ) || ! wc_single_product_params.zoom_enabled ) { if ( ! gallery.zoom_enabled ) {
return; return;
} }
var zoom_target = $( '.woocommerce-product-gallery__image', $el ), var zoom_target = gallery.$images,
enable_zoom = false; enable_zoom = false;
if ( ! wc_single_product_params.flexslider_enabled ) { if ( ! wc_single_product_params.flexslider_enabled ) {
@ -156,7 +174,7 @@ jQuery( function( $ ) {
// But only zoom if the img is larger than its container. // But only zoom if the img is larger than its container.
if ( enable_zoom ) { if ( enable_zoom ) {
zoom_target.trigger( 'zoom.destroy' ); zoom_target.trigger( 'zoom.destroy' );
zoom_target.zoom({ zoom_target.zoom( {
touch: false touch: false
} ); } );
} }
@ -170,16 +188,16 @@ jQuery( function( $ ) {
* Get product gallery image items. * Get product gallery image items.
*/ */
this.get_gallery_items = function() { this.get_gallery_items = function() {
var $slides = $( '.woocommerce-product-gallery__wrapper', $el ).children(),
items = [], var $slides = this.$images,
index = $slides.filter( '.' + 'flex-active-slide' ).index(); items = [];
if ( $slides.length > 0 ) { if ( $slides.length > 0 ) {
$slides.each( function( i, el ) { $slides.each( function( i, el ) {
var img = $( el ).find( 'img' ), var img = $( el ).find( 'img' ),
large_image_src = img.attr( 'data-large-image' ), large_image_src = img.data( 'large_image' ),
large_image_w = img.attr( 'data-large-image-width' ), large_image_w = img.data( 'large_image_width' ),
large_image_h = img.attr( 'data-large-image-height' ), large_image_h = img.data( 'large_image_height' ),
item = { item = {
src: large_image_src, src: large_image_src,
w: large_image_w, w: large_image_w,
@ -190,10 +208,7 @@ jQuery( function( $ ) {
} ); } );
} }
return { return items;
index: index,
items: items
};
}; };
/** /**
@ -201,16 +216,15 @@ jQuery( function( $ ) {
*/ */
this.init_photoswipe = function() { this.init_photoswipe = function() {
if ( typeof PhotoSwipe === 'undefined' || ! wc_single_product_params.photoswipe_enabled ) { if ( ! this.photoswipe_enabled ) {
return; return;
} }
if ( wc_single_product_params.zoom_enabled ) { if ( this.zoom_enabled && this.$images.length > 0 ) {
if ( $el.hasClass( 'woocommerce-product-gallery--with-images' ) ) { $el.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' );
$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__trigger', { gallery: this }, this.trigger_photoswipe );
} }
$el.on( 'click', '.woocommerce-product-gallery__image a', { gallery: this }, this.trigger_photoswipe ); $el.on( 'click', '.woocommerce-product-gallery__image a', { gallery: this }, this.trigger_photoswipe );
}; };
@ -227,7 +241,7 @@ jQuery( function( $ ) {
clicked; clicked;
if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) { if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) {
clicked = e.target.closest( 'figure' ); clicked = e.target.closest( '.woocommerce-product-gallery__image' );
} else { } else {
clicked = e.data.gallery.$el.find( '.flex-active-slide' ); clicked = e.data.gallery.$el.find( '.flex-active-slide' );
} }
@ -242,7 +256,7 @@ jQuery( function( $ ) {
}; };
// Initializes and opens PhotoSwipe. // Initializes and opens PhotoSwipe.
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items.items, options ); var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options );
gallery.init(); gallery.init();
}; };
@ -252,8 +266,8 @@ jQuery( function( $ ) {
/** /**
* Function to call wc_product_gallery on jquery selector. * Function to call wc_product_gallery on jquery selector.
*/ */
$.fn.wc_product_gallery = function() { $.fn.wc_product_gallery = function( args ) {
new Product_Gallery( this ); new Product_Gallery( this, args );
return this; return this;
}; };
@ -261,7 +275,7 @@ jQuery( function( $ ) {
* Initialize all galleries on page. * Initialize all galleries on page.
*/ */
$( '.woocommerce-product-gallery' ).each( function() { $( '.woocommerce-product-gallery' ).each( function() {
$( this ).wc_product_gallery( this ); $( this ).wc_product_gallery();
} ); } );
} ); } );

8
templates/single-product/product-image.php
View File

@ -38,10 +38,10 @@ $wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_cl
<figure class="woocommerce-product-gallery__wrapper"> <figure class="woocommerce-product-gallery__wrapper">
<?php <?php
$attributes = array( $attributes = array(
'title' => $image_title, 'title' => $image_title,
'data-large-image' => $full_size_image[0], 'data-large_image' => $full_size_image[0],
'data-large-image-width' => $full_size_image[1], 'data-large_image_width' => $full_size_image[1],
'data-large-image-height' => $full_size_image[2], 'data-large_image_height' => $full_size_image[2],
); );
if ( has_post_thumbnail() ) { if ( has_post_thumbnail() ) {

6
templates/single-product/product-thumbnails.php
View File

@ -33,9 +33,9 @@ if ( $attachment_ids && has_post_thumbnail() ) {
$attributes = array( $attributes = array(
'title' => $image_title, 'title' => $image_title,
'data-large-image' => $full_size_image[0], 'data-large_image' => $full_size_image[0],
'data-large-image-width' => $full_size_image[1], 'data-large_image_width' => $full_size_image[1],
'data-large-image-height' => $full_size_image[2], 'data-large_image_height' => $full_size_image[2],
); );
$html = '<figure data-thumb="' . esc_url( $thumbnail[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '">'; $html = '<figure data-thumb="' . esc_url( $thumbnail[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '">';