Feature/wpce 330 algolia autocomplete debounce

CHANGELOG.md

@@ -1,3 +1,23 @@
+## NEXT
+* Added an option to set the debounce timeout value which applies to all indexes by default, but can be customized for each index with a filter:
+
+Dynamic filter name: `algolia_autocomplete_debounce_{$index_name}_{$index_type}`
+
+Where `$index_name` is defined by the Index name prefix set on the WP Search with Algolia settings page and `$index_type` is the type of index.
+
+Assuming `wp_` is the Index name prefix, the debounce timeout filters would be:
+```
+algolia_autocomplete_debounce_wp_searchable_posts
+algolia_autocomplete_debounce_wp_post
+algolia_autocomplete_debounce_wp_page
+algolia_autocomplete_debounce_wp_my_custom_post_type
+algolia_autocomplete_debounce_wp_users
+algolia_autocomplete_debounce_wp_terms_category
+algolia_autocomplete_debounce_wp_terms_post_tag
+algolia_autocomplete_debounce_wp_terms_my_custom_taxonomy
+```
+Note that the Algolia Autocomplete settings must be saved after creating one of the above filters.
+
 ## 2.8.0
 * Added: Filter to customize Algolia SearchClient configuration with connect/read/write timeouts.
 * Updated: Prevent table content from being concatenated. Thanks @rodrigo-arias

README.txt

@@ -1,5 +1,5 @@
 === WP Search with Algolia ===
-Contributors: WebDevStudios, williamsba1, tw2113, mrasharirfan, scottbasgaard, gregrickaby, richaber
+Contributors: WebDevStudios, williamsba1, tw2113, mrasharirfan, scottbasgaard, gregrickaby, richaber, daveromsey
 Tags: search, algolia, autocomplete, instantsearch, relevance search, faceted search, find-as-you-type search, ecommerce, seo, woocommerce, advanced search
 Requires at least: 5.0
 Tested up to: 6.5

includes/admin/class-algolia-admin-page-autocomplete.php

@@ -141,6 +141,14 @@ public function add_settings() {
 			$this->section
 		);
 
+		add_settings_field(
+			'algolia_autocomplete_debounce',
+			esc_html__( 'Autocomplete Debounce', 'wp-search-with-algolia' ),
+			array( $this, 'autocomplete_debounce_callback' ),
+			$this->slug,
+			$this->section
+		);
+
 		add_settings_field(
 			'algolia_autocomplete_config',
 			esc_html__( 'Autocomplete Config', 'wp-search-with-algolia' ),
@@ -150,6 +158,7 @@ public function add_settings() {
 		);
 
 		register_setting( $this->option_group, 'algolia_autocomplete_enabled', array( $this, 'sanitize_autocomplete_enabled' ) );
+		register_setting( $this->option_group, 'algolia_autocomplete_debounce', array( $this, 'sanitize_autocomplete_debounce' ) );
 		register_setting( $this->option_group, 'algolia_autocomplete_config', array( $this, 'sanitize_autocomplete_config' ) );
 	}
 
@@ -169,6 +178,25 @@ public function autocomplete_enabled_callback() {
 		<?php
 	}
 
