Ενσωμάτωση στο web
Βήμα προς βήμα οδηγίες για να ενσωματώσετε το widget αναζήτησης στο site σας.
Τρόποι ενσωμάτωσης
Το Qwik.Select λειτουργεί με κάθε website ή εφαρμογή που μπορεί να κάνει HTTP requests. Επιλέξτε την προσέγγιση που ταιριάζει καλύτερα στο stack και στις απαιτήσεις σας:
ΠΡΟΤΕΙΝΟΜΕΝΟ
📄 Απλό widget
Ο πιο εύκολος τρόπος να προσθέσετε αναζήτηση: αρκεί να βάλετε το widget script και ένα input field.
- Δεν χρειάζεται κώδικας
- Έτοιμο styled dropdown
- Βελτιστοποιημένο για mobile
🏗️ Ενσωμάτωση με CMS
Λειτουργεί με OpenCart, WordPress και άλλες πλατφόρμες.
- Συμβατότητα με plugins
- Ενσωμάτωση με theme
- Βελτιστοποιημένο για e-commerce
Ενσωμάτωση απλού widget
Ο πιο εύκολος τρόπος να προσθέσετε το qwik.select σε οποιοδήποτε website: αρκεί να βάλετε το widget script και ένα input field:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Store - Product Search</title>
<!-- Your existing CSS -->
</head>
<body>
<!-- Your site header and content -->
<!-- Search Input -->
<div class="search-section">
<h2>Find Products</h2>
<input
type="text"
id="product-search"
placeholder="Search for products..."
autocomplete="off"
class="search-input"
/>
</div>
<!-- Qwik.select Widget Script -->
<script type="text/javascript">
(function() {
// Load QwikSelectWidget script
const script = document.createElement("script");
script.src = "https://cdn.qwik.select/widget-latest.min.js?" + Date.now();
function initializeWidget() {
// Only initialize if widget is loaded
if (window.QwikSelectWidget && window.QwikSelectWidget.default) {
new window.QwikSelectWidget.default({
"id": "your-site-slug", // Your site slug from Studio
"searchInputSelector": "#product-search", // CSS selector for search field
"preserveInputStyle": false // Preserve original input styling (default: false)
});
}
}
script.onload = function() {
// Wait for DOM to be ready before initializing
if (document.readyState === "loading") {
// DOM still loading, wait for DOMContentLoaded
document.addEventListener("DOMContentLoaded", initializeWidget);
} else {
// DOM already loaded, initialize immediately
initializeWidget();
console.log("Qwik.Select widget initialized.");
}
};
document.head.appendChild(script);
})();
</script>
<!-- Your existing JavaScript -->
</body>
</html>Επιλογές ρύθμισης
Απαραίτητη ρύθμιση
{
"id": "your-site-slug", // Your site slug from Studio
"searchInputSelector": "#product-search" // CSS selector for search field
}Προαιρετική ρύθμιση
{
"id": "your-site-slug", // Your site slug from Studio
"searchInputSelector": "#product-search", // CSS selector for search field
"preserveInputStyle": false // Preserve original input styling (default: false)
}preserveInputStyle: Ορίστε `true` για να κρατήσετε το δικό σας styling στο input ή `false` για να χρησιμοποιήσετε το styling του widget.
Σημαντικές σημειώσεις
- Το widget δημιουργεί αυτόματα styled dropdown με αποτελέσματα αναζήτησης.
- Βεβαιωθείτε ότι το XML feed έχει συγχρονιστεί και το site είναι ενεργό στο Studio.
- Το widget είναι responsive και περιλαμβάνει υποστήριξη αφής.