| 1 |
<?php |
| 2 |
|
| 3 |
namespace FluentCart\App\Services\Renderer; |
| 4 |
use FluentCart\Api\StoreSettings; |
| 5 |
use FluentCart\Framework\Support\Arr; |
| 6 |
use FluentCart\App\Vite; |
| 7 |
use FluentCart\App\Helpers\Helper; |
| 8 |
use FluentCart\Api\Resource\ShopResource; |
| 9 |
|
| 10 |
class SearchBarRenderer |
| 11 |
{ |
| 12 |
|
| 13 |
protected $config; |
| 14 |
|
| 15 |
public function __construct(array $config = []) |
| 16 |
{ |
| 17 |
$this->config = $config; |
| 18 |
|
| 19 |
} |
| 20 |
|
| 21 |
public function render(){ |
| 22 |
$wrapperAttributes = [ |
| 23 |
'class' => 'fluent-cart-search-bar-app-wrapper', |
| 24 |
'data-link-with-shop-app' => esc_attr(Arr::get($this->config, 'link_with_shop_app', false)), |
| 25 |
'data-fluent-cart-search-bar-app-wrapper' => '', |
| 26 |
'data-url-mode' => esc_attr(Arr::get($this->config, 'url_mode', '')), |
| 27 |
]; |
| 28 |
|
| 29 |
?> |
| 30 |
|
| 31 |
<div <?php RenderHelper::renderAtts($wrapperAttributes); ?> role="search"> |
| 32 |
<div class="fluent-cart-search-bar-app-wrapper-header-wrap"> |
| 33 |
<?php |
| 34 |
if (Arr::get($this->config, 'category_mode', '')){ |
| 35 |
$this->renderCategory(); |
| 36 |
} |
| 37 |
?> |
| 38 |
|
| 39 |
<?php $this->renderInput(); ?> |
| 40 |
</div> |
| 41 |
|
| 42 |
<?php $this->renderSearchResult(); ?> |
| 43 |
</div> |
| 44 |
|
| 45 |
|
| 46 |
<?php |
| 47 |
} |
| 48 |
|
| 49 |
public function renderCategory(){ |
| 50 |
?> |
| 51 |
|
| 52 |
<div class="fluent-cart-search-bar-app-wrapper-select-container" style="display: inline;"> |
| 53 |
<label for="fluent-cart-search-category" class="sr-only"> |
| 54 |
<?php esc_html_e('Select Category', 'fluent-cart'); ?> |
| 55 |
</label> |
| 56 |
|
| 57 |
<select |
| 58 |
id="fluent-cart-search-category" |
| 59 |
data-fluent-cart-search-bar-app-taxonomy |
| 60 |
name="termId" |
| 61 |
aria-describedby="category-help" |
| 62 |
> |
| 63 |
<option selected value=""> |
| 64 |
<?php echo esc_html__('Select Category', 'fluent-cart'); ?> |
| 65 |
</option> |
| 66 |
|
| 67 |
<?php if (Arr::get($this->config, 'termData', [])): ?> |
| 68 |
<?php foreach (Arr::get($this->config, 'termData', []) as $term): ?> |
| 69 |
<option value="<?php echo esc_attr(Arr::get($term, 'termId', '')); ?>"> |
| 70 |
<?php echo esc_html(Arr::get($term, 'termName', '')); ?> |
| 71 |
</option> |
| 72 |
<?php endforeach; ?> |
| 73 |
<?php endif; ?> |
| 74 |
|
| 75 |
</select> |
| 76 |
|
| 77 |
<small id="category-help" class="sr-only"> |
| 78 |
<?php esc_html_e('Filter search results by category', 'fluent-cart'); ?> |
| 79 |
</small> |
| 80 |
</div> |
| 81 |
|
| 82 |
<?php |
| 83 |
} |
| 84 |
|
| 85 |
public function renderInput(){ |
| 86 |
?> |
| 87 |
|
| 88 |
<div class="fluent-cart-search-bar-app-input-wrap"> |
| 89 |
<label for="fluent-cart-search-input" class="sr-only"> |
| 90 |
<?php esc_html_e('Search Products', 'fluent-cart'); ?> |
| 91 |
</label> |
| 92 |
|
| 93 |
<div class="fluent-cart-search-bar-app-input-search"> |
| 94 |
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18" fill="none"> |
| 95 |
<path d="M13.583 13.583L17.333 17.333" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> |
| 96 |
<path d="M15.666 8.1665C15.666 4.02437 12.3082 0.666504 8.16601 0.666504C4.02388 0.666504 0.666016 4.02437 0.666016 8.1665C0.666016 12.3086 4.02388 15.6665 8.16601 15.6665C12.3082 15.6665 15.666 12.3086 15.666 8.1665Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/> |
| 97 |
</svg> |
| 98 |
</div> |
| 99 |
|
| 100 |
<input |
| 101 |
id="fluent-cart-search-input" |
| 102 |
class="fluent-cart-search-bar-app-input" |
| 103 |
data-fluent-cart-search-bar |
| 104 |
type="text" |
| 105 |
placeholder="<?php echo esc_attr(__('Search Products...', 'fluent-cart')) ?>" |
| 106 |
aria-describedby="search-help" |
| 107 |
/> |
| 108 |
|
| 109 |
<button |
| 110 |
class="fluent-cart-search-bar-app-input-clear" |
| 111 |
data-fluent-cart-search-clear |
| 112 |
title="<?php echo esc_attr(__('Clear search', 'fluent-cart')); ?>" |
| 113 |
type="button" |
| 114 |
aria-label="<?php esc_attr_e('Clear search', 'fluent-cart'); ?>" |
| 115 |
aria-controls="fluent-cart-search-input" |
| 116 |
> |
| 117 |
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18" fill="none"> |
| 118 |
<path d="M11.4995 11.5L6.5 6.5M6.50053 11.5L11.5 6.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> |
| 119 |
<path d="M17.3337 8.99967C17.3337 4.3973 13.6027 0.66634 9.00033 0.66634C4.39795 0.66634 0.666992 4.3973 0.666992 8.99967C0.666992 13.602 4.39795 17.333 9.00033 17.333C13.6027 17.333 17.3337 13.602 17.3337 8.99967Z" stroke="currentColor" stroke-width="1.2"/> |
| 120 |
</svg> |
| 121 |
</button> |
| 122 |
|
| 123 |
<small id="search-help" class="sr-only"> |
| 124 |
<?php esc_html_e('Type to search products', 'fluent-cart'); ?> |
| 125 |
</small> |
| 126 |
</div> |
| 127 |
|
| 128 |
<?php |
| 129 |
} |
| 130 |
|
| 131 |
public function renderSearchResult() { |
| 132 |
?> |
| 133 |
|
| 134 |
<div class="fluent-cart-search-bar-app-wrapper-result-wrap" style="display: none;"> |
| 135 |
<h5 id="search-suggestions-heading"><?php esc_html_e('Suggestions', 'fluent-cart'); ?></h5> |
| 136 |
|
| 137 |
<ul |
| 138 |
id="search-suggestions-list" |
| 139 |
class="fluent-cart-search-bar-app-list-wrapper" |
| 140 |
data-fluent-cart-search-bar-lists-wrapper |
| 141 |
role="list" |
| 142 |
aria-labelledby="search-suggestions-heading" |
| 143 |
> |
| 144 |
<?php $this->renderResultItems(); ?> |
| 145 |
</ul> |
| 146 |
</div> |
| 147 |
|
| 148 |
<?php |
| 149 |
} |
| 150 |
|
| 151 |
public function renderResultItems($products = []) |
| 152 |
{ |
| 153 |
$pageTarget = (Arr::get($this->config, 'url_mode', '') == 'new-tab') ? 'target="_blank"' : ''; |
| 154 |
|
| 155 |
foreach ($products as $product) { |
| 156 |
$productTitle = Arr::get($product, 'post_title', ''); |
| 157 |
$productUrl = Arr::get($product, 'guid', ''); |
| 158 |
$aria_label = sprintf( |
| 159 |
/* translators: 1: Product title */ |
| 160 |
esc_attr__('View product: %1$s', 'fluent-cart'), |
| 161 |
esc_html($productTitle) |
| 162 |
); |
| 163 |
?> |
| 164 |
<li data-fluent-cart-search-bar-lists-list-item style="z-index: 9999;" role="listitem"> |
| 165 |
<a |
| 166 |
href="<?php echo esc_url($productUrl) ?>" |
| 167 |
<?php echo esc_html($pageTarget); ?> |
| 168 |
aria-label="<?php echo esc_attr($aria_label); ?>" |
| 169 |
> |
| 170 |
<?php echo esc_html($productTitle); ?> |
| 171 |
</a> |
| 172 |
</li> |
| 173 |
<?php |
| 174 |
} |
| 175 |
} |
| 176 |
|
| 177 |
} |
| 178 |
|