Home Forums Themes Support Gecko Help!

This topic contains 21 replies, has 2 voices, and was last updated by  Harry 2 days, 12 hours ago.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #27887

    Hi, I have inquired you previously in the comment section about the following:

    2. Also, is it possible to make the product details layout in the product pages ( http://i64.tinypic.com/3025thy.png ) to be exactly the same as the layout in the ‘Quickview’ ( http://i66.tinypic.com/33yi0pw.png )? I prefer the multiple product images to be displayed with dots as shown in the ‘Quickview’ instead of with the images itself as shown in the current product pages. How can I achieve this?

    I have tried out your solution and it has been working well!

    However, now that I realised after adding variations to products, the variation product image gallery became appeared with images style instead of slick dots style.

    May I ask is it possible to also change the variation product image gallery to be displayed with slick dots, similar to the layout shown in the ‘Quickview’ function?

    Thank you!

    #27888

    Hi,

    Please add below code to gecko-child > functions.php

    add_action( 'wp_head', 'remove_gallery_thumbnail' );
    function remove_gallery_thumbnail(){
    	remove_action( 'wp_footer', 'jas_gecko_wcvs_modify_images', 1000 );
    }
    
    if ( class_exists( 'WPA_WCVS' ) && class_exists( 'WooCommerce' ) && ! class_exists( 'ColorSwatch' ) ) {
    	/**
    	 * Change the HTML when click to color swatch.
    	 *
    	 * @since 1.0.0
    	 */
    	function jas_gecko_child_wcvs_modify_images() {
    		global $post, $product;
    		// Get image zoom
    		$zoom = '';
    		if ( cs_get_option( 'wc-single-zoom' ) ) {
    			$zoom = ' jas-image-zoom';
    		}
    		?>
    			<script>
    				(function( $ ) {
    					"use strict";
    					
    					$( document.body ).off( 'wpa_wcvs_update_html' ).bind( 'wpa_wcvs_update_html', function( event, data ) {
    						var productId     = data.pid,
    							galleries     = $( '.variations_form' ).data( 'galleries' ),
    							formData      = $( '.variations_form' ).data( 'product_variations' ),
    							galleryKey    = '',
    							selectedAttr  = {},
    							usedImages    = [],
    							output_gal    = [],
    							output_thumb  = [],
    							images;
    
    						// Get selected size and color
    						$( '#product-' + productId + ' .swatch select' ).each(function () {
    							if ( $( this ).parent().parent().hasClass( 'is-color' ) ) {
    								galleryKey = '_product_image_gallery_' + $( this ).data( 'attribute_name' ).replace( 'attribute_', '' ) + '-' + $( this ).val();
    							}
    							selectedAttr[$( this ).data( 'attribute_name' ).replace( 'attribute_', '' )] = $( this ).val();
    						});
    
    						if ( typeof( galleries[galleryKey] ) !== 'undefined' && galleries[galleryKey] !== null ) {
    							images = galleries[galleryKey];
    							// Get image gallery
        						$.each( images, function ( index, image ) {
        							if ( image['single'] == undefined ) {
        								var img_single = image['thumbnail'];
        							} else {
        								var img_single = image['single']; 
        							}
        
        							if ( $.inArray( img_single, usedImages ) === -1 ) {
        								output_gal += '<div class="p-item woocommerce-product-gallery__image<?php echo $zoom; ?>">';
        								output_gal += '<a href="' + image['data-large_image'] + '">';
        								output_gal += '<img width="' + image['data-large_image_width'] + '" height="' + image['data-large_image_height'] + '" src="' + img_single + '" class="attachment-shop_single size-shop_single" alt="" title="" data-src="' + image['data-src'] + '" data-large_image="' + image['data-large_image'] + '" data-large_image_width="' + image['data-large_image_width'] + '" data-large_image_height="' + image['data-large_image_height'] + '"/>';
        								output_gal += '</a></div>';
        
        								//output_thumb += '<div>';
        								//output_thumb += '<img src="' + image['thumbnail'] + '" />';
        								//output_thumb += '</div>';
        
        								usedImages.push( img_single );
        							}
        						});
    						} else {
    							images = galleries['default_gallery'];
    							
    							// Get variation image
        						$.each( formData, function ( index, variation ) {
        							if ( Object.keys( variation['attributes']).length === Object.keys( selectedAttr ).length ) {
        								// Flag to check right or wrong variation
        								var chooseThisVariation = true;
        
        								$.each( selectedAttr, function ( attrName, attrValue ) {
        									if ( variation['attributes']['attribute_' + attrName + ''] !== '' && variation['attributes']['attribute_' + attrName + ''] !== attrValue) {
        										chooseThisVariation = false;
        									}
        								});
        
        								if ( chooseThisVariation ) {
        									var image = variation['image'];
        
        									if ( $.inArray( image['thumb_src'], usedImages ) === -1 ) {
        										output_gal += '<div class="p-item woocommerce-product-gallery__image<?php echo $zoom; ?>">';
        										output_gal += '<a href="' + image['full_src'] + '">';
        										output_gal += '<img width="' + image['src_w'] + '" height="' + image['src_h'] + '" src="' + image['src'] + '" class="attachment-shop_single size-shop_single" alt="" title="" data-src="' + image['full_src'] + '" data-large_image="' + image['full_src'] + '" data-large_image_width="' + image['full_src_w'] + '" data-large_image_height="' + image['full_src_h'] + '" />';
        										output_gal += '</a></div>';
        
        										//output_thumb += '<div>';
        										//output_thumb += '<img src="' + image['thumb_src'] + '" />';
        										//output_thumb += '</div>';
        
        										//usedImages.push( image['thumb_src'] );
        										return true;
        									}
        								}
        							}
        						});
    						}
    
    						if ( $( '.jas-wc-single' ).is( '.wc-single-1, .wc-single-3' ) || window._inQuickview ) {
    							var data_slick = '{"slidesToShow": 1,"slidesToScroll": 1,"asNavFor": ".p-nav","fade":true, "dots": true ,"adaptiveHeight":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}';
    						} else if ( $( '.jas-wc-single' ).is( '.wc-single-2' ) ) {
    							var data_slick = '{"slidesToShow": 3,"slidesToScroll": 1,"centerMode":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>, "responsive":[{"breakpoint": 960,"settings":{"slidesToShow": 2, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}},{"breakpoint": 480,"settings":{"slidesToShow": 1, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}}]}';
    						}
    
    						var output = '<div class="p-thumb images jas-carousel" data-slick=\'' + data_slick + '\'>' + output_gal + '</div>';
    
    						if ( $( '.jas-wc-single' ).hasClass( 'wc-single-1' ) ) {
    							output += '<div class="p-nav oh jas-carousel" data-slick=\'{"slidesToShow": 4,"slidesToScroll": 1,"asNavFor": ".p-thumb","arrows": false, "focusOnSelect": true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}\'>' + output_thumb + '</div>';
    						}
    
    						$( '#product-' + productId + ' .single-product-thumbnail' ).html( output );
    
    						setTimeout(function() {
    							$( '.jas-carousel' ).not( '.slick-initialized' ).slick();
    
    							if ( $( '.jas-image-zoom' ).length > 0 ) {
    								$( '.jas-image-zoom' ).zoom({
    									touch: false,
    								});
    							}
    
    							// Reset the index of image on product variation
    							$( 'body' ).on( 'found_variation', '.variations_form', function( ev, variation ) {
    								if ( variation && variation.image && variation.image.src && variation.image.src.length > 1 ) {
    									$( '.jas-carousel' ).slick( 'slickGoTo', 0 );
    								}
    							});
    						}, 10);
    
    						// Trigger gallery
    						if ( $( '.woocommerce-product-gallery' ).length > 0 && ! window._inQuickview ) {
    							$( '.woocommerce-product-gallery' ).each( function () {
    								$( this ).wc_product_gallery();
    							});
    							$( 'body' ).on( 'click', '.pswp__container, .pswp__button--close', function() {
    								$( '.pswp' ).removeAttr( 'class' ).addClass( 'pswp' );
    							});
    						}
    
    						<?php if ( isset( $options ) && ! empty( $options['wc-single-video-upload'] ) || ! empty( $options['wc-single-video-url'] ) ) : ?>
    							output += '<div class="p-video pa">';
    								<?php if ( $options['wc-single-video'] == 'url' ) { ?>
    									output += '<a href="<?php echo esc_url( $options['wc-single-video-url'] ); ?>" class="br__50 tc db bghp jas-popup-url"><i class="pe-7s-play pr"></i></a>';
    								<?php } else { ?>
    									output += '<a href="#jas-vsh" class="br__50 tc db bghp jas-popup-mp4"><i class="pe-7s-play pr"></i></a>';
    									output += '<div id="jas-vsh" class="mfp-hide"><?php do_shortcode( '"' ) . '" width="640" height="320"]' ); ?></div>';
    								<?php } ?>
    							output +=  '</div>';
    						<?php endif; ?>
    					});
    				})( jQuery );
    			</script>
    		<?php
    	}
    	add_action( 'wp_footer', 'jas_gecko_child_wcvs_modify_images', 1000 );
    }

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #27889

    Hi, thank you so much!

    However, I can’t test if the above code works well as I just realised my variation product image gallery is not showing up! Oh no! When I pick on a certain variation, the variation product image showed up but not the variation product image gallery!

    Do you know what is the issue here?

     

    #27890

    Oh ! I figured it out ! The variation product image gallery will only show up when I pick all of the variation options!

    By the way, the code above works well!

    Thank you so much! 🙂

    #27892

    Hi, but I have been experiencing some minor problems here and there with the product variations.

    As I only need the variations option function for customers to select and not necessary need the variation product image and variation product image gallery functions, is it possible to have the product image and product image gallery (before choosing variations options as shown here: https://ibb.co/TPTTmyN ) remains unchanged throughout even after any variations options are selected?

    Best regards.

     

    #27893

    In addition, can I ask, if the video play button shown here ( https://ibb.co/TPTTmyN ) can be changed to the View Video button shown here ( https://ibb.co/Lgk2Rm6 ) ?

    Kind regards.

    #27896

    QUOTE: #27892 –> Hi, I have solved it myself! Thank you!

    You may want to put your attention on QUOTE: #27893 instead. Thank you!

    Kind regards.

    #27897

    Hi,

    Please change code to

    add_action( 'wp_head', 'remove_gallery_thumbnail' );
    function remove_gallery_thumbnail(){
    	remove_action( 'wp_footer', 'jas_gecko_wcvs_modify_images', 1000 );
    }
    
    if ( class_exists( 'WPA_WCVS' ) && class_exists( 'WooCommerce' ) && ! class_exists( 'ColorSwatch' ) ) {
    	/**
    	 * Change the HTML when click to color swatch.
    	 *
    	 * @since 1.0.0
    	 */
    	function jas_gecko_child_wcvs_modify_images() {
    		global $post, $product;
    		// Get image zoom
    		$zoom = '';
    		if ( cs_get_option( 'wc-single-zoom' ) ) {
    			$zoom = ' jas-image-zoom';
    		}
    		?>
    			<script>
    				(function( $ ) {
    					"use strict";
    					
    					$( document.body ).off( 'wpa_wcvs_update_html' ).bind( 'wpa_wcvs_update_html', function( event, data ) {
    						var productId     = data.pid,
    							galleries     = $( '.variations_form' ).data( 'galleries' ),
    							formData      = $( '.variations_form' ).data( 'product_variations' ),
    							galleryKey    = '',
    							selectedAttr  = {},
    							usedImages    = [],
    							output_gal    = [],
    							output_thumb  = [],
    							images;
    
    						// Get selected size and color
    						$( '#product-' + productId + ' .swatch select' ).each(function () {
    							if ( $( this ).parent().parent().hasClass( 'is-color' ) ) {
    								galleryKey = '_product_image_gallery_' + $( this ).data( 'attribute_name' ).replace( 'attribute_', '' ) + '-' + $( this ).val();
    							}
    							selectedAttr[$( this ).data( 'attribute_name' ).replace( 'attribute_', '' )] = $( this ).val();
    						});
    
    						if ( typeof( galleries[galleryKey] ) !== 'undefined' && galleries[galleryKey] !== null ) {
    							images = galleries[galleryKey];
    							// Get image gallery
        						$.each( images, function ( index, image ) {
        							if ( image['single'] == undefined ) {
        								var img_single = image['thumbnail'];
        							} else {
        								var img_single = image['single']; 
        							}
        
        							if ( $.inArray( img_single, usedImages ) === -1 ) {
        								output_gal += '<div class="p-item woocommerce-product-gallery__image<?php echo $zoom; ?>">';
        								output_gal += '<a href="' + image['data-large_image'] + '">';
        								output_gal += '<img width="' + image['data-large_image_width'] + '" height="' + image['data-large_image_height'] + '" src="' + img_single + '" class="attachment-shop_single size-shop_single" alt="" title="" data-src="' + image['data-src'] + '" data-large_image="' + image['data-large_image'] + '" data-large_image_width="' + image['data-large_image_width'] + '" data-large_image_height="' + image['data-large_image_height'] + '"/>';
        								output_gal += '</a></div>';
        
        								output_thumb += '<div>';
        								output_thumb += '<img src="' + image['thumbnail'] + '" />';
        								output_thumb += '</div>';
        
        								usedImages.push( img_single );
        							}
        						});
    						} else {
    							images = galleries['default_gallery'];
    							
    							// Get variation image
        						$.each( formData, function ( index, variation ) {
        							if ( Object.keys( variation['attributes']).length === Object.keys( selectedAttr ).length ) {
        								// Flag to check right or wrong variation
        								var chooseThisVariation = true;
        
        								$.each( selectedAttr, function ( attrName, attrValue ) {
        									if ( variation['attributes']['attribute_' + attrName + ''] !== '' && variation['attributes']['attribute_' + attrName + ''] !== attrValue) {
        										chooseThisVariation = false;
        									}
        								});
        
        								if ( chooseThisVariation ) {
        									var image = variation['image'];
        
        									if ( $.inArray( image['thumb_src'], usedImages ) === -1 ) {
        										output_gal += '<div class="p-item woocommerce-product-gallery__image<?php echo $zoom; ?>">';
        										output_gal += '<a href="' + image['full_src'] + '">';
        										output_gal += '<img width="' + image['src_w'] + '" height="' + image['src_h'] + '" src="' + image['src'] + '" class="attachment-shop_single size-shop_single" alt="" title="" data-src="' + image['full_src'] + '" data-large_image="' + image['full_src'] + '" data-large_image_width="' + image['full_src_w'] + '" data-large_image_height="' + image['full_src_h'] + '" />';
        										output_gal += '</a></div>';
        
        										output_thumb += '<div>';
        										output_thumb += '<img src="' + image['thumb_src'] + '" />';
        										output_thumb += '</div>';
        
        										usedImages.push( image['thumb_src'] );
        										return true;
        									}
        								}
        							}
        						});
    						}
    
    						if ( $( '.jas-wc-single' ).is( '.wc-single-1, .wc-single-3' ) || window._inQuickview ) {
    							var data_slick = '{"slidesToShow": 1,"slidesToScroll": 1,"asNavFor": ".p-nav","fade":true, "dots": true ,"adaptiveHeight":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}';
    						} else if ( $( '.jas-wc-single' ).is( '.wc-single-2' ) ) {
    							var data_slick = '{"slidesToShow": 3,"slidesToScroll": 1,"centerMode":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>, "responsive":[{"breakpoint": 960,"settings":{"slidesToShow": 2, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}},{"breakpoint": 480,"settings":{"slidesToShow": 1, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}}]}';
    						}
    
    						var output = '<div class="p-thumb images jas-carousel" data-slick=\'' + data_slick + '\'>' + output_gal + '</div>';
    
    						if ( $( '.jas-wc-single' ).hasClass( 'wc-single-1' ) ) {
    							//output += '<div class="p-nav oh jas-carousel" data-slick=\'{"slidesToShow": 4,"slidesToScroll": 1,"asNavFor": ".p-thumb","arrows": false, "focusOnSelect": true<?php //echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}\'>' + output_thumb + '</div>';
    						}
    
    						$( '#product-' + productId + ' .single-product-thumbnail' ).html( output );
    
    						setTimeout(function() {
    							$( '.jas-carousel' ).not( '.slick-initialized' ).slick();
    
    							if ( $( '.jas-image-zoom' ).length > 0 ) {
    								$( '.jas-image-zoom' ).zoom({
    									touch: false,
    								});
    							}
    
    							// Reset the index of image on product variation
    							$( 'body' ).on( 'found_variation', '.variations_form', function( ev, variation ) {
    								if ( variation && variation.image && variation.image.src && variation.image.src.length > 1 ) {
    									$( '.jas-carousel' ).slick( 'slickGoTo', 0 );
    								}
    							});
    						}, 10);
    
    						// Trigger gallery
    						if ( $( '.woocommerce-product-gallery' ).length > 0 && ! window._inQuickview ) {
    							$( '.woocommerce-product-gallery' ).each( function () {
    								$( this ).wc_product_gallery();
    							});
    							$( 'body' ).on( 'click', '.pswp__container, .pswp__button--close', function() {
    								$( '.pswp' ).removeAttr( 'class' ).addClass( 'pswp' );
    							});
    						}
    
    						<?php if ( isset( $options ) && ! empty( $options['wc-single-video-upload'] ) || ! empty( $options['wc-single-video-url'] ) ) : ?>
    							output += '<div class="p-video pa">';
    								<?php if ( $options['wc-single-video'] == 'url' ) { ?>
    									output += '<a href="<?php echo esc_url( $options['wc-single-video-url'] ); ?>" class="br__50 tc db bghp jas-popup-url"><i class="pe-7s-play pr"></i></a>';
    								<?php } else { ?>
    									output += '<a href="#jas-vsh" class="br__50 tc db bghp jas-popup-mp4"><i class="pe-7s-play pr"></i></a>';
    									output += '<div id="jas-vsh" class="mfp-hide"><?php do_shortcode( '"' ) . '" width="640" height="320"]' ); ?></div>';
    								<?php } ?>
    							output +=  '</div>';
    						<?php endif; ?>
    					});
    				})( jQuery );
    			</script>
    		<?php
    	}
    	add_action( 'wp_footer', 'jas_gecko_child_wcvs_modify_images', 1000 );
    }

    and add more code in JanStudio > Theme Option > General Layout > Custom CSS

    .p-video a {
    	width: 180px;
    	padding: 0 20px;
    	height: 56px;
    	line-height: 56px;
    	text-align: left;
    	border-radius: 30px;
    	font-size: 35px;
    }
    .p-video a::after {
    	position: absolute;
    	content: "View video";
    	font-size: 18px;
    	top: 0;
    	right: 20px;
    	white-space: nowrap;
    }

    Regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #27925

    Hi, thank you!

     

    #27926

    Hi,

    I check your site, it now still work with boxed layout. Did you fix this?

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #27931

    Hi! Yes, it has been working well! I realised actually I zoomed the website display at my browser by accident, so I was unable to view the boxed layout. But I have reset my broswer display and everything now is fine! Thank you so much for the help still! 🙂

    #27935

    You’re welcome.

    Have a great day!

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #27977
    This reply has been marked as private.
    #27978

    Hi,

    please add below code to Janstudio > Theme Option > General Layout > Custom CSS

    .btn-atc .wccpf-fields-container + .cart:not(.variations_form) {display: inline-block;}

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #27979

    It works well!!!

    Thank you so much!!!

    Best regards.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.