<?php
/**
 * Add an element to fusion-builder.
 *
 * @package fusion-builder
 * @since 3.3
 */

if ( fusion_is_element_enabled( 'fusion_woo_sorting' ) && class_exists( 'WooCommerce' ) ) {

	if ( ! class_exists( 'FusionSC_WooSorting' ) ) {
		/**
		 * Shortcode class.
		 *
		 * @since 3.3
		 */
		class FusionSC_WooSorting extends Fusion_Element {

			/**
			 * The counter.
			 *
			 * @access private
			 * @since 3.3
			 * @var int
			 */
			private $element_counter = 1;

			/**
			 * Shortcode name.
			 *
			 * @access public
			 * @since 3.3
			 * @var string
			 */
			public $shortcode_name;

			/**
			 * Constructor.
			 *
			 * @access public
			 * @since 3.3
			 */
			public function __construct() {
				parent::__construct();
				$this->shortcode_name = 'fusion_woo_sorting';
				add_filter( 'fusion_attr_' . $this->shortcode_name . '-shortcode', [ $this, 'attr' ] );

				add_shortcode( $this->shortcode_name, [ $this, 'render' ] );

				// Ajax mechanism for query related part.
				add_action( 'wp_ajax_get_' . $this->shortcode_name, [ $this, 'ajax_render' ] );

				add_filter( 'fusion_pipe_seprator_shortcodes', [ $this, 'allow_separator' ] );
			}

			/**
			 * Enables pipe separator for shortcode.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $shortcodes The shortcodes array.
			 * @return array
			 */
			public function allow_separator( $shortcodes ) {
				if ( is_array( $shortcodes ) ) {
					array_push( $shortcodes, $this->shortcode_name );
				}

				return $shortcodes;
			}			

			/**
			 * Gets the default values.
			 *
			 * @static
			 * @access public
			 * @since 3.3
			 * @return array
			 */
			public static function get_element_defaults() {
				$fusion_settings = awb_get_fusion_settings();
				return [
					'linked_pca'                             => '',
					'elements'                               => 'orderby,count,view',
					'width'                                  => '',
					'width_medium'                           => '',
					'width_small'                            => '',					
					'height'                                 => '',
					'height_medium'                          => '',
					'height_small'                           => '',
					'element_flex_direction'                 => 'row',
					'element_flex_direction_medium'          => 'column',
					'element_flex_direction_small'           => 'column',
					'element_justify_content'                => 'flex-start',
					'element_justify_content_medium'         => '',
					'element_justify_content_small'          => '',
					'element_align_items'                    => 'center',
					'element_align_items_medium'             => '',
					'element_align_items_small'              => '',
					'column_gap'                             => '6px',
					'column_gap_medium'                      => '',
					'column_gap_small'                       => '',
					'row_gap'                                => '10px',
					'row_gap_medium'                         => '',
					'row_gap_small'                          => '',
					'margin_top'                             => '',
					'margin_right'                           => '',
					'margin_bottom'                          => '10px',
					'margin_left'                            => '',
					'margin_top_medium'                      => '',
					'margin_right_medium'                    => '',
					'margin_bottom_medium'                   => '10px',
					'margin_left_medium'                     => '',
					'margin_top_small'                       => '',
					'margin_right_small'                     => '',
					'margin_bottom_small'                    => '10px',
					'margin_left_small'                      => '',
					'hide_on_mobile'                         => fusion_builder_default_visibility( 'string' ),
					'class'                                  => '',
					'id'                                     => '',

					'sort_options'                           => 'default,name,price,date,popularity,rating',
					'sort_layout'                            => '',
					'dropdown_width'                         => '180px',
					'dropdown_height'                        => '39px',
					'select_font_size'                       => '',
					'fusion_font_family_dropdown_font'       => '',
					'fusion_font_variant_dropdown_font'      => '',
					'dropdown_font_size'                     => '',
					'dropdown_line_height'                   => '',
					'dropdown_letter_spacing'                => '',
					'dropdown_text_transform'                => '',
					'dropdown_bg_color'                      => $fusion_settings->get( 'woo_dropdown_bg_color' ),
					'dropdown_hover_bg_color'                => $fusion_settings->get( 'woo_dropdown_bg_color' ),
					'dropdown_text_color'                    => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'dropdown_text_hover_color'              => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'dropdown_border_size'                   => '1px',
					'dropdown_border_color'                  => $fusion_settings->get( 'woo_dropdown_border_color' ),
					'dropdown_border_hover_color'            => $fusion_settings->get( 'woo_dropdown_border_color' ),
					'dropdown_border_radius'                 => '',
					'display_order_button'                   => 'yes',
					'order_spacing'                          => '6px',
					'order_font_size'                        => '',

					'number_products'                        => $fusion_settings->get( 'woo_items' ),
					'product_count_layout'                   => 'dropdown',
					'product_count_width'                    => '180px',
					'product_count_height'                   => '39px',
					'product_count_select_font_size'         => '',
					'product_count_label'                    => 'no',
					'product_count_button_label_font_size'   => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'product_count_button_label_text_color'  => '',
					'fusion_font_family_product_count_font'  => '',
					'fusion_font_variant_product_count_font' => '',
					'product_count_font_size'                => '',
					'product_count_line_height'              => '',
					'product_count_letter_spacing'           => '',
					'product_count_text_transform'           => '',
					'product_count_button_layout'            => 'connected',
					'product_count_button_size'              => '39px',
					'product_count_text_button_sep'          => '/',
					'product_count_text_button_sep_color'	 => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'product_count_bg_color'                 => $fusion_settings->get( 'woo_dropdown_bg_color' ),
					'product_count_bg_hover_color'           => $fusion_settings->get( 'woo_dropdown_bg_color' ),
					'product_count_text_color'               => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'product_count_text_hover_color'         => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'product_count_border_size'              => '1px',
					'product_count_border_color'             => $fusion_settings->get( 'woo_dropdown_border_color' ),
					'product_count_border_hover_color'       => $fusion_settings->get( 'woo_dropdown_border_color' ),
					'product_count_border_radius'            => '',

					'product_view_label'                     => 'no',
					'product_view_button_label_font_size'    => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'product_view_button_label_text_color'   => '',
					'product_view_elements'                  => 'grid,list',
					'product_view_button_layout'             => 'connected',
					'product_view_button_size'               => '39px',
					'product_view_font_size'                 => '12px',
					'product_view_bg_color'                  => $fusion_settings->get( 'woo_dropdown_bg_color' ),
					'product_view_bg_hover_color'            => $fusion_settings->get( 'woo_dropdown_bg_color' ),
					'product_view_text_color'                => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'product_view_text_hover_color'          => $fusion_settings->get( 'woo_dropdown_text_color' ),
					'product_view_border_size'               => '1px',
					'product_view_border_color'              => $fusion_settings->get( 'woo_dropdown_border_color' ),
					'product_view_border_hover_color'        => $fusion_settings->get( 'woo_dropdown_border_color' ),
					'product_view_border_radius'             => '',
				];
			}

			/**
			 * Used to set any other variables for use on front-end editor template.
			 *
			 * @static
			 * @access public
			 * @since 3.3
			 * @return array
			 */
			public static function get_element_extras() {
				$fusion_settings = awb_get_fusion_settings();
				return [
					'box_design'        => $fusion_settings->get( 'woocommerce_product_box_design', false, 'classic' ),
					'load_more_text'    => apply_filters( 'avada_load_more_products_name', esc_attr__( 'Load More Products', 'fusion-builder' ) ),
					'visibility_medium' => $fusion_settings->get( 'visibility_medium' ),
				];
			}

			/**
			 * Maps settings to extra variables.
			 *
			 * @static
			 * @access public
			 * @since 3.3
			 * @return array
			 */
			public static function settings_to_extras() {
				return [
					'woocommerce_product_box_design' => 'box_design',
				];
			}

			/**
			 * Gets the query data.
			 *
			 * @static
			 * @access public
			 * @since 3.3
			 * @param array $args An array of args.
			 * @return void
			 */
			public function ajax_render( $args ) {
				check_ajax_referer( 'fusion_load_nonce', 'fusion_load_nonce' );
				$live_request = false;
				$return_data  = [];

				// From Ajax Request.
				if ( isset( $_POST['model'] ) && ! apply_filters( 'fusion_builder_live_request', false ) ) { // phpcs:ignore WordPress.Security.NonceVerification
					$this->args   = wp_unslash( $_POST['model']['params'] ); // phpcs:ignore WordPress.Security

					// Avoid AJAX re-render for the order button and button labels.
					$this->args['display_order_button'] = 'yes';
					$this->args['product_count_label']  = 'yes';
					$this->args['product_view_label']   = 'yes';

					$live_request = true;
					add_filter( 'fusion_builder_live_request', '__return_true' );
				}

				$return_data['output'] = $this->get_elements();
				echo wp_json_encode( $return_data );
				wp_die();
			}

			/**
			 * Render the shortcode.
			 *
			 * @access public
			 * @since 3.3
			 * @param  array  $args    Shortcode parameters.
			 * @param  string $content Content between shortcode.
			 * @return string          HTML output
			 */
			public function render( $args, $content = '' ) {
				$this->defaults = self::get_element_defaults();

				$this->args = FusionBuilder::set_shortcode_defaults( $this->defaults, $args, $this->shortcode_name );

				$html  = '<div ' . FusionBuilder::attributes( $this->shortcode_name . '-shortcode' ) . '>';
				$html .= $this->get_elements();
				$html .= '</div>';

				$this->element_counter++;

				$this->on_render();

				return apply_filters( 'fusion_element_woo_sorting_content', $html, $args );
			}

			/**
			 * Builds HTML for sorting elements.
			 *
			 * @access public
			 * @since 3.3
			 * @return array
			 */
			public function get_elements() {
				$content                = '';
				$query_string_and_parms = $this->get_query_string( 'include_params' );
				$sort_elements          = explode( ',', $this->args['elements'] );

				foreach ( $sort_elements as $index => $element ) {
					$element = 'orderby' === $element && 'select' === $this->args['sort_layout'] ? 'sort_select' : $element;
					$element = 'count' === $element && 'buttons' === $this->args['product_count_layout'] ? 'count_buttons' : $element;
					$element = 'count' === $element && 'select' === $this->args['product_count_layout'] ? 'count_select' : $element;
					

					switch ( $element ) {
						case 'orderby':
							$content .= $this->get_sort_content_dropdown( $query_string_and_parms );
							break;
						case 'sort_select';
							$content .= $this->get_sort_content_select( $query_string_and_parms );
							break;
						case 'count_buttons':
							$content .= $this->get_product_count_content_buttons( $query_string_and_parms );
							break;
						case 'count_select':
							$content .= $this->get_product_count_content_select( $query_string_and_parms );
							break;
						case 'count':
							$content .= $this->get_product_count_content_dropdown( $query_string_and_parms );
							break;
						case 'view':
							$content .= $this->get_product_view_content_buttons( $query_string_and_parms );
							break;
					}
				}

				return $content;
			}

			/**
			 * Get the query string. Use the flag to get the string and the params.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param string $flag Set to 'include_params' to get an array of the string and the params.
			 * @return string|array
			 */
			public function get_query_string( $flag = 'query_string' ) {
				$query_string = '';
				$query_params = [];

				if ( isset( $_SERVER['QUERY_STRING'] ) ) {
					$query_string = sanitize_text_field( urldecode( wp_unslash( $_SERVER['QUERY_STRING'] ) ) );

					if ( 'include_params' === $flag ) {
						parse_str( $query_string, $query_params );
					}

					$query_string = '?' . $query_string;
				}
				
				if ( $this->args['linked_pca' ] ) {
					$query_string = $query_string ? $query_string . '&linked_pca=' . esc_attr( $this->args['linked_pca' ] ) : '?linked_pca=' . esc_attr( $this->args['linked_pca' ] );
					$query_params = $query_params ? $query_params + [ 'linked_pca' => esc_attr( $this->args['linked_pca' ] ) ] : [ 'linked_pca' => esc_attr( $this->args['linked_pca' ] ) ];
				}

				return 'include_params' === $flag ? [ 'query_string' => $query_string, 'query_params' => $query_params ] : $query_string;
			}

			/**
			 * Get the correct label for the sorting element.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param string $pob The order by string.
			 * @return string
			 */
			public function get_active_sort_label( $pob ) {
				$sort_label = esc_attr__( 'Default Order', 'fusion-builder' );

				switch ( $pob ) {
					case 'date':
						$sort_label = esc_attr__( 'Date', 'fusion-builder' );
						break;
					case 'price':
					case 'price-desc':
						$sort_label = esc_attr__( 'Price', 'fusion-builder' );
						break;
					case 'popularity':
						$sort_label = esc_attr__( 'Popularity', 'fusion-builder' );
						break;
					case 'rating':
						$sort_label = esc_attr__( 'Rating', 'fusion-builder' );
						break;
					case 'name':
						$sort_label = esc_attr__( 'Name', 'fusion-builder' );
						break;
					case 'relevance':
						$sort_label = esc_attr__( 'Relevance', 'fusion-builder' );
						break;
				}

				return $sort_label;

			}

			/**
			 * Get sort content as a dropdown.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $query_string_and_parms Query string as string and params.
			 * @return string
			 */
			public function get_sort_content_dropdown( $query_string_and_parms ) {
				$query_string    = $query_string_and_parms['query_string'];
				$query_params    = $query_string_and_parms['query_params'];
				$sort_options    = explode( ',', $this->args['sort_options'] );

				// Use "relevance" as default if we're on the search page.
				$default_orderby = is_search() ? 'relevance' : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby', '' ) );
				$pob             = ! empty( $query_params['product_orderby'] ) ? $query_params['product_orderby'] : $default_orderby;
				$sort_label      = $this->get_active_sort_label( $pob );

				if ( ! empty( $query_params['product_order'] ) ) {
					$po = $query_params['product_order'];
				} else {
					switch ( $pob ) {
						case 'default':
						case 'menu_order':
						case 'price':
						case 'name':
							$po = 'asc';
							break;
						default:
							$po = 'desc';
							break;
					}
				}

				ob_start(); ?>
				<div class="awb-sort">
					<ul class="orderby awb-dropdown">
						<li>
							<span class="current-li">
								<span class="current-li-content">
									<?php /* translators: Name, Price, Date etc. */ ?>
									<a aria-haspopup="true"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr( $sort_label ) . '</strong>' ); ?></span></a>
								</span>
							</span>
							<ul>
								<?php if ( is_search() ) : ?>
									<li class="<?php echo ( 'relevance' === $pob ) ? 'current' : ''; ?>">
										<?php /* translators: Relevance, Price, Date etc. */ ?>
										<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'relevance' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Relevance', 'fusion-builder' ) . '</strong>' ); ?></span></a>
									</li>
								<?php endif; ?>
								<?php if ( 'menu_order' === apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby', 'menu_order' ) ) ) : ?>
									<li class="<?php echo ( 'menu_order' === $pob ) ? 'current' : ''; ?>">
										<?php /* translators: Name, Price, Date etc. */ ?>
										<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'default' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Default Order', 'fusion-builder' ) . '</strong>' ); ?></span></a>
									</li>
								<?php endif; ?>
								<?php if ( in_array( 'name', $sort_options ) ) : ?>
								<li class="<?php echo ( 'name' === $pob ) ? 'current' : ''; ?>">
									<?php /* translators: Name, Price, Date etc. */ ?>
									<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'name' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Name', 'fusion-builder' ) . '</strong>' ); ?></span></a>
								</li>
								<?php endif; ?>
								<?php if ( in_array( 'price', $sort_options ) ) : ?>

								<?php if ( 'yes' === $this->args['display_order_button'] ) : ?>
								<li class="<?php echo ( 'price' === $pob || 'price-desc' === $pob ) ? 'current' : ''; ?>">
									<?php /* translators: Name, Price, Date etc. */ ?>
									<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'price' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Price', 'fusion-builder' ) . '</strong>' ); ?></span></a>
								</li>
								<?php else: ?>
								<li class="<?php echo ( 'price' === $pob ) ? 'current' : ''; ?>">
									<?php /* translators: Name, Price, Date etc. */ ?>
									<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'price' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Price: low to high', 'fusion-builder' ) . '</strong>' ); ?></span></a>
								</li>

								<li class="<?php echo ( 'price-desc' === $pob ) ? 'current' : ''; ?>">
									<?php /* translators: Name, Price, Date etc. */ ?>
									<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'price-desc' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Price: high to low', 'fusion-builder' ) . '</strong>' ); ?></span></a>
								</li>
								<?php endif; ?>

								<?php endif; ?>
								<?php if ( in_array( 'date', $sort_options ) ) : ?>
								<li class="<?php echo ( 'date' === $pob ) ? 'current' : ''; ?>">
									<?php /* translators: Name, Price, Date etc. */ ?>
									<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'date' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Date', 'fusion-builder' ) . '</strong>' ); ?></span></a>
								</li>
								<?php endif; ?>
								<?php if ( in_array( 'popularity', $sort_options ) ) : ?>
								<li class="<?php echo ( 'popularity' === $pob ) ? 'current' : ''; ?>">
									<?php /* translators: Name, Price, Date etc. */ ?>
									<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'popularity' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Popularity', 'fusion-builder' ) . '</strong>' ); ?></span></a>
								</li>
								<?php endif; ?>

								<?php if ( in_array( 'rating', $sort_options ) && 'no' !== get_option( 'woocommerce_enable_reviews' ) && 'no' !== get_option( 'woocommerce_enable_review_rating' ) ) : ?>
									<li class="<?php echo ( 'rating' === $pob ) ? 'current' : ''; ?>">
										<?php /* translators: Name, Price, Date etc. */ ?>
										<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'rating' ) ); ?>"><span><?php printf( esc_html__( 'Sort by %s', 'fusion-builder' ), '<strong>' . esc_attr__( 'Rating', 'fusion-builder' ) . '</strong>' ); ?></span></a>
									</li>
								<?php endif; ?>
							</ul>
						</li>
					</ul>

					<?php $this->get_sort_order_button_content( $query_string, $po ); ?>
				</div>

				<?php
				return ob_get_clean();
			}

			/**
			 * Get sort content as a dropdown.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $query_string_and_parms Query string as string and params.
			 * @return string
			 */
			public function get_sort_content_select( $query_string_and_parms ) {
				$query_string    = $query_string_and_parms['query_string'];
				$query_params    = $query_string_and_parms['query_params'];
				$sort_options    = explode( ',', $this->args['sort_options'] );

				// Use "relevance" as default if we're on the search page.
				$default_orderby = is_search() ? 'relevance' : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby', '' ) );
				$pob             = ! empty( $query_params['product_orderby'] ) ? $query_params['product_orderby'] : $default_orderby;

				if ( ! empty( $query_params['product_order'] ) ) {
					$po = $query_params['product_order'];
				} else {
					switch ( $pob ) {
						case 'default':
						case 'menu_order':
						case 'price':
						case 'name':
							$po = 'asc';
							break;
						default:
							$po = 'desc';
							break;
					}
				}

				ob_start(); ?>
				<div class="awb-sort">
					<div class="avada-select-parent">
						<select class="awb-sort-select">
							<?php if ( is_search() ) : ?>
								<option <?php echo ( 'relevance' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'relevance' ) ); ?>">
									<?php esc_html_e( 'Sort by Relevance', 'fusion-builder' ); ?>
								</option>
							<?php endif; ?>
							<?php if ( 'menu_order' === apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby', 'menu_order' ) ) ) : ?>
								<option <?php echo ( 'menu_order' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'default' ) ); ?>">
									<?php esc_html_e( 'Sort by Default Order', 'fusion-builder' ); ?>
								</option>
							<?php endif; ?>
							<?php if ( in_array( 'name', $sort_options ) ) : ?>
								<option <?php echo ( 'name' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'name' ) ); ?>">
									<?php esc_html_e( 'Sort by Name', 'fusion-builder' ); ?>
								</option>
							<?php endif; ?>
							<?php if ( in_array( 'price', $sort_options ) ) : ?>
								<?php if ( 'yes' === $this->args['display_order_button'] ) : ?>
									<option <?php echo ( 'price' === $pob || 'price-desc' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'price' ) ); ?>">
										<?php esc_html_e( 'Sort by Price', 'fusion-builder' ); ?>
									</option>
								<?php else: ?>
									<option <?php echo ( 'price' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'price' ) ); ?>">
										<?php esc_html_e( 'Sort by Price: low to high', 'fusion-builder' ); ?>
									</option>
									<option <?php echo ( 'price-desc' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'price-desc' ) ); ?>">
										<?php esc_html_e( 'Sort by Price: high to low', 'fusion-builder' ); ?>
									</option>
								<?php endif; ?>
							<?php endif; ?>
							<?php if ( in_array( 'date', $sort_options ) ) : ?>
								<option <?php echo ( 'date' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'date' ) ); ?>">
									<?php esc_html_e( 'Sort by Date', 'fusion-builder' ); ?>
								</option>
							<?php endif; ?>
							<?php if ( in_array( 'popularity', $sort_options ) ) : ?>
								<option <?php echo ( 'popularity' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'popularity' ) ); ?>">
									<?php esc_html_e( 'Sort by Popularity', 'fusion-builder' ); ?>
								</option>
							<?php endif; ?>
							<?php if ( in_array( 'rating', $sort_options ) && 'no' !== get_option( 'woocommerce_enable_reviews' ) && 'no' !== get_option( 'woocommerce_enable_review_rating' ) ) : ?>
								<option <?php echo ( 'rating' === $pob ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_orderby', 'rating' ) ); ?>">
									<?php esc_html_e( 'Sort by Rating', 'fusion-builder' ); ?>
								</option>
							<?php endif; ?>	
						</select>
						<div class="select-arrow">&#xe61f;</div>
					</div>

					<?php $this->get_sort_order_button_content( $query_string, $po ); ?>
				</div>

				<?php
				return ob_get_clean();
			}

			/**
			 * Get sort order button content.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $query_string Query string.
			 * @param string $po The product ordering (ASC/DESC).
			 * @return string
			 */
			public function get_sort_order_button_content( $query_string, $po ) {
				if ( 'yes' === $this->args['display_order_button'] ) : ?>
					<ul class="awb-order">
						<?php if ( isset( $po ) ) : ?>
							<?php if ( 'desc' === $po ) : ?>
								<li class="desc"><a aria-label="<?php esc_attr_e( 'Ascending order', 'fusion-builder' ); ?>" aria-haspopup="true" href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_order', 'asc' ) ); ?>"><i class="awb-icon-arrow-down2 icomoon-up" aria-hidden="true"></i></a></li>
							<?php else : ?>
								<li class="asc"><a aria-label="<?php esc_attr_e( 'Descending order', 'fusion-builder' ); ?>" aria-haspopup="true" href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_order', 'desc' ) ); ?>"><i class="awb-icon-arrow-down2" aria-hidden="true"></i></a></li>
							<?php endif; ?>
						<?php endif; ?>
					</ul>
				<?php endif;
			}

			/**
			 * Get product count content as dropdown.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $query_string_and_parms Query string as string and params.
			 * @return string
			 */
			public function get_product_count_content_dropdown( $query_string_and_parms ) {
				$query_string = $query_string_and_parms['query_string'];
				$query_params = $query_string_and_parms['query_params'];
				$per_page     = $this->args['number_products'];
				$pc           = ! empty( $query_params['product_count'] ) ? $query_params['product_count'] : $per_page;
				ob_start();
				?>
				<ul class="sort-count awb-dropdown">
					<li>
						<span class="current-li">
							<a aria-haspopup="true">
								<span>
									<?php
									printf(
										/* translators: Number. */
										__( 'Show <strong>%s Products</strong>', 'fusion-builder' ), // phpcs:ignore WordPress.Security.EscapeOutput
										(int) $pc
									);
									?>
								</span>
								</a>
							</span>
						<ul>
							<li class="<?php echo ( $pc == $per_page ) ? 'active-count' : ''; // phpcs:ignore Universal.Operators.StrictComparisons ?>">
								<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page ) ); ?>">
									<span>
										<?php
										printf(
											/* translators: Number of products. */
											__( 'Show <strong>%s Products</strong>', 'fusion-builder' ), // phpcs:ignore WordPress.Security.EscapeOutput
											(int) $per_page
										);
										?>
									</span>
								</a>
							</li>
							<li class="<?php echo ( $pc == $per_page * 2 ) ? 'active-count' : ''; // phpcs:ignore Universal.Operators.StrictComparisons ?>">
								<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page * 2 ) ); ?>">
									<span>
										<?php
										printf(
											/* translators: Number of products.*/
											__( 'Show <strong>%s Products</strong>', 'fusion-builder' ), // phpcs:ignore WordPress.Security.EscapeOutput
											(int) $per_page * 2
										);
										?>
									</span>
								</a>
							</li>
							<li class="<?php echo ( $pc == $per_page * 3 ) ? 'active-count' : ''; // phpcs:ignore Universal.Operators.StrictComparisons ?>">
								<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page * 3 ) ); ?>">
									<span>
										<?php
										printf(
											/* translators: Number of products.*/
											__( 'Show <strong>%s Products</strong>', 'fusion-builder' ), // phpcs:ignore WordPress.Security.EscapeOutput
											(int) $per_page * 3
										);
										?>
									</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>

				<?php
				return ob_get_clean();
			}
			
			/**
			 * Get product count content as select.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $query_string_and_parms Query string as string and params.
			 * @return string
			 */
			public function get_product_count_content_select( $query_string_and_parms ) {
				$query_string = $query_string_and_parms['query_string'];
				$query_params = $query_string_and_parms['query_params'];
				$per_page     = $this->args['number_products'];
				$pc           = ! empty( $query_params['product_count'] ) ? $query_params['product_count'] : $per_page;
				ob_start();
				?>
				<div class="avada-select-parent">
					<select class="awb-count-select">
						<option <?php echo ( $pc == $per_page ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page ) ); ?>">
							<?php
							printf(
								/* translators: Number of products. */
								__( 'Show <strong>%s Products</strong>', 'fusion-builder' ), // phpcs:ignore WordPress.Security.EscapeOutput
								(int) $per_page
							);
							?>
						</option>

						<option <?php echo ( $pc == $per_page * 2 ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page * 2 ) ); ?>">
							<?php
							printf(
								/* translators: Number of products. */
								__( 'Show <strong>%s Products</strong>', 'fusion-builder' ), // phpcs:ignore WordPress.Security.EscapeOutput
								(int) $per_page * 2
							);
							?>
						</option>
						
						<option <?php echo ( $pc == $per_page * 3 ) ? ' selected="selected"' : ''; ?> value="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page *2 ) ); ?>">
							<?php
							printf(
								/* translators: Number of products. */
								__( 'Show <strong>%s Products</strong>', 'fusion-builder' ), // phpcs:ignore WordPress.Security.EscapeOutput
								(int) $per_page * 3
							);
							?>
						</option>

					</select>
					<div class="select-arrow">&#xe61f;</div>
				</div>
				<?php
				return ob_get_clean();
			}			

			/**
			 * Get product count content as buttons.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $query_string_and_parms Query string as string and params.
			 * @return string
			 */
			public function get_product_count_content_buttons( $query_string_and_parms ) {
				$query_string = $query_string_and_parms['query_string'];
				$query_params = $query_string_and_parms['query_params'];
				$per_page     = $this->args['number_products'];
				$pc           = ! empty( $query_params['product_count'] ) ? $query_params['product_count'] : $per_page;
				ob_start();
				?>

				<?php if ( 'yes' === $this->args['product_count_label'] ) : ?>
					<div class="awb-count-wrapper">
					<span><strong><?php esc_html_e( 'Show:', 'fusion-builder' ); ?></strong></span>
				<?php endif; ?>

				<ul class="awb-count-icons awb-layout-<?php esc_html_e( $this->args['product_count_button_layout'] ); ?>">
					<li class="<?php echo ( $pc == $per_page ) ? 'active-count' : ''; // phpcs:ignore Universal.Operators.StrictComparisons ?>">
						<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page ) ); ?>">
							<?php echo esc_html( (int) $per_page ); ?>
						</a>
					</li>
					<li class="<?php echo ( $pc == $per_page * 2 ) ? 'active-count' : ''; // phpcs:ignore Universal.Operators.StrictComparisons ?>">
						<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page * 2 ) ); ?>">
							<?php echo esc_html( (int) $per_page * 2 ); ?>
						</a>
					</li>
					<li class="<?php echo ( $pc == $per_page * 3 ) ? 'active-count' : ''; // phpcs:ignore Universal.Operators.StrictComparisons ?>">
						<a href="<?php echo esc_url_raw( fusion_add_url_parameter( $query_string, 'product_count', $per_page * 3 ) ); ?>">
							<?php echo esc_html( (int) $per_page * 3 ); ?>
						</a>
					</li>
				</ul>

				<?php if ( 'yes' === $this->args['product_count_label'] ) : ?>
					</div>
				<?php endif; ?>
				<?php
				return ob_get_clean();
			}

			/**
			 * Get product view content as buttons.
			 *
			 * @access public
			 * @since 3.15.0
			 * @param array $query_string_and_parms Query string as string and params.
			 * @return string
			 */
			public function get_product_view_content_buttons( $query_string_and_parms ) {
				$query_string         = $query_string_and_parms['query_string'];
				$query_params         = $query_string_and_parms['query_params'];
				$product_view         = ( isset( $query_params['product_view'] ) ) ? $query_params['product_view'] : fusion_library()->get_option( 'woocommerce_product_view' );
				$product_columns      = ( isset( $query_params['product_columns'] ) ) ? $query_params['product_columns'] : '';
				$view_elements        = explode( ',', $this->args['product_view_elements'] );

				$view_element_options = [
					'grid' => [
						'is_active'  => 'grid' === $product_view,
						'icon'       => 'awb-icon-grid-3x3',
						'aria_label' => esc_attr__( 'View as grid', 'fusion-builder' ),
						'url'        => fusion_add_url_parameter( $query_string, 'product_view', 'grid' ),
					],
					'list' => [
						'is_active'  => 'list' === $product_view,
						'icon'       => 'awb-icon-grid-list',
						'aria_label' => esc_attr__( 'View as list', 'fusion-builder' ),
						'url'        => fusion_add_url_parameter( $query_string, 'product_view', 'list' ),
					],
					'columns_2' => [
						'is_active'  => 'grid' === $product_view && '2' === $product_columns,
						'icon'       => 'awb-icon-grid-2x2',
						'aria_label' => esc_attr__( 'View as 2 columns"', 'fusion-builder' ),
						'url'        => fusion_add_url_parameter( fusion_add_url_parameter( $query_string, 'product_view', 'grid' ), 'product_columns', '2' ),
					],
					'columns_3' => [
						'is_active'  => 'grid' === $product_view && '3' === $product_columns,
						'icon'       => 'awb-icon-grid-3x3',
						'aria_label' => esc_attr__( 'View as 3 columns"', 'fusion-builder' ),
						'url'        => fusion_add_url_parameter( fusion_add_url_parameter( $query_string, 'product_view', 'grid' ), 'product_columns', '3' ),
					],
					'columns_4' => [
						'is_active'  => 'grid' === $product_view && '4' === $product_columns,
						'icon'       => 'awb-icon-grid-4x4',
						'aria_label' => esc_attr__( 'View as 4 columns"', 'fusion-builder' ),
						'url'        => fusion_add_url_parameter( fusion_add_url_parameter( $query_string, 'product_view', 'grid' ), 'product_columns', '4' ),
					],
				];
				ob_start();
				?>
				<?php if ( 'yes' === $this->args['product_view_label'] ) : ?>
					<div class="awb-view-wrapper">
					<span><strong><?php esc_html_e( 'Layout:', 'fusion-builder' ); ?></strong></span>
				<?php endif; ?>
				
				<ul class="awb-product-view awb-layout-<?php esc_html_e( $this->args['product_view_button_layout'] ); ?>">
					<?php foreach ( $view_elements as $option ) { ?>
						<li class="fusion-<?php echo esc_attr( str_replace( '_', '-', $option ) ); ?>-view-li<?php echo ( $view_element_options[ $option ]['is_active'] ) ? ' active-view' : ''; ?>">
							<a class="fusion-<?php echo esc_attr( str_replace( '_', '-', $option ) ); ?>-view" aria-label="<?php echo $view_element_options[ $option ]['aria_label']; ?>" aria-haspopup="true" href="<?php echo esc_url( $view_element_options[ $option ]['url'] ); ?>"><i class="<?php echo $view_element_options[ $option ]['icon']; ?>" aria-hidden="true"></i></a>
						</li>
					<?php } ?>
				</ul>

				<?php if ( 'yes' === $this->args['product_view_label'] ) : ?>
					</div>
				<?php endif; ?>
				<?php
				return ob_get_clean();
			}

			/**
			 * Builds the attributes array.
			 *
			 * @access public
			 * @since 3.3
			 * @return array
			 */
			public function attr() {

				$attr = fusion_builder_visibility_atts(
					$this->args['hide_on_mobile'],
					[
						'class'         => 'fusion-woo-sorting fusion-woo-sorting-' . $this->element_counter,
						'style'         => '',
						'data-instance' => $this->element_counter,
					]
				);

				if ( false !== strpos( $this->args['elements'], 'count' ) && 'buttons' === $this->args['product_count_layout'] ) {
					$attr['class'] .= ' awb-count-button-layout-' . $this->args['product_count_button_layout'];
				}

				if ( false !== strpos( $this->args['elements'], 'view' ) ) {
					$attr['class'] .= ' awb-view-button-layout-' . $this->args['product_view_button_layout'];
				}

				if ( $this->args['class'] ) {
					$attr['class'] .= ' ' . $this->args['class'];
				}

				$attr['style'] .= $this->get_style_variables();

				if ( $this->args['id'] ) {
					$attr['id'] = $this->args['id'];
				}

				return $attr;
			}

			/**
			 * Sets the necessary scripts.
			 *
			 * @access public
			 * @since 3.3
			 * @return void
			 */
			public function on_first_render() {
				// Skip if empty.
				if ( null === $this->args || empty( $this->args ) ) {
					return;
				}

				if ( class_exists( 'WooCommerce' ) ) {
					Fusion_Dynamic_JS::enqueue_script(
						'fusion-js-' . $this->shortcode_name,
						FusionBuilder::$js_folder_url . '/general/fusion-woo-sorting.js',
						FusionBuilder::$js_folder_path . '/general/fusion-woo-sorting.js',
						[ 'jquery' ],
						FUSION_BUILDER_VERSION,
						true
					);

					Fusion_Dynamic_JS::localize_script(
						'fusion-js-' . $this->shortcode_name,
						'fusionWooSortingVars',
						[
							'woo_ajax_filters' => fusion_library()->get_option( 'woocommerce_ajax_filters' ),
							'woo_ajax_sorting' => fusion_library()->get_option( 'woocommerce_ajax_sorting' ),
						]
					);
					
					if( ( is_shop() || is_product_taxonomy() ) && '1' === fusion_library()->get_option( 'woocommerce_ajax_sorting' ) ) {
						Fusion_Dynamic_JS::enqueue_script(
							'fusion-js-woo-filters-ajax',
							FusionBuilder::$js_folder_url . '/general/fusion-woo-filters-ajax.js',
							FusionBuilder::$js_folder_path . '/general/fusion-woo-filters-ajax.js',
							[ 'jquery', 'fusion-js-fusion_post_cards' ],
							FUSION_BUILDER_VERSION,
							true
						);

						Fusion_Dynamic_JS::localize_script(
							'fusion-js-woo-filters-ajax',
							'fusionWooFiltersAjaxVars',
							[
								'woo_ajax_filters'    => fusion_library()->get_option( 'woocommerce_ajax_filters' ),
								'woo_ajax_sorting'    => fusion_library()->get_option( 'woocommerce_ajax_sorting' ),
								'woo_ajax_categories' => fusion_library()->get_option( 'woocommerce_ajax_categories' ),
							]
						);
					}
				}
			}

			/**
			 * Load base CSS.
			 *
			 * @access public
			 * @since 3.3
			 * @return void
			 */
			public function add_css_files() {
				FusionBuilder()->add_element_css( FUSION_BUILDER_PLUGIN_DIR . 'assets/css/shortcodes/woo-sorting.min.css' );

				Fusion_Media_Query_Scripts::$media_query_assets[] = [
					'awb-woo-sorting-md',
					FUSION_BUILDER_PLUGIN_DIR . 'assets/css/media/woo-sorting-md.min.css',
					[],
					FUSION_BUILDER_VERSION,
					Fusion_Media_Query_Scripts::get_media_query_from_key( 'fusion-max-medium' ),
				];
				Fusion_Media_Query_Scripts::$media_query_assets[] = [
					'awb-woo-sorting-sm',
					FUSION_BUILDER_PLUGIN_DIR . 'assets/css/media/woo-sorting-sm.min.css',
					[],
					FUSION_BUILDER_VERSION,
					Fusion_Media_Query_Scripts::get_media_query_from_key( 'fusion-max-small' ),
				];
			}

			/**
			 * Get the style variables.
			 *
			 * @access protected
			 * @since 3.9
			 * @return string
			 */
			protected function get_style_variables() {
				$custom_vars = [];

				$css_vars_options = [
					'width'                                 => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'width_medium'                          => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'width_small'                           => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'height'                                => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'height_medium'                         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'height_small'                          => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'element_flex_direction',
					'element_flex_direction_medium',
					'element_flex_direction_small',
					'element_justify_content',
					'element_justify_content_medium',
					'element_justify_content_small',
					'element_align_items',
					'element_align_items_medium',
					'element_align_items_small',
					'column_gap'                            => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'column_gap_medium'                     => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'column_gap_small'                      => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'row_gap'                               => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'row_gap_medium'                        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'row_gap_small'                         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_top'                            => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_right'                          => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_bottom'                         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_left'                           => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_top_medium'                     => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_right_medium'                   => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_bottom_medium'                  => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_left_medium'                    => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_top_small'                      => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_right_small'                    => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_bottom_small'                   => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_left_small'                     => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],

					'dropdown_height'                       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'dropdown_width'                        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'select_font_size'                      => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'order_spacing'                         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'order_font_size'                       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'dropdown_bg_color'                     => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'dropdown_hover_bg_color'               => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'dropdown_text_color'                   => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'dropdown_text_hover_color'             => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'dropdown_border_size'                  => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'dropdown_border_color'                 => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'dropdown_border_hover_color'           => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'dropdown_border_radius'                => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],

					'product_count_width'                   => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_count_height'                  => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_count_button_label_font_size'  => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_count_button_label_text_color' => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_select_font_size'        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_count_button_size'             => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_count_text_button_sep_color'   => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_bg_color'                => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_bg_hover_color'          => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_text_color'              => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_text_hover_color'        => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_border_size'             => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_count_border_color'            => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_border_hover_color'      => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_count_border_radius'           => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],

					'product_view_button_label_font_size'   => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_view_button_label_text_color'  => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_view_button_size'              => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_view_font_size'                => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_view_bg_color'                 => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_view_bg_hover_color'           => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_view_text_color'               => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_view_text_hover_color'         => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_view_border_size'              => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'product_view_border_color'             => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_view_border_hover_color'       => [ 'callback' => [ 'Fusion_Sanitize', 'color' ] ],
					'product_view_border_radius'            => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
				];

				$custom_vars['product_count_text_button_sep'] = '"' . esc_attr( $this->args['product_count_text_button_sep'] ) . '"';

				// Dropdown Typo.
				$css_vars_options['dropdown_font_size']      = [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ];
				$css_vars_options[]                          = 'dropdown_line_height';
				$css_vars_options['dropdown_letter_spacing'] = [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ];
				$css_vars_options[]                          = 'dropdown_text_transform';

				// Font family and weight.
				$font_styles = Fusion_Builder_Element_Helper::get_font_styling( $this->args, 'dropdown_font', 'array' );
				foreach ( $font_styles as $rule => $value ) {
					$custom_vars[ 'dropdown-' . $rule ] = $value;
				}

				// Product Count Typo.
				$css_vars_options['product_count_font_size']      = [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ];
				$css_vars_options[]                               = 'product_count_line_height';
				$css_vars_options['product_count_letter_spacing'] = [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ];
				$css_vars_options[]                               = 'product_count_text_transform';

				// Font family and weight.
				$font_styles = Fusion_Builder_Element_Helper::get_font_styling( $this->args, 'product_count_font', 'array' );
				foreach ( $font_styles as $rule => $value ) {
					$custom_vars[ 'product-count-' . $rule ] = $value;
				}

				$styles = $this->get_css_vars_for_options( $css_vars_options ) . $this->get_custom_css_vars( $custom_vars );

				return $styles;
			}
		}
	}

	new FusionSC_WooSorting();

}

