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.$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;
@ -22,10 +21,10 @@
this.$attributeFields.unbind( 'change ' );
// Methods.
this.getChosenAttributes = this.getChosenAttributes.bind( this );
this.getChosenAttributes = this.getChosenAttributes.bind( this );
this.findMatchingVariations = this.findMatchingVariations.bind( this );
this.isMatch = this.isMatch.bind( this );
this.toggleResetLink = this.toggleResetLink.bind( this );
this.isMatch = this.isMatch.bind( this );
this.toggleResetLink = this.toggleResetLink.bind( this );
// Events.
$form.on( 'click', '.reset_variations', { variationForm: this }, this.onReset );
@ -530,7 +529,7 @@
$.fn.wc_maybe_trigger_slide_position_reset = function( variation ) {
var $form = $( this ),
$product = $form.closest( '.product' ),
$product_gallery = $product.find( '.woocommerce-product-gallery' ),
$product_gallery = $product.find( '.images' ),
reset_slide_position = false,
new_image_id = ( variation && variation.image_id ) ? variation.image_id : '';
@ -551,10 +550,9 @@
$.fn.wc_variations_image_update = function( variation ) {
var $form = this,
$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_wrapper = $product.find( '.woocommerce-product-gallery__wrapper ' ),
$product_img_wrap = $gallery_wrapper.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ),
$product_img_wrap = $product_gallery.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ),
$product_img = $product_img_wrap.find( '.wp-post-image' );
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( 'title', variation.image.title );
$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-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', 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_height', variation.image.full_src_h );
$product_img_wrap.wc_set_variation_attr( 'data-thumb', variation.image.src );
$gallery_img.wc_set_variation_attr( 'src', variation.image.src );
} else {
@ -578,11 +576,10 @@
$product_img.wc_reset_variation_attr( 'sizes' );
$product_img.wc_reset_variation_attr( 'title' );
$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-width' );
$product_img.wc_reset_variation_attr( 'data-large-image-height' );
$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_height' );
$product_img_wrap.wc_reset_variation_attr( 'data-thumb' );
$product_img.wc_reset_variation_attr( 'large-image' );
$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.
*/
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.
@ -92,7 +110,7 @@ jQuery( function( $ ) {
*/
this.init_flexslider = function() {
if ( ! $.isFunction( $.fn.flexslider ) || ! wc_single_product_params.flexslider_enabled ) {
if ( ! this.flexslider_enabled ) {
return;
}
@ -106,10 +124,10 @@ jQuery( function( $ ) {
animationSpeed: wc_single_product_params.flexslider.animationSpeed,
animationLoop: wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true.
start: function() {
var $images = $( '.woocommerce-product-gallery__image' );
var largest_height = 0;
$images.each( function() {
gallery.$images.each( function() {
var height = $( this ).height();
if ( height > largest_height ) {
@ -117,7 +135,7 @@ jQuery( function( $ ) {
}
} );
$images.each( function() {
gallery.$images.each( function() {
$( this ).css( 'min-height', largest_height );
} );
}
@ -133,11 +151,11 @@ jQuery( function( $ ) {
*/
this.init_zoom = function() {
if ( ! $.isFunction( $.fn.zoom ) || ! wc_single_product_params.zoom_enabled ) {
if ( ! gallery.zoom_enabled ) {
return;
}
var zoom_target = $( '.woocommerce-product-gallery__image', $el ),
var zoom_target = gallery.$images,
enable_zoom = false;
if ( ! wc_single_product_params.flexslider_enabled ) {
@ -156,7 +174,7 @@ jQuery( function( $ ) {
// But only zoom if the img is larger than its container.
if ( enable_zoom ) {
zoom_target.trigger( 'zoom.destroy' );
zoom_target.zoom({
zoom_target.zoom( {
touch: false
} );
}
@ -170,16 +188,16 @@ jQuery( function( $ ) {
* Get product gallery image items.
*/
this.get_gallery_items = function() {
var $slides = $( '.woocommerce-product-gallery__wrapper', $el ).children(),
items = [],
index = $slides.filter( '.' + 'flex-active-slide' ).index();
var $slides = this.$images,
items = [];
if ( $slides.length > 0 ) {
$slides.each( function( i, el ) {
var img = $( el ).find( 'img' ),
large_image_src = img.attr( 'data-large-image' ),
large_image_w = img.attr( 'data-large-image-width' ),
large_image_h = img.attr( 'data-large-image-height' ),
large_image_src = img.data( 'large_image' ),
large_image_w = img.data( 'large_image_width' ),
large_image_h = img.data( 'large_image_height' ),
item = {
src: large_image_src,
w: large_image_w,
@ -190,10 +208,7 @@ jQuery( function( $ ) {
} );
}
return {
index: index,
items: items
};
return items;
};
/**
@ -201,16 +216,15 @@ jQuery( function( $ ) {
*/
this.init_photoswipe = function() {
if ( typeof PhotoSwipe === 'undefined' || ! wc_single_product_params.photoswipe_enabled ) {
if ( ! this.photoswipe_enabled ) {
return;
}
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>' );
}
if ( this.zoom_enabled && this.$images.length > 0 ) {
$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 );
};
@ -227,7 +241,7 @@ jQuery( function( $ ) {
clicked;
if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) {
clicked = e.target.closest( 'figure' );
clicked = e.target.closest( '.woocommerce-product-gallery__image' );
} else {
clicked = e.data.gallery.$el.find( '.flex-active-slide' );
}
@ -242,7 +256,7 @@ jQuery( function( $ ) {
};
// 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();
};
@ -252,8 +266,8 @@ jQuery( function( $ ) {
/**
* Function to call wc_product_gallery on jquery selector.
*/
$.fn.wc_product_gallery = function() {
new Product_Gallery( this );
$.fn.wc_product_gallery = function( args ) {
new Product_Gallery( this, args );
return this;
};
@ -261,7 +275,7 @@ jQuery( function( $ ) {
* Initialize all galleries on page.
*/
$( '.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">
<?php
$attributes = array(
'title' => $image_title,
'data-large-image' => $full_size_image[0],
'data-large-image-width' => $full_size_image[1],
'data-large-image-height' => $full_size_image[2],
'title' => $image_title,
'data-large_image' => $full_size_image[0],
'data-large_image_width' => $full_size_image[1],
'data-large_image_height' => $full_size_image[2],
);
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(
'title' => $image_title,
'data-large-image' => $full_size_image[0],
'data-large-image-width' => $full_size_image[1],
'data-large-image-height' => $full_size_image[2],
'data-large_image' => $full_size_image[0],
'data-large_image_width' => $full_size_image[1],
'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] ) . '">';