77 lines
2.8 KiB
PHP
77 lines
2.8 KiB
PHP
<?php
|
|
/**
|
|
* AJAX Search — reusable, accessible, combobox-like (without over-engineered ARIA).
|
|
*
|
|
* Reusable by: desktop header, mobile header, future overlay.
|
|
* JS: assets/js/search.js handles fetch, debounce, stale protection, keyboard.
|
|
*
|
|
* Args: ['placeholder'=>string, 'action'=>string, 'id'=>string|null]
|
|
*
|
|
* @package XShop
|
|
*/
|
|
|
|
declare(strict_types=1);
|
|
|
|
defined('ABSPATH') || exit;
|
|
|
|
$uid = $args['id'] ?? ('xshop-ajax-search-' . wp_unique_id());
|
|
$placeholder = $args['placeholder'] ?? esc_html__('Search products…', 'xshop');
|
|
$action = $args['action'] ?? home_url('/');
|
|
$minLength = 2;
|
|
$limit = 6;
|
|
?>
|
|
<div class="xshop-search" data-xshop-search>
|
|
<form role="search" method="get" action="<?php echo esc_url($action); ?>" class="xshop-search__form" data-xshop-search-form>
|
|
<label class="xshop-sr-only" for="<?php echo esc_attr($uid); ?>"><?php esc_html_e('Search products', 'xshop'); ?></label>
|
|
<input
|
|
type="search"
|
|
id="<?php echo esc_attr($uid); ?>"
|
|
name="s"
|
|
value="<?php echo esc_attr(get_search_query()); ?>"
|
|
placeholder="<?php echo esc_attr($placeholder); ?>"
|
|
autocomplete="off"
|
|
aria-label="<?php esc_attr_e('Search products', 'xshop'); ?>"
|
|
aria-expanded="false"
|
|
aria-controls="<?php echo esc_attr($uid); ?>-listbox"
|
|
aria-autocomplete="list"
|
|
role="combobox"
|
|
data-xshop-search-input
|
|
data-min-length="<?php echo esc_attr((string) $minLength); ?>"
|
|
data-limit="<?php echo esc_attr((string) $limit); ?>"
|
|
/>
|
|
<?php if (xshop_has_woocommerce()): ?>
|
|
<input type="hidden" name="post_type" value="product" />
|
|
<?php endif; ?>
|
|
<button type="submit" class="xshop-btn xshop-btn--primary" aria-label="<?php esc_attr_e('Search', 'xshop'); ?>"><?php esc_html_e('Search', 'xshop'); ?></button>
|
|
</form>
|
|
|
|
<div
|
|
id="<?php echo esc_attr($uid); ?>-listbox"
|
|
class="xshop-search__dropdown"
|
|
role="listbox"
|
|
hidden
|
|
data-xshop-search-dropdown
|
|
>
|
|
<div class="xshop-search__status xshop-sr-only" aria-live="polite" aria-atomic="true" data-xshop-search-status></div>
|
|
|
|
<div class="xshop-search__loading" hidden data-xshop-search-loading>
|
|
<span class="xshop-loading__spinner" aria-hidden="true"></span>
|
|
<span><?php esc_html_e('Searching…', 'xshop'); ?></span>
|
|
</div>
|
|
|
|
<ul class="xshop-search__results" role="presentation" data-xshop-search-results></ul>
|
|
|
|
<div class="xshop-search__empty" hidden data-xshop-search-empty>
|
|
<p><?php esc_html_e('No products found.', 'xshop'); ?></p>
|
|
</div>
|
|
|
|
<div class="xshop-search__error" hidden data-xshop-search-error>
|
|
<p><?php esc_html_e('Search is temporarily unavailable. Press Enter to search.', 'xshop'); ?></p>
|
|
</div>
|
|
|
|
<a href="#" class="xshop-search__viewall" hidden data-xshop-search-viewall>
|
|
<?php esc_html_e('View all results', 'xshop'); ?> →
|
|
</a>
|
|
</div>
|
|
</div>
|