+	/**
+	 * Callback to print the autocomplete debounce value.
+	 *
+	 * @author WebDevStudios <[email protected]>
+	 * @since NEXT
+	 */
+	public function autocomplete_debounce_callback() {
+		$value    = $this->settings->get_autocomplete_debounce();
+		$indices  = $this->autocomplete_config->get_form_data();
+		$disabled = empty( $indices ) ? 'disabled ' : '';
+		?>
+		<input type="number" name="algolia_autocomplete_debounce" class="small-text" min="0" value="<?php echo esc_attr( $value ); ?>" <?php echo esc_html( $disabled ); ?>/>
+		<p class="description" id="home-description">
+			<?php esc_html_e( 'Enter the debounce timeout value in miliseconds. Use 0 (default) to disable debounce.', 'wp-search-with-algolia' ); ?>
+			<a href="https://www.algolia.com/doc/ui-libraries/autocomplete/guides/debouncing-sources/" target="_blank"><?php esc_html_e( 'Debouncing sources documentation', 'wp-search-with-algolia' ); ?></a>
+		</p>
+		<?php
+	}
+
 	/**
 	 * Sanitize the Autocomplete enabled setting.
 	 *
@@ -191,6 +219,20 @@ public function sanitize_autocomplete_enabled( $value ) {
 		return 'yes' === $value ? 'yes' : 'no';
 	}
 
+	/**
+	 * Sanitize the Autocomplete debounce setting.
+	 *
+	 * @author WebDevStudios <[email protected]>
+	 * @since  NEXT
+	 *
+	 * @param int $value The original value.
+	 *
+	 * @return int The sanitized value.
+	 */
+	public function sanitize_autocomplete_debounce( $value ) {
+		return intval( $value );
+	}
+
 	/**
 	 * Autocomplete Config Callback.
 	 *

includes/class-algolia-settings.php

@@ -27,6 +27,7 @@ public function __construct() {
 		add_option( 'algolia_api_key', '' );
 		add_option( 'algolia_synced_indices_ids', array() );
 		add_option( 'algolia_autocomplete_enabled', 'no' );
+		add_option( 'algolia_autocomplete_debounce', 0 );
 		add_option( 'algolia_autocomplete_config', array() );
 		add_option( 'algolia_override_native_search', 'native' );
 		add_option( 'algolia_index_name_prefix', 'wp_' );
@@ -278,6 +279,28 @@ public function get_autocomplete_enabled() {
 		return apply_filters( 'algolia_should_override_autocomplete', $enabled );
 	}
 
+	/**
+	 * Get the autocomplete debounce timeout settings value in milliseconds.
+	 * 0 will disable the feature (default).
+	 *
+	 * @author  WebDevStudios <[email protected]>
+	 * @since   next
+	 *
+	 * @return int Debounce value in milliseconds.
+	 */
+	public function get_autocomplete_debounce() {
+		$debounce = (int) get_option( 'algolia_autocomplete_debounce', 0 );
+
+		/**
+		 * Filters the autocomplete debounce option for algolia autocomplete.
+		 *
+		 * @since NEXT
+		 *
+		 * @param int Debounce value in milliseconds.
+		 */
+		return (int) apply_filters( 'algolia_autocomplete_debounce', $debounce );
+	}
+
 	/**
 	 * Get the autocomplete config.
 	 *

includes/class-algolia-utils.php

@@ -302,42 +302,42 @@ public static function pro_cta_content() {
 					<?php $svg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0077ff" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'; ?>
 					<h4><?php esc_html_e( 'WooCommerce Support', 'wp-search-with-algolia' ); ?></h4>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Index product SKUs, prices, short descriptions and product dimensions/weight for display.', 'wp-search-with-algolia' ); ?></span>
 					</span>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Index product total sales ratings for relevance.', 'wp-search-with-algolia' ); ?></span>
 					</span>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Index product total and average ratings for relevance.', 'wp-search-with-algolia' ); ?></span>
 					</span>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Control whether or not sold out products are indexed', 'wp-search-with-algolia' ); ?></span>
 					</span>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Control whether or not "shop only" or "hidden" products are indexed.', 'wp-search-with-algolia' ); ?></span>
 					</span>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Amend indexing to only include WooCommerce products.', 'wp-search-with-algolia' ); ?></span>
 					</span>
 				</div>
 				<div>
 					<h4><?php esc_html_e( 'Additional Features', 'wp-search-with-algolia' ); ?></h4>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Multisite indexing into a single network index to provide a global Algolia-powered search experience.', 'wp-search-with-algolia' ); ?></span>
 					</span>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Fine tune indexing on selected pieces of content', 'wp-search-with-algolia' ); ?></span>
 					</span>
 					<span class="algolia-pro-feature">
-						<?php echo $svg; ?>
+						<?php echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- This is a hardcoded SVG. ?>
 						<span><?php esc_html_e( 'Yoast SEO, All in One SEO, Rank Math SEO, SEOPress, and The SEO Framework Support', 'wp-search-with-algolia' ); ?></span>
 					</span>
 				</div>

includes/indices/class-algolia-index.php

@@ -729,16 +729,20 @@ abstract protected function get_items( $page, $batch_size );
 	 * @author WebDevStudios <[email protected]>
 	 * @since  1.0.0
 	 *
-	 * @return array
+	 * @return array Autocomplete config.
 	 */
 	public function get_default_autocomplete_config() {
+		$plugin_settings = new \Algolia_Settings();
+		$debounce        = $plugin_settings->get_autocomplete_debounce();
+
 		return array(
 			'index_id'        => $this->get_id(),
 			'index_name'      => $this->get_name(),
 			'label'           => $this->get_admin_name(),
 			'admin_name'      => $this->get_admin_name(),
 			'position'        => 10,
 			'max_suggestions' => 5,
+			'debounce'        => $debounce,
 			'tmpl_suggestion' => 'autocomplete-post-suggestion',
 		);
 	}

includes/indices/class-algolia-posts-index.php

@@ -66,6 +66,37 @@ public function supports( $item ) {
 		return $item instanceof WP_Post && $item->post_type === $this->post_type;
 	}
 