/**
 * Map shortcode to Avada Builder.
 */
function fusion_element_woo_sorting() {
	if ( class_exists( 'WooCommerce' ) ) {

		$fusion_settings   = awb_get_fusion_settings();
		$lookup_table_link = admin_url( 'admin.php?page=wc-status&tab=tools' );

		fusion_builder_map(
			fusion_builder_frontend_data(
				'FusionSC_WooSorting',
				[
					'name'         => esc_html__( 'Woo Sorting', 'fusion-builder' ),
					'shortcode'    => 'fusion_woo_sorting',
					'icon'         => 'fusiona-sorting-boxes',
					'help_url'     => 'https://avada.com/documentation/woo-sorting-element/',
					'subparam_map' => [
						'fusion_font_family_dropdown_font'       => 'dropdown_font',
						'fusion_font_variant_dropdown_font'      => 'dropdown_font',
						'dropdown_font_size'                     => 'dropdown_font',
						'dropdown_line_height'                   => 'dropdown_font',
						'dropdown_letter_spacing'                => 'dropdown_font',
						'dropdown_text_transform'                => 'dropdown_font',
						
						'fusion_font_family_product_count_font'  => 'product_count_font',
						'fusion_font_variant_product_count_font' => 'product_count_font',
						'product_count_font_size'                => 'product_count_font',
						'product_count_line_height'              => 'product_count_font',
						'product_count_letter_spacing'           => 'product_count_font',
						'product_count_text_transform'           => 'product_count_font',
					],
					'params'       => [
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Link Post Card Archives Element', 'fusion-builder' ),
							'description' => esc_html__( 'Enter the CSS ID of the Post Card Archives element you want to link. If left empty, all Post Card Archives elements on the same page will be affected by the sorting.', 'fusion-builder' ),
							'param_name'  => 'linked_pca',
							'value'       => '',
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'connected_sortable',
							'heading'     => esc_html__( 'Sorting Elements', 'fusion-builder' ),
							'description' => esc_html__( 'Choose the order of sorting elements.', 'fusion-builder' ),
							'empty'       => esc_html__( 'Drag items here to remove from the Sorting element.', 'fusion-builder' ),
							'param_name'  => 'elements',
							'default'     => 'orderby,count,view',
							'choices'     => [
								'orderby' => esc_html__( 'Product Order By', 'fusion-builder' ),
								'count'   => esc_html__( 'Product Count', 'fusion-builder' ),
								'view'    => esc_html__( 'Product View', 'fusion-builder' ),
							],
							'callback'    => [
								'function' => 'fusion_ajax',
								'action'   => 'get_fusion_woo_sorting',
								'ajax'     => true,
							],
						],
						[
							'type'             => 'dimension',
							'remove_from_atts' => true,
							'heading'          => esc_attr__( 'Width / Height', 'fusion-builder' ),
							'description'      => esc_attr__( 'Set a width and height for the Sorting element or leave empty for auto.', 'fusion-builder' ),
							'param_name'       => 'dimensions',
							'value'            => [
								'width'  => '',
								'height' => '',
							],
							'responsive'  => [
								'state'             => 'large',
								'additional_states' => [ 'medium', 'small' ],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Elements Flex Direction', 'fusion-builder' ),
							'description' => esc_html__( 'Defines how the elements should be positioned in the flexbox.', 'fusion-builder' ),
							'param_name'  => 'element_flex_direction',
							'default'     => 'row',
							'value'       => [
								'column' => esc_html__( 'Column', 'fusion-builder' ),
								'row'    => esc_html__( 'Row', 'fusion-builder' ),
							],
							'responsive'  => [
								'state'               => 'large',
								'additional_states'   => [ 'medium', 'small' ],
								'defaults'            => [
									'medium' => 'column',
									'small'  => 'column',
								],
								'default_value'       => true,
								'default_value_empty' => false,
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Elements Justify Content', 'fusion-builder' ),
							'description' => esc_html__( 'Defines the element justification within the flexbox.', 'fusion-builder' ),
							'param_name'  => 'element_justify_content',
							'default'     => 'flex-start',
							'grid_layout' => true,
							'back_icons'  => true,
							'icons'       => [
								'flex-start'    => '<span class="fusiona-horizontal-flex-start"></span>',
								'center'        => '<span class="fusiona-horizontal-flex-center"></span>',
								'flex-end'      => '<span class="fusiona-horizontal-flex-end"></span>',
								'space-between' => '<span class="fusiona-horizontal-space-between"></span>',
								'space-around'  => '<span class="fusiona-horizontal-space-around"></span>',
								'space-evenly'  => '<span class="fusiona-horizontal-space-evenly"></span>',
							],
							'value'       => [
								'flex-start'    => esc_html__( 'Flex Start', 'fusion-builder' ),
								'center'        => esc_html__( 'Center', 'fusion-builder' ),
								'flex-end'      => esc_html__( 'Flex End', 'fusion-builder' ),
								'space-between' => esc_html__( 'Space Between', 'fusion-builder' ),
								'space-around'  => esc_html__( 'Space Around', 'fusion-builder' ),
								'space-evenly'  => esc_html__( 'Space Evenly', 'fusion-builder' ),
							],
							'responsive'  => [
								'state'             => 'large',
								'additional_states' => [ 'medium', 'small' ],
								'default_value'     => true,
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Elements Align Items', 'fusion-builder' ),
							'description' => esc_html__( 'Defines the element alignment within the flexbox.', 'fusion-builder' ),
							'param_name'  => 'element_align_items',
							'default'     => 'center',
							'back_icons'  => true,
							'grid_layout' => true,
							'value'       => [
								'flex-start' => esc_html__( 'Flex Start', 'fusion-builder' ),
								'center'     => esc_html__( 'Center', 'fusion-builder' ),
								'flex-end'   => esc_html__( 'Flex End', 'fusion-builder' ),
							],
							'icons'       => [
								'flex-start' => '<span class="fusiona-align-top-columns"></span>',
								'center'     => '<span class="fusiona-align-center-columns"></span>',
								'flex-end'   => '<span class="fusiona-align-bottom-columns"></span>',
							],
							'responsive'  => [
								'state'             => 'large',
								'additional_states' => [ 'medium', 'small' ],
								'default_value'     => true,
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'             => 'dimension',
							'remove_from_atts' => true,
							'heading'          => esc_html__( 'Elements Gap', 'fusion-builder' ),
							'description'      => esc_html__( 'Controls the space between the chosen elements. Enter values including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'       => 'element_gap',
							'group'            => esc_html__( 'General', 'fusion-builder' ),
							'value'            => [
								'column_gap' => '6px',
								'row_gap'    => '10px',
							],
							'responsive'       => [
								'state'             => 'large',
								'additional_states' => [ 'medium', 'small' ],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'             => 'dimension',
							'remove_from_atts' => true,
							'heading'          => esc_html__( 'Margin', 'fusion-builder' ),
							'description'      => esc_html__( 'In pixels or percentage, ex: 10px or 10%.', 'fusion-builder' ),
							'param_name'       => 'margin',
							'value'            => [
								'margin_top'    => '',
								'margin_right'  => '',
								'margin_bottom' => '10px',
								'margin_left'   => '',
							],
							'responsive'       => [
								'state'             => 'large',
								'additional_states' => [ 'medium', 'small' ],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'checkbox_button_set',
							'heading'     => esc_html__( 'Element Visibility', 'fusion-builder' ),
							'param_name'  => 'hide_on_mobile',
							'value'       => fusion_builder_visibility_options( 'full' ),
							'default'     => fusion_builder_default_visibility( 'array' ),
							'description' => esc_html__( 'Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.', 'fusion-builder' ),
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'CSS Class', 'fusion-builder' ),
							'description' => esc_html__( 'Add a class to the wrapping HTML element.', 'fusion-builder' ),
							'param_name'  => 'class',
							'value'       => '',
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'CSS ID', 'fusion-builder' ),
							'description' => esc_html__( 'Add an ID to the wrapping HTML element.', 'fusion-builder' ),
							'param_name'  => 'id',
							'value'       => '',
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'multiple_select',
							'param_name'  => 'sort_options',
							'choices'     => [
								'name'       => esc_html__( 'Name', 'fusion-builder' ),
								'price'      => esc_html__( 'Price', 'fusion-builder' ),
								'date'       => esc_html__( 'Date', 'fusion-builder' ),
								'popularity' => esc_html__( 'Popularity', 'fusion-builder' ),
								'rating'     => esc_html__( 'Rating', 'fusion-builder' ),
							],
							'default'     => 'name,price,date,popularity,rating',
							'heading'     => esc_html__( 'Sort Options', 'fusion-builder' ),
							/* translators: WooCommerce lookup table link. */
							'description' => sprintf( __( 'Select the sorting options that you want to be displayed in the product sorting dropdown or select. <strong>NOTE:</strong> If the Order button is disabled and you have chosen "Price" here, it will display both, low to high, and high to low choices. If Order by Price is not working, please regenerate the Product Lookup Tables <a href="%s" target="_blank">here</a>.', 'fusion-builder' ), $lookup_table_link ),
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'callback'    => [
								'function' => 'fusion_ajax',
								'action'   => 'get_fusion_woo_sorting',
								'ajax'     => true,
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Layout', 'fusion-builder' ),
							'description' => esc_html__( 'Set the layout of the product sorting.', 'fusion-builder' ),
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'param_name'  => 'sort_layout',
							'default'     => 'dropdown',
							'value'       => [
								'select'   => esc_html__( 'Select', 'fusion-builder' ),
								'dropdown' => esc_html__( 'Dropdown', 'fusion-builder' ),
							],
							'callback'    => [
								'function' => 'fusion_ajax',
								'action'   => 'get_fusion_woo_sorting',
								'ajax'     => true,
							],
						],
						[
							'type'             => 'dimension',
							'remove_from_atts' => true,
							'heading'          => esc_html__( 'Dropdown/Select Size', 'fusion-builder' ),
							'description'      => esc_html__( 'Controls the size (width and height) of the sorting dropdown or select. Leave wdith empty for auto-width. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'       => 'dropdown_size',
							'value'            => [
								'dropdown_width'  => '180px',
								'dropdown_height' => '39px',
							],
							'group'            => esc_html__( 'Sort', 'fusion-builder' ),
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Select Font Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the font size of the sorting select. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'select_font_size',
							'value'       => '',
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'sort_layout',
									'value'    => 'select',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'             => 'typography',
							'heading'          => esc_html__( 'Dropdown Typography', 'fusion-builder' ),
							'description'      => esc_html__( 'Controls the typography of the sorting dropdown. Leave empty for the global body font family.', 'fusion-builder' ),
							'param_name'       => 'dropdown_font',
							'choices'          => [
								'font-family'    => 'dropdown_font',
								'font-size'      => 'dropdown_font_size',
								'text-transform' => 'dropdown_text_transform',
								'line-height'    => 'dropdown_line_height',
								'letter-spacing' => 'dropdown_letter_spacing',
							],
							'default'          => [
								'font-family'    => '',
								'variant'        => '400',
								'font-size'      => '',
								'text-transform' => '',
								'line-height'    => '',
								'letter-spacing' => '',
							],
							'remove_from_atts' => true,
							'global'           => true,
							'group'            => esc_html__( 'Sort', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'sort_layout',
									'value'    => 'dropdown',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_html__( 'Dropdown/Button Text Color', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the text color of the sorting dropdown and order button.', 'fusion-builder' ),
							'param_name'  => 'dropdown_text_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_text_color' ),
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'states'        => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'dropdown_text_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_text_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .awb-sort .awb-dropdown li, .fusion-woo-sorting .awb-sort .awb-order li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'dropdown_bg_color', 'dropdown_border_color' ],
							'dependency'  => [
								[
									'element'  => 'sort_layout',
									'value'    => 'dropdown',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_html__( 'Dropdown/Button Background Color', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the background color of the sorting dropdown and order button.', 'fusion-builder' ),
							'param_name'  => 'dropdown_bg_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_bg_color' ),
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'states'      => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'dropdown_hover_bg_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_bg_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .awb-sort .awb-dropdown li, .fusion-woo-sorting .awb-sort .awb-order li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'dropdown_text_color', 'dropdown_border_color' ],
							'dependency'  => [
								[
									'element'  => 'sort_layout',
									'value'    => 'dropdown',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Dropdown/Button Border Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border size of the sorting dropdown and order button. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'dropdown_border_size',
							'value'       => '1px',
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'sort_layout',
									'value'    => 'dropdown',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_html__( 'Dropdown/Button Border Color', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border color of the sorting dropdown and order button.', 'fusion-builder' ),
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'param_name'  => 'dropdown_border_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_border_color' ),
							'states'        => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'dropdown_border_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_border_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .awb-sort .awb-dropdown li, .fusion-woo-sorting .awb-sort .awb-order li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'dropdown_text_color', 'dropdown_bg_color' ],
							'dependency'  => [
								[
									'element'  => 'sort_layout',
									'value'    => 'dropdown',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Dropdown/Button Border Radius', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border radius of the sorting dropdown and order button. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'dropdown_border_radius',
							'value'       => '',
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'sort_layout',
									'value'    => 'dropdown',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Display Order Button', 'fusion-builder' ),
							'description' => __( 'Choose if the order button (ASC/DESC) should be displayed. <strong>NOTE:</strong> If it is not displayed, but the "Price" is one of the sorting options, the dropdown will display both, low to high, and high to low choices.', 'fusion-builder' ),
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'param_name'  => 'display_order_button',
							'default'     => 'yes',
							'value'       => [
								'yes' => esc_html__( 'Yes', 'fusion-builder' ),
								'no'  => esc_html__( 'No', 'fusion-builder' ),
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Order Button Spacing', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the space between the the sorting element and the order button. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'order_spacing',
							'value'       => '6px',
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'display_order_button',
									'value'    => 'yes',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Order Button Font Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the font size of the order button. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'order_font_size',
							'value'       => '',
							'group'       => esc_html__( 'Sort', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'display_order_button',
									'value'    => 'yes',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],

						[
							'type'        => 'range',
							'heading'     => esc_html__( 'Product Count Selection', 'fusion-builder' ),
							'description' => esc_html__( 'Select the number of product count to display. For best results it should equal the number of posts set in the Post Card Archives element.', 'fusion-builder' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'param_name'  => 'number_products',
							'min'         => '0',
							'max'         => '50',
							'step'        => '1',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_items' ),
							'callback'    => [
								'function' => 'fusion_ajax',
								'action'   => 'get_fusion_woo_sorting',
								'ajax'     => true,
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Layout', 'fusion-builder' ),
							'description' => esc_html__( 'Set the layout for the product count.', 'fusion-builder' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'param_name'  => 'product_count_layout',
							'default'     => 'dropdown',
							'value'       => [
								'buttons'  => esc_html__( 'Buttons', 'fusion-builder' ),
								'select'   => esc_html__( 'Select', 'fusion-builder' ),
								'dropdown' => esc_html__( 'Dropdown', 'fusion-builder' ),
							],
							'callback'    => [
								'function' => 'fusion_ajax',
								'action'   => 'get_fusion_woo_sorting',
								'ajax'     => true,
							],
						],
						[
							'type'             => 'dimension',
							'remove_from_atts' => true,
							'heading'          => esc_html__( 'Dropdown/Select Size', 'fusion-builder' ),
							'description'      => esc_html__( 'Controls the size (width and height) of the product count dropdown or select. Leave wdith empty for auto-width. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'       => 'product_count_size',
							'value'            => [
								'product_count_width'  => '180px',
								'product_count_height' => '39px',
							],
							'group'            => esc_html__( 'Count', 'fusion-builder' ),
							'or'               => true,
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'buttons',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Select Font Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the font size of the product count select. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_count_select_font_size',
							'value'       => '',
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'select',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Display Button Label', 'fusion-builder' ),
							'description' => esc_html__( 'Choose to display a label before the count buttons.', 'fusion-builder' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'param_name'  => 'product_count_label',
							'default'     => 'no',
							'value'       => [
								'yes'  => esc_html__( 'Yes', 'fusion-builder' ),
								'no'   => esc_html__( 'No', 'fusion-builder' ),
							],
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'buttons',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Button Label Font Size', 'fusion-builder' ),
							'description' => esc_html__( 'Set the font size of the product count button label. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_count_button_label_font_size',
							'value'       => '',
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_label',
									'value'    => 'yes',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_attr__( 'Button Label Text Color', 'fusion-builder' ),
							'description' => esc_attr__( 'Controls the text color of the product count button label.', 'fusion-builder' ),
							'param_name'  => 'product_count_button_label_text_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_text_color' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_label',
									'value'    => 'yes',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							]
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_html__( 'Button Layout', 'fusion-builder' ),
							'description' => esc_html__( 'Choose the layout of the product count buttons.', 'fusion-builder' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'param_name'  => 'product_count_button_layout',
							'default'     => 'connected',
							'value'       => [
								'connected' => esc_html__( 'Connected', 'fusion-builder' ),
								'separated' => esc_html__( 'Separated', 'fusion-builder' ),
								'text'      => esc_html__( 'Text', 'fusion-builder' ),
							],
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'buttons',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Button Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the size (width and height) of the product count buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_count_button_size',
							'value'       => '39px',
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'buttons',
									'operator' => '=',
								],
								[
									'element'  => 'product_count_button_layout',
									'value'    => 'text',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Text Button Separator', 'fusion-builder' ),
							'description' => esc_html__( 'Set a separator character for the text buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_count_text_button_sep',
							'value'       => '/',
							'placeholder'  => true,
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'buttons',
									'operator' => '=',
								],
								[
									'element'  => 'product_count_button_layout',
									'value'    => 'text',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_attr__( 'Text Button Separator Color', 'fusion-builder' ),
							'description' => esc_attr__( 'Controls the color of the product count text button separator.', 'fusion-builder' ),
							'param_name'  => 'product_count_text_button_sep_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_text_color' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'buttons',
									'operator' => '=',
								],
								[
									'element'  => 'product_count_button_layout',
									'value'    => 'text',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'             => 'typography',
							'heading'          => esc_html__( 'Dropdown/Button Typography', 'fusion-builder' ),
							'description'      => esc_html__( 'Controls the typography of the product count dropdown or buttons. Leave empty for the global body font family.', 'fusion-builder' ),
							'group'            => esc_html__( 'Count', 'fusion-builder' ),
							'param_name'       => 'product_count_font',
							'choices'          => [
								'font-family'    => 'product_count_font',
								'font-size'      => 'product_count_font_size',
								'text-transform' => 'product_count_text_transform',
								'line-height'    => 'product_count_line_height',
								'letter-spacing' => 'product_count_letter_spacing',
							],
							'default'          => [
								'font-family'    => '',
								'variant'        => '400',
								'font-size'      => '',
								'text-transform' => '',
								'line-height'    => '',
								'letter-spacing' => '',
							],
							'remove_from_atts' => true,
							'global'           => true,
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'select',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_attr__( 'Dropdown/Button Text Color', 'fusion-builder' ),
							'description' => esc_attr__( 'Controls the text color of the product count dropdown or buttons.', 'fusion-builder' ),
							'param_name'  => 'product_count_text_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_text_color' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'states'        => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'product_count_text_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_text_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .sort-count li, .fusion-woo-sorting .awb-count-icons li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'product_count_bg_color', 'product_count_border_color' ],
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'select',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_attr__( 'Dropdown/Button Background Color', 'fusion-builder' ),
							'description' => esc_attr__( 'Controls the background color of the product count dropdown or buttons.', 'fusion-builder' ),
							'param_name'  => 'product_count_bg_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_bg_color' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'states'      => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'product_count_bg_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_bg_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .sort-count li, .fusion-woo-sorting .awb-count-icons li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'product_count_text_color', 'product_count_border_color' ],
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'select',
									'operator' => '!=',
								],
								[
									'element'  => 'product_count_button_layout',
									'value'    => 'text',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Dropdown/Button Border Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border size of the product count dropdown or buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_count_border_size',
							'value'       => '1px',
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'select',
									'operator' => '!=',
								],
								[
									'element'  => 'product_count_button_layout',
									'value'    => 'text',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_html__( 'Dropdown/Button Border Color', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border color of the product view dropdown or buttons.', 'fusion-builder' ),
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'param_name'  => 'product_count_border_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_border_color' ),
							'states'        => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'product_count_border_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_border_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .sort-count li, .fusion-woo-sorting .awb-count-icons li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'product_count_text_color', 'product_count_bg_color' ],
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'select',
									'operator' => '!=',
								],
								[
									'element'  => 'product_count_border_size',
									'value'    => '',
									'operator' => '!=',
								],
								[
									'element'  => 'product_count_button_layout',
									'value'    => 'text',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Dropdown/Button Border Radius', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border radius of the product view dropdown or buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_count_border_radius',
							'value'       => '',
							'group'       => esc_html__( 'Count', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_count_layout',
									'value'    => 'select',
									'operator' => '!=',
								],
								[
									'element'  => 'product_count_button_layout',
									'value'    => 'text',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_attr__( 'Display Button Label', 'fusion-builder' ),
							'description' => esc_attr__( 'Choose to display a label before the view buttons.', 'fusion-builder' ),
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'param_name'  => 'product_view_label',
							'default'     => 'no',
							'value'       => [
								'yes'  => esc_attr__( 'Yes', 'fusion-builder' ),
								'no'   => esc_attr__( 'No', 'fusion-builder' ),
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Button Label Font Size', 'fusion-builder' ),
							'description' => esc_html__( 'Set the font size of the product view button label. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_view_button_label_font_size',
							'value'       => '',
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_view_label',
									'value'    => 'yes',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_attr__( 'Button Label Text Color', 'fusion-builder' ),
							'description' => esc_attr__( 'Controls the text color of the product view button label.', 'fusion-builder' ),
							'param_name'  => 'product_view_button_label_text_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_text_color' ),
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'dependency'  => [
								[
									'element'  => 'product_view_label',
									'value'    => 'yes',
									'operator' => '=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							]
						],
						[
							'type'        => 'multiple_select',
							'heading'     => esc_attr__( 'View Buttons', 'fusion-builder' ),
							'description' => esc_attr__( 'Choose which product view buttons you want to use. Either use the "General Grid" button to get what is set in your connected product element, or use the column buttons to adjust the product element columns accordingly.', 'fusion-builder' ),
							'empty'       => esc_attr__( 'Drag items here to remove from the Sorting element.', 'fusion-builder' ),
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'param_name'  => 'product_view_elements',
							'default'     => 'grid,list',
							'choices'     => [
								'grid'      => esc_attr__( 'General Grid', 'fusion-builder' ),
								'columns_2' => esc_attr__( '2 Columns', 'fusion-builder' ),
								'columns_3' => esc_attr__( '3 Columns', 'fusion-builder' ),
								'columns_4' => esc_attr__( '4 Columns', 'fusion-builder' ),
								'list'      => esc_attr__( 'List', 'fusion-builder' ),
							],
							'callback'    => [
								'function' => 'fusion_ajax',
								'action'   => 'get_fusion_woo_sorting',
								'ajax'     => true,
							],
						],
						[
							'type'        => 'radio_button_set',
							'heading'     => esc_attr__( 'Button Layout', 'fusion-builder' ),
							'description' => esc_attr__( 'Choose the layout of the product view buttons.', 'fusion-builder' ),
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'param_name'  => 'product_view_button_layout',
							'default'     => 'connected',
							'value'       => [
								'connected' => esc_attr__( 'Connected', 'fusion-builder' ),
								'separated' => esc_attr__( 'Separated', 'fusion-builder' ),
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_attr__( 'Button Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the size (width and height) of the product view buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_view_button_size',
							'value'       => '39px',
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_attr__( 'Font Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the font size of the product view buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_view_font_size',
							'value'       => '12px',
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_attr__( 'Text Color', 'fusion-builder' ),
							'description' => esc_attr__( 'Controls the text color of the product view buttons.', 'fusion-builder' ),
							'param_name'  => 'product_view_text_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_text_color' ),
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'states'        => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'product_view_text_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_text_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .awb-product-view li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'product_view_bg_color', 'product_view_border_color' ],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_attr__( 'Background Color', 'fusion-builder' ),
							'description' => esc_attr__( 'Controls the background color of the product view buttons.', 'fusion-builder' ),
							'param_name'  => 'product_view_bg_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_bg_color' ),
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'states'      => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'product_view_bg_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_bg_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .awb-product-view li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'product_view_text_color', 'product_view_border_color' ],
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Border Size', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border size of the product view buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_view_border_size',
							'value'       => '1px',
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						[
							'type'        => 'colorpickeralpha',
							'heading'     => esc_html__( 'Border Color', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border color of the product view buttons.', 'fusion-builder' ),
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'param_name'  => 'product_view_border_color',
							'value'       => '',
							'default'     => $fusion_settings->get( 'woo_dropdown_border_color' ),
							'states'        => [
								'hover' => [
									'label'      => esc_html__( 'Hover / Active', 'fusion-builder' ),
									'param_name' => 'product_view_border_hover_color',
									'default'    => $fusion_settings->get( 'woo_dropdown_border_color' ),
									'preview'    => [
										'selector' => '.fusion-woo-sorting .awb-product-view li',
										'type'     => 'class',
										'toggle'   => 'hover',
									],
								],
							],
							'connect-state' => [ 'product_view_text_color', 'product_view_bg_color' ],
							'dependency'  => [
								[
									'element'  => 'product_view_border_size',
									'value'    => '',
									'operator' => '!=',
								],
							],
							'callback'    => [
								'function' => 'fusion_style_block',
							],	
						],
						[
							'type'        => 'textfield',
							'heading'     => esc_html__( 'Border Radius', 'fusion-builder' ),
							'description' => esc_html__( 'Controls the border radius of the product view buttons. Enter value including any valid CSS unit, ex: 20px.', 'fusion-builder' ),
							'param_name'  => 'product_view_border_radius',
							'value'       => '',
							'group'       => esc_html__( 'View', 'fusion-builder' ),
							'callback'    => [
								'function' => 'fusion_style_block',
							],
						],
						'fusion_conditional_render_placeholder' => [],
					],
					'callback'     => [
						'function' => 'fusion_ajax',
						'action'   => 'get_fusion_woo_sorting',
						'ajax'     => true,
					],
				]
			)
		);
	}
}
add_action( 'fusion_builder_wp_loaded', 'fusion_element_woo_sorting' );