add-payment-method.js
3 years ago
add-payment-method.min.js
2 years ago
add-to-cart-variation.js
3 years ago
add-to-cart-variation.min.js
2 years ago
add-to-cart.js
2 years ago
add-to-cart.min.js
2 years ago
address-i18n.js
5 years ago
address-i18n.min.js
2 years ago
cart-fragments.js
3 years ago
cart-fragments.min.js
2 years ago
cart.js
2 years ago
cart.min.js
2 years ago
checkout.js
2 years ago
checkout.min.js
2 years ago
country-select.js
5 years ago
country-select.min.js
2 years ago
credit-card-form.js
8 years ago
credit-card-form.min.js
8 years ago
geolocation.js
2 years ago
geolocation.min.js
2 years ago
lost-password.js
8 years ago
lost-password.min.js
8 years ago
order-attribution.js
2 years ago
order-attribution.min.js
2 years ago
password-strength-meter.js
2 years ago
password-strength-meter.min.js
2 years ago
price-slider.js
5 years ago
price-slider.min.js
2 years ago
single-product.js
3 years ago
single-product.min.js
2 years ago
tokenization-form.js
5 years ago
tokenization-form.min.js
2 years ago
woocommerce.js
3 years ago
woocommerce.min.js
2 years ago
wp-consent-api-integration.js
2 years ago
wp-consent-api-integration.min.js
2 years ago
single-product.js
347 lines
| 1 | /*global wc_single_product_params, PhotoSwipe, PhotoSwipeUI_Default */ |
| 2 | jQuery( function( $ ) { |
| 3 | |
| 4 | // wc_single_product_params is required to continue. |
| 5 | if ( typeof wc_single_product_params === 'undefined' ) { |
| 6 | return false; |
| 7 | } |
| 8 | |
| 9 | $( 'body' ) |
| 10 | // Tabs |
| 11 | .on( 'init', '.wc-tabs-wrapper, .woocommerce-tabs', function() { |
| 12 | $( this ).find( '.wc-tab, .woocommerce-tabs .panel:not(.panel .panel)' ).hide(); |
| 13 | |
| 14 | var hash = window.location.hash; |
| 15 | var url = window.location.href; |
| 16 | var $tabs = $( this ).find( '.wc-tabs, ul.tabs' ).first(); |
| 17 | |
| 18 | if ( hash.toLowerCase().indexOf( 'comment-' ) >= 0 || hash === '#reviews' || hash === '#tab-reviews' ) { |
| 19 | $tabs.find( 'li.reviews_tab a' ).trigger( 'click' ); |
| 20 | } else if ( url.indexOf( 'comment-page-' ) > 0 || url.indexOf( 'cpage=' ) > 0 ) { |
| 21 | $tabs.find( 'li.reviews_tab a' ).trigger( 'click' ); |
| 22 | } else if ( hash === '#tab-additional_information' ) { |
| 23 | $tabs.find( 'li.additional_information_tab a' ).trigger( 'click' ); |
| 24 | } else { |
| 25 | $tabs.find( 'li:first a' ).trigger( 'click' ); |
| 26 | } |
| 27 | } ) |
| 28 | .on( 'click', '.wc-tabs li a, ul.tabs li a', function( e ) { |
| 29 | e.preventDefault(); |
| 30 | var $tab = $( this ); |
| 31 | var $tabs_wrapper = $tab.closest( '.wc-tabs-wrapper, .woocommerce-tabs' ); |
| 32 | var $tabs = $tabs_wrapper.find( '.wc-tabs, ul.tabs' ); |
| 33 | |
| 34 | $tabs.find( 'li' ).removeClass( 'active' ); |
| 35 | $tabs_wrapper.find( '.wc-tab, .panel:not(.panel .panel)' ).hide(); |
| 36 | |
| 37 | $tab.closest( 'li' ).addClass( 'active' ); |
| 38 | $tabs_wrapper.find( '#' + $tab.attr( 'href' ).split( '#' )[1] ).show(); |
| 39 | } ) |
| 40 | // Review link |
| 41 | .on( 'click', 'a.woocommerce-review-link', function() { |
| 42 | $( '.reviews_tab a' ).trigger( 'click' ); |
| 43 | return true; |
| 44 | } ) |
| 45 | // Star ratings for comments |
| 46 | .on( 'init', '#rating', function() { |
| 47 | $( '#rating' ) |
| 48 | .hide() |
| 49 | .before( |
| 50 | '<p class="stars">\ |
| 51 | <span>\ |
| 52 | <a class="star-1" href="#">1</a>\ |
| 53 | <a class="star-2" href="#">2</a>\ |
| 54 | <a class="star-3" href="#">3</a>\ |
| 55 | <a class="star-4" href="#">4</a>\ |
| 56 | <a class="star-5" href="#">5</a>\ |
| 57 | </span>\ |
| 58 | </p>' |
| 59 | ); |
| 60 | } ) |
| 61 | .on( 'click', '#respond p.stars a', function() { |
| 62 | var $star = $( this ), |
| 63 | $rating = $( this ).closest( '#respond' ).find( '#rating' ), |
| 64 | $container = $( this ).closest( '.stars' ); |
| 65 | |
| 66 | $rating.val( $star.text() ); |
| 67 | $star.siblings( 'a' ).removeClass( 'active' ); |
| 68 | $star.addClass( 'active' ); |
| 69 | $container.addClass( 'selected' ); |
| 70 | |
| 71 | return false; |
| 72 | } ) |
| 73 | .on( 'click', '#respond #submit', function() { |
| 74 | var $rating = $( this ).closest( '#respond' ).find( '#rating' ), |
| 75 | rating = $rating.val(); |
| 76 | |
| 77 | if ( $rating.length > 0 && ! rating && wc_single_product_params.review_rating_required === 'yes' ) { |
| 78 | window.alert( wc_single_product_params.i18n_required_rating_text ); |
| 79 | |
| 80 | return false; |
| 81 | } |
| 82 | } ); |
| 83 | |
| 84 | // Init Tabs and Star Ratings |
| 85 | $( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' ); |
| 86 | |
| 87 | /** |
| 88 | * Product gallery class. |
| 89 | */ |
| 90 | var ProductGallery = function( $target, args ) { |
| 91 | this.$target = $target; |
| 92 | this.$images = $( '.woocommerce-product-gallery__image', $target ); |
| 93 | |
| 94 | // No images? Abort. |
| 95 | if ( 0 === this.$images.length ) { |
| 96 | this.$target.css( 'opacity', 1 ); |
| 97 | return; |
| 98 | } |
| 99 | |
| 100 | // Make this object available. |
| 101 | $target.data( 'product_gallery', this ); |
| 102 | |
| 103 | // Pick functionality to initialize... |
| 104 | this.flexslider_enabled = 'function' === typeof $.fn.flexslider && wc_single_product_params.flexslider_enabled; |
| 105 | this.zoom_enabled = 'function' === typeof $.fn.zoom && wc_single_product_params.zoom_enabled; |
| 106 | this.photoswipe_enabled = typeof PhotoSwipe !== 'undefined' && wc_single_product_params.photoswipe_enabled; |
| 107 | |
| 108 | // ...also taking args into account. |
| 109 | if ( args ) { |
| 110 | this.flexslider_enabled = false === args.flexslider_enabled ? false : this.flexslider_enabled; |
| 111 | this.zoom_enabled = false === args.zoom_enabled ? false : this.zoom_enabled; |
| 112 | this.photoswipe_enabled = false === args.photoswipe_enabled ? false : this.photoswipe_enabled; |
| 113 | } |
| 114 | |
| 115 | // ...and what is in the gallery. |
| 116 | if ( 1 === this.$images.length ) { |
| 117 | this.flexslider_enabled = false; |
| 118 | } |
| 119 | |
| 120 | // Bind functions to this. |
| 121 | this.initFlexslider = this.initFlexslider.bind( this ); |
| 122 | this.initZoom = this.initZoom.bind( this ); |
| 123 | this.initZoomForTarget = this.initZoomForTarget.bind( this ); |
| 124 | this.initPhotoswipe = this.initPhotoswipe.bind( this ); |
| 125 | this.onResetSlidePosition = this.onResetSlidePosition.bind( this ); |
| 126 | this.getGalleryItems = this.getGalleryItems.bind( this ); |
| 127 | this.openPhotoswipe = this.openPhotoswipe.bind( this ); |
| 128 | |
| 129 | if ( this.flexslider_enabled ) { |
| 130 | this.initFlexslider( args.flexslider ); |
| 131 | $target.on( 'woocommerce_gallery_reset_slide_position', this.onResetSlidePosition ); |
| 132 | } else { |
| 133 | this.$target.css( 'opacity', 1 ); |
| 134 | } |
| 135 | |
| 136 | if ( this.zoom_enabled ) { |
| 137 | this.initZoom(); |
| 138 | $target.on( 'woocommerce_gallery_init_zoom', this.initZoom ); |
| 139 | } |
| 140 | |
| 141 | if ( this.photoswipe_enabled ) { |
| 142 | this.initPhotoswipe(); |
| 143 | } |
| 144 | }; |
| 145 | |
| 146 | /** |
| 147 | * Initialize flexSlider. |
| 148 | */ |
| 149 | ProductGallery.prototype.initFlexslider = function( args ) { |
| 150 | var $target = this.$target, |
| 151 | gallery = this; |
| 152 | |
| 153 | var options = $.extend( { |
| 154 | selector: '.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image', |
| 155 | start: function() { |
| 156 | $target.css( 'opacity', 1 ); |
| 157 | }, |
| 158 | after: function( slider ) { |
| 159 | gallery.initZoomForTarget( gallery.$images.eq( slider.currentSlide ) ); |
| 160 | } |
| 161 | }, args ); |
| 162 | |
| 163 | $target.flexslider( options ); |
| 164 | |
| 165 | // Trigger resize after main image loads to ensure correct gallery size. |
| 166 | $( '.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:eq(0) .wp-post-image' ).one( 'load', function() { |
| 167 | var $image = $( this ); |
| 168 | |
| 169 | if ( $image ) { |
| 170 | setTimeout( function() { |
| 171 | var setHeight = $image.closest( '.woocommerce-product-gallery__image' ).height(); |
| 172 | var $viewport = $image.closest( '.flex-viewport' ); |
| 173 | |
| 174 | if ( setHeight && $viewport ) { |
| 175 | $viewport.height( setHeight ); |
| 176 | } |
| 177 | }, 100 ); |
| 178 | } |
| 179 | } ).each( function() { |
| 180 | if ( this.complete ) { |
| 181 | $( this ).trigger( 'load' ); |
| 182 | } |
| 183 | } ); |
| 184 | }; |
| 185 | |
| 186 | /** |
| 187 | * Init zoom. |
| 188 | */ |
| 189 | ProductGallery.prototype.initZoom = function() { |
| 190 | this.initZoomForTarget( this.$images.first() ); |
| 191 | }; |
| 192 | |
| 193 | /** |
| 194 | * Init zoom. |
| 195 | */ |
| 196 | ProductGallery.prototype.initZoomForTarget = function( zoomTarget ) { |
| 197 | if ( ! this.zoom_enabled ) { |
| 198 | return false; |
| 199 | } |
| 200 | |
| 201 | var galleryWidth = this.$target.width(), |
| 202 | zoomEnabled = false; |
| 203 | |
| 204 | $( zoomTarget ).each( function( index, target ) { |
| 205 | var image = $( target ).find( 'img' ); |
| 206 | |
| 207 | if ( image.data( 'large_image_width' ) > galleryWidth ) { |
| 208 | zoomEnabled = true; |
| 209 | return false; |
| 210 | } |
| 211 | } ); |
| 212 | |
| 213 | // But only zoom if the img is larger than its container. |
| 214 | if ( zoomEnabled ) { |
| 215 | var zoom_options = $.extend( { |
| 216 | touch: false |
| 217 | }, wc_single_product_params.zoom_options ); |
| 218 | |
| 219 | if ( 'ontouchstart' in document.documentElement ) { |
| 220 | zoom_options.on = 'click'; |
| 221 | } |
| 222 | |
| 223 | zoomTarget.trigger( 'zoom.destroy' ); |
| 224 | zoomTarget.zoom( zoom_options ); |
| 225 | |
| 226 | setTimeout( function() { |
| 227 | if ( zoomTarget.find(':hover').length ) { |
| 228 | zoomTarget.trigger( 'mouseover' ); |
| 229 | } |
| 230 | }, 100 ); |
| 231 | } |
| 232 | }; |
| 233 | |
| 234 | /** |
| 235 | * Init PhotoSwipe. |
| 236 | */ |
| 237 | ProductGallery.prototype.initPhotoswipe = function() { |
| 238 | if ( this.zoom_enabled && this.$images.length > 0 ) { |
| 239 | this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' ); |
| 240 | this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe ); |
| 241 | this.$target.on( 'click', '.woocommerce-product-gallery__image a', function( e ) { |
| 242 | e.preventDefault(); |
| 243 | }); |
| 244 | |
| 245 | // If flexslider is disabled, gallery images also need to trigger photoswipe on click. |
| 246 | if ( ! this.flexslider_enabled ) { |
| 247 | this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe ); |
| 248 | } |
| 249 | } else { |
| 250 | this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe ); |
| 251 | } |
| 252 | }; |
| 253 | |
| 254 | /** |
| 255 | * Reset slide position to 0. |
| 256 | */ |
| 257 | ProductGallery.prototype.onResetSlidePosition = function() { |
| 258 | this.$target.flexslider( 0 ); |
| 259 | }; |
| 260 | |
| 261 | /** |
| 262 | * Get product gallery image items. |
| 263 | */ |
| 264 | ProductGallery.prototype.getGalleryItems = function() { |
| 265 | var $slides = this.$images, |
| 266 | items = []; |
| 267 | |
| 268 | if ( $slides.length > 0 ) { |
| 269 | $slides.each( function( i, el ) { |
| 270 | var img = $( el ).find( 'img' ); |
| 271 | |
| 272 | if ( img.length ) { |
| 273 | var large_image_src = img.attr( 'data-large_image' ), |
| 274 | large_image_w = img.attr( 'data-large_image_width' ), |
| 275 | large_image_h = img.attr( 'data-large_image_height' ), |
| 276 | alt = img.attr( 'alt' ), |
| 277 | item = { |
| 278 | alt : alt, |
| 279 | src : large_image_src, |
| 280 | w : large_image_w, |
| 281 | h : large_image_h, |
| 282 | title: img.attr( 'data-caption' ) ? img.attr( 'data-caption' ) : img.attr( 'title' ) |
| 283 | }; |
| 284 | items.push( item ); |
| 285 | } |
| 286 | } ); |
| 287 | } |
| 288 | |
| 289 | return items; |
| 290 | }; |
| 291 | |
| 292 | /** |
| 293 | * Open photoswipe modal. |
| 294 | */ |
| 295 | ProductGallery.prototype.openPhotoswipe = function( e ) { |
| 296 | e.preventDefault(); |
| 297 | |
| 298 | var pswpElement = $( '.pswp' )[0], |
| 299 | items = this.getGalleryItems(), |
| 300 | eventTarget = $( e.target ), |
| 301 | clicked; |
| 302 | |
| 303 | if ( 0 < eventTarget.closest( '.woocommerce-product-gallery__trigger' ).length ) { |
| 304 | clicked = this.$target.find( '.flex-active-slide' ); |
| 305 | } else { |
| 306 | clicked = eventTarget.closest( '.woocommerce-product-gallery__image' ); |
| 307 | } |
| 308 | |
| 309 | var options = $.extend( { |
| 310 | index: $( clicked ).index(), |
| 311 | addCaptionHTMLFn: function( item, captionEl ) { |
| 312 | if ( ! item.title ) { |
| 313 | captionEl.children[0].textContent = ''; |
| 314 | return false; |
| 315 | } |
| 316 | captionEl.children[0].textContent = item.title; |
| 317 | return true; |
| 318 | } |
| 319 | }, wc_single_product_params.photoswipe_options ); |
| 320 | |
| 321 | // Initializes and opens PhotoSwipe. |
| 322 | var photoswipe = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options ); |
| 323 | photoswipe.init(); |
| 324 | }; |
| 325 | |
| 326 | /** |
| 327 | * Function to call wc_product_gallery on jquery selector. |
| 328 | */ |
| 329 | $.fn.wc_product_gallery = function( args ) { |
| 330 | new ProductGallery( this, args || wc_single_product_params ); |
| 331 | return this; |
| 332 | }; |
| 333 | |
| 334 | /* |
| 335 | * Initialize all galleries on page. |
| 336 | */ |
| 337 | $( '.woocommerce-product-gallery' ).each( function() { |
| 338 | |
| 339 | $( this ).trigger( 'wc-product-gallery-before-init', [ this, wc_single_product_params ] ); |
| 340 | |
| 341 | $( this ).wc_product_gallery( wc_single_product_params ); |
| 342 | |
| 343 | $( this ).trigger( 'wc-product-gallery-after-init', [ this, wc_single_product_params ] ); |
| 344 | |
| 345 | } ); |
| 346 | } ); |
| 347 |