+	/**
+	 * Get default autocomplete config.
+	 *
+	 * @author WebDevStudios <[email protected]>
+	 * @since  NEXT
+	 *
+	 * @return array Autocomplete config.
+	 */
+	public function get_default_autocomplete_config() {
+		$default_config = parent::get_default_autocomplete_config();
+		$index_name     = $this->get_name();
+
+		/**
+		 * Filters the autocomplete debounce option for this index.
+		 *
+		 * @since NEXT
+		 *
+		 * @param int Debounce value in milliseconds.
+		 */
+		$debounce = apply_filters(
+			"algolia_autocomplete_debounce_{$index_name}",
+			$default_config['debounce']
+		);
+
+		$config = array(
+			'debounce' => $debounce,
+		);
+
+		return array_merge( $default_config, $config );
+	}
+
 	/**
 	 * Get the admin name for this index.
 	 *

includes/indices/class-algolia-searchable-posts-index.php

@@ -66,6 +66,37 @@ public function supports( $item ) {
 		return $item instanceof WP_Post && in_array( $item->post_type, $this->post_types, true );
 	}
 
+	/**
+	 * Get default autocomplete config.
+	 *
+	 * @author WebDevStudios <[email protected]>
+	 * @since  NEXT
+	 *
+	 * @return array Autocomplete config.
+	 */
+	public function get_default_autocomplete_config() {
+		$default_config = parent::get_default_autocomplete_config();
+		$index_name     = $this->get_name();
+
+		/**
+		 * Filters the autocomplete debounce value for this index.
+		 *
+		 * @since NEXT
+		 *
+		 * @param int Debounce value in milliseconds.
+		 */
+		$debounce = apply_filters(
+			"algolia_autocomplete_debounce_{$index_name}",
+			$default_config['debounce']
+		);
+
+		$config = array(
+			'debounce' => $debounce,
+		);
+
+		return array_merge( $default_config, $config );
+	}
+
 	/**
 	 * Get the admin name for this index.
 	 *

includes/indices/class-algolia-terms-index.php

@@ -243,16 +243,32 @@ public function supports( $item ) {
 	 * @author WebDevStudios <[email protected]>
 	 * @since  1.0.0
 	 *
-	 * @return array
+	 * @return array Autocomplete config.
 	 */
 	public function get_default_autocomplete_config() {
+		$default_config = parent::get_default_autocomplete_config();
+		$index_name     = $this->get_name();
+
+		/**
+		 * Filters the autocomplete debounce option for this index.
+		 *
+		 * @since NEXT
+		 *
+		 * @param int Debounce value in milliseconds.
+		 */
+		$debounce = apply_filters(
+			"algolia_autocomplete_debounce_{$index_name}",
+			$default_config['debounce']
+		);
+
 		$config = array(
 			'position'        => 20,
 			'max_suggestions' => 3,
+			'debounce'        => $debounce,
 			'tmpl_suggestion' => 'autocomplete-term-suggestion',
 		);
 
-		return array_merge( parent::get_default_autocomplete_config(), $config );
+		return array_merge( $default_config, $config );
 	}
 
 	/**

includes/indices/class-algolia-users-index.php

@@ -229,16 +229,32 @@ public function supports( $item ) {
 	 * @author WebDevStudios <[email protected]>
 	 * @since  1.0.0
 	 *
-	 * @return array
+	 * @return array Autocomplete config.
 	 */
 	public function get_default_autocomplete_config() {
+		$default_config = parent::get_default_autocomplete_config();
+		$index_name     = $this->get_name();
+
+		/**
+		 * Filters the autocomplete debounce value for this index.
+		 *
+		 * @since NEXT
+		 *
+		 * @param int Debounce value in milliseconds.
+		 */
+		$debounce = apply_filters(
+			"algolia_autocomplete_debounce_{$index_name}",
+			$default_config['debounce']
+		);
+
 		$config = array(
 			'position'        => 30,
 			'max_suggestions' => 3,
+			'debounce       ' => $debounce,
 			'tmpl_suggestion' => 'autocomplete-user-suggestion',
 		);
 
-		return array_merge( parent::get_default_autocomplete_config(), $config );
+		return array_merge( $default_config, $config );
 	}
 
 	/**

templates/autocomplete.php

@@ -114,6 +114,7 @@
 					highlightPreTag: '__ais-highlight__',
 					highlightPostTag: '__/ais-highlight__'
 				} ),
+				debounce: config['debounce'],
 				templates: {
 					header: function () {
 						return wp.template( 'autocomplete-header' )( {