WC_Shop_Customizer::add_scripts() │ public │ WC 1.0

Scripts to improve our form.

Method of the class: WC_Shop_Customizer{}

No Hooks.

Return

null. Nothing (null).

Usage

$WC_Shop_Customizer = new WC_Shop_Customizer();
$WC_Shop_Customizer->add_scripts();

WC_Shop_Customizer::add_scripts() WC Shop Customizer::add scripts code ^{WC 9.4.2}

<?php
public function add_scripts() {
	$min_rows    = wc_get_theme_support( 'product_grid::min_rows', 1 );
	$max_rows    = wc_get_theme_support( 'product_grid::max_rows', '' );
	$min_columns = wc_get_theme_support( 'product_grid::min_columns', 1 );
	$max_columns = wc_get_theme_support( 'product_grid::max_columns', '' );

	/* translators: %d: Setting value */
	$min_notice = __( 'The minimum allowed setting is %d', 'woocommerce' );
	/* translators: %d: Setting value */
	$max_notice = __( 'The maximum allowed setting is %d', 'woocommerce' );
	?>
	<script type="text/javascript">
		jQuery( function( $ ) {
			$( document.body ).on( 'change', '.woocommerce-cropping-control input[type="radio"]', function() {
				var $wrapper = $( this ).closest( '.woocommerce-cropping-control' ),
					value    = $wrapper.find( 'input:checked' ).val();

				if ( 'custom' === value ) {
					$wrapper.find( '.woocommerce-cropping-control-aspect-ratio' ).slideDown( 200 );
				} else {
					$wrapper.find( '.woocommerce-cropping-control-aspect-ratio' ).hide();
				}

				return false;
			} );

			wp.customize.bind( 'ready', function() { // Ready?
				$( '.woocommerce-cropping-control' ).find( 'input:checked' ).trigger( 'change' );
			} );

			wp.customize( 'woocommerce_demo_store', function( setting ) {
				setting.bind( function( value ) {
					var notice = wp.customize( 'woocommerce_demo_store_notice' );

					if ( value && ! notice.callbacks.has( notice.preview ) ) {
						notice.bind( notice.preview );
					} else if ( ! value ) {
						notice.unbind( notice.preview );
					}
				} );
			} );

			wp.customize( 'woocommerce_demo_store_notice', function( setting ) {
				setting.bind( function( value ) {
					var checkbox = wp.customize( 'woocommerce_demo_store' );

					if ( checkbox.get() ) {
						$( '.woocommerce-store-notice' ).text( value );
					}
				} );
			} );

			wp.customize.section( 'woocommerce_store_notice', function( section ) {
				section.expanded.bind( function( isExpanded ) {
					if ( isExpanded ) {
						var notice   = wp.customize( 'woocommerce_demo_store_notice' ),
							checkbox = wp.customize( 'woocommerce_demo_store' );

						if ( checkbox.get() && ! notice.callbacks.has( notice.preview ) ) {
							notice.bind( notice.preview );
						} else if ( ! checkbox.get() ) {
							notice.unbind( notice.preview );
						}
					}
				} );
			} );

			wp.customize.section( 'woocommerce_product_catalog', function( section ) {
				section.expanded.bind( function( isExpanded ) {
					if ( isExpanded ) {
						wp.customize.previewer.previewUrl.set( '<?php echo esc_js( wc_get_page_permalink( 'shop' ) ); ?>' );
					}
				} );
			} );

			wp.customize.section( 'woocommerce_product_images', function( section ) {
				section.expanded.bind( function( isExpanded ) {
					if ( isExpanded ) {
						wp.customize.previewer.previewUrl.set( '<?php echo esc_js( wc_get_page_permalink( 'shop' ) ); ?>' );
					}
				} );
			} );

			wp.customize.section( 'woocommerce_checkout', function( section ) {
				section.expanded.bind( function( isExpanded ) {
					if ( isExpanded ) {
						wp.customize.previewer.previewUrl.set( '<?php echo esc_js( wc_get_page_permalink( 'checkout' ) ); ?>' );
					}
				} );
			} );

			wp.customize( 'woocommerce_catalog_columns', function( setting ) {
				setting.bind( function( value ) {
					var min = parseInt( '<?php echo esc_js( $min_columns ); ?>', 10 );
					var max = parseInt( '<?php echo esc_js( $max_columns ); ?>', 10 );

					value = parseInt( value, 10 );

					if ( max && value > max ) {
						setting.notifications.add( 'max_columns_error', new wp.customize.Notification(
							'max_columns_error',
							{
								type   : 'error',
								message: '<?php echo esc_js( sprintf( $max_notice, $max_columns ) ); ?>'
							}
						) );
					} else {
						setting.notifications.remove( 'max_columns_error' );
					}

					if ( min && value < min ) {
						setting.notifications.add( 'min_columns_error', new wp.customize.Notification(
							'min_columns_error',
							{
								type   : 'error',
								message: '<?php echo esc_js( sprintf( $min_notice, $min_columns ) ); ?>'
							}
						) );
					} else {
						setting.notifications.remove( 'min_columns_error' );
					}
				} );
			} );

			wp.customize( 'woocommerce_catalog_rows', function( setting ) {
				setting.bind( function( value ) {
					var min = parseInt( '<?php echo esc_js( $min_rows ); ?>', 10 );
					var max = parseInt( '<?php echo esc_js( $max_rows ); ?>', 10 );

					value = parseInt( value, 10 );

					if ( max && value > max ) {
						setting.notifications.add( 'max_rows_error', new wp.customize.Notification(
							'max_rows_error',
							{
								type   : 'error',
								message: '<?php echo esc_js( sprintf( $max_notice, $max_rows ) ); ?>'
							}
						) );
					} else {
						setting.notifications.remove( 'max_rows_error' );
					}

					if ( min && value < min ) {
						setting.notifications.add( 'min_rows_error', new wp.customize.Notification(
							'min_rows_error',
							{
								type   : 'error',
								message: '<?php echo esc_js( sprintf( $min_notice, $min_rows ) ); ?>'
							}
						) );
					} else {
						setting.notifications.remove( 'min_rows_error' );
					}
				} );
			} );
		} );
	</script>
	<?php

	if ( $this->has_block_checkout() ) {
		$message = sprintf(
			/* translators: %s: Link to the editor page with the Checkout block. */
			__( 'Checkout can be customized <a href="%s">in the Editor</a> with your active theme.', 'woocommerce' ),
			admin_url( 'post.php?post=' . get_option( 'woocommerce_checkout_page_id' ) . '&action=edit' )
		);
		?>
		<script type="text/javascript">
			jQuery( document ).ready( function( $ ) {
				const message = <?php echo wp_json_encode( $message ); ?>;
				$( "#sub-accordion-panel-woocommerce" ).append( "<li class='notice notice-info'>" + message + "</li>" );
			} );
		</script>
		<?php
	}

}