內容簡介
總結：Simple AJAX Product Search for WooCommerce 使用 AJAX 技術提供快速且便於使用的產品搜索體驗。它可以即時顯示結果在全屏覆蓋層上，增強購物體驗並保持用戶參與度。
問題與答案：
1. 這個外掛提供了哪些特點？
- 透過 AJAX 技術即時顯示搜索結果
- 手機友好的覆蓋式設計
- 可將搜索切換添加到選單或通過短代碼
- 可定制顏色、布局和外觀
- 完全相容 WooCommerce
2. 如何在網站上使用 toggle 按鈕？
- 您可以在任何地方使用以下短代碼來顯示切換按鈕：[sapsfwc_button label="Search Products"]
3. 是否可以查看外掛的原始碼？
- 是的，外掛中包含了易於閱讀的編譯區塊文件的原始碼。
4. 這個外掛需要哪些建構步驟？
- 需要 Node.js。在區塊目錄內執行以下指令：
1. cd blocks/simple-ajax-product-search-toggle
2. npm install
3. npm run build（輸出到 /build）
5. 是否有第三方庫？
- 是的，第三方庫包括 assets/js/wp-color-picker-alpha.min.js
- 來源和專案：https://github.com/kallookoo/wp-color-picker-alpha
- 授權：GPLv2 或更新版本
6. 這個外掛是由誰開發的？
- 由 [TFB Global Ltd] 開發。
外掛標籤
開發者團隊
② 後台搜尋「Simple AJAX Product Search for WooCommerce」→ 直接安裝（推薦）
原文外掛簡介
🚀 Simple AJAX Product Search for WooCommerce delivers a fast, modern and intuitive product search experience that helps customers find items instantly without reloading the page.
As the user types, results appear immediately in a clean, full screen overlay. This provides a distraction free search experience that improves product discovery and increases conversions.
💡 Lightweight, responsive and compatible with major themes, this plugin integrates seamlessly with WooCommerce stores of any size.
✨ Free Features (✔ included)
✔ Instant AJAX product search
✔ Full screen responsive search overlay
✔ Smooth animations & modern design
✔ Add a search toggle to your navigation menu
✔ Dedicated Gutenberg block for easy placement
✔ Shortcode support:
[sapsfwc_button label=”Search Products”]
✔ Works with any WooCommerce compatible theme
✔ Fully responsive (mobile, tablet, desktop)
✔ Lightweight & fast — minimal impact on performance
🔥 Pro Features (🚀 upgrade available)
Unlock additional layout and display options with Simple AJAX Product Search for WooCommerce Pro:
📐 Advanced Layout Controls
– Load More results button
– Products Per Page
– Columns on Desktop
– Columns on Mobile
– Custom Container Width
– Adjustable Screen Height
🎨 Branding Enhancements
– Logo Image
– Max Logo Width
– Max Logo Height
These options let you fine-tune the search overlay and improve product visibility.
⌨ Shortcode
Use this shortcode anywhere you’d like to display the toggle button:
[sapsfwc_button label=”Search Products”]
🧩 Gutenberg Block
Insert the search toggle directly inside templates, headers or page layouts using the included block:
Simple AJAX Product Search Toggle
Source Code
The human-readable source for compiled block files is included in the plugin.
Block source (for files under blocks/…/build):
– blocks/simple-ajax-product-search-toggle/ (edit.js, save.js, index.js, editor.scss, style.scss)
Build Instructions
Requires Node.js. From within the block directory:
cd blocks/simple-ajax-product-search-toggle
npm install
npm run build (outputs to /build)
Third-Party Libraries
wp-color-picker-alpha
File: assets/js/wp-color-picker-alpha.min.js
Source: https://github.com/kallookoo/wp-color-picker-alpha
License: GPLv2 or later
Credits
Developed by TFB Global Ltd
