Qwik.SelectΤεκμηρίωση
Επιστροφή στον κύριο ιστότοπο →
Τεκμηρίωση / Ξεκινώντας

Γρήγορη εκκίνηση

Ακολουθήστε τα βασικά βήματα για να ενεργοποιήσετε την αναζήτηση και να συνδέσετε το feed σας.

Ροή εργασίας Qwik.Select

Το Qwik.Select λειτουργεί διαφορετικά από τα παραδοσιακά APIs. Ακολουθήστε την απλή διαδικασία 3 βημάτων:

1

Καταχώριση site

Δημιουργήστε λογαριασμό και καταχωρίστε το website σας στο Studio dashboard

2

URL συγχρονισμού XML

Ρυθμίστε ένα URL XML feed με τα δεδομένα προϊόντων σας για αυτόματο συγχρονισμό

3

Προσθήκη JS snippet

Τοποθετήστε το JavaScript snippet στις σελίδες όπου θέλετε αναζήτηση

Βήμα 1: Καταχωρίστε το site σας

Αρχικά, δημιουργήστε τον λογαριασμό σας στο Qwik.Select και καταχωρίστε το website σας:

  1. 1
    Μεταβείτε στο qwik.select/studio
  2. 2
    Πατήστε "Sign Up" και δημιουργήστε τον λογαριασμό σας
  3. 3
    Ολοκληρώστε την επιβεβαίωση email
  4. 4
    Πατήστε "Add New Site" στο dashboard
  5. 5
    Συμπληρώστε τα στοιχεία του site σας:
    • Όνομα site: Εμφανιζόμενο όνομα για τη δική σας αναφορά
    • Slug: Μοναδικό αναγνωριστικό (π.χ. "mystore")
    • Domain: Το domain του website σας

Το site δημιουργήθηκε!

Το site σας έχει πλέον καταχωριστεί και είναι έτοιμο για συγχρονισμό δεδομένων. Σημειώστε το site slug, γιατί θα το χρειαστείτε για το JavaScript snippet.

Βήμα 2: Ρυθμίστε το XML feed

Το Qwik.Select συγχρονίζει αυτόματα τα δεδομένα προϊόντων από XML feed. Δημιουργήστε ένα αρχείο XML με τα δεδομένα προϊόντων και κάντε το διαθέσιμο μέσω URL:

products.xml Example 
<?xml version="1.0" encoding="UTF-8"?>
<products>
    <product>
        <UniqueID>353699</UniqueID>
        <name><![CDATA[Wireless Bluetooth Headphones]]></name>
        <manufacturer><![CDATA[Sony]]></manufacturer>
        <description><![CDATA[High-quality wireless headphones with noise cancellation and 30-hour battery life. Premium sound quality with comfortable fit for all-day listening.]]></description>
        <ean>1234567890123</ean>
        <sku><![CDATA[WH-1000XM4]]></sku>
        <price_with_vat><![CDATA[299.99]]></price_with_vat>
        <image><![CDATA[https://yourstore.com/images/headphones-353699.jpg]]></image>
        <link><![CDATA[https://yourstore.com/products/headphones-353699]]></link>
        <category_id>15</category_id>
        <category><![CDATA[Electronics > Audio > Headphones]]></category>
        <quantity><![CDATA[25]]></quantity>
        <availability><![CDATA[In Stock]]></availability>
        <instock><![CDATA[Y]]></instock>
        <weight><![CDATA[0.25kg]]></weight>
    </product>
    <product>
        <UniqueID>353700</UniqueID>
        <name><![CDATA[Gaming Laptop Pro]]></name>
        <manufacturer><![CDATA[ASUS]]></manufacturer>
        <description><![CDATA[Powerful gaming laptop with RTX graphics and 16GB RAM for ultimate gaming performance. High-refresh display with advanced cooling system.]]></description>
        <ean>9876543210987</ean>
        <sku><![CDATA[ROG-STRIX-15]]></sku>
        <price_with_vat><![CDATA[1499.99]]></price_with_vat>
        <image><![CDATA[https://yourstore.com/images/laptop-353700.jpg]]></image>
        <link><![CDATA[https://yourstore.com/products/laptop-353700]]></link>
        <category_id>8</category_id>
        <category><![CDATA[Computers > Laptops > Gaming]]></category>
        <quantity><![CDATA[12]]></quantity>
        <availability><![CDATA[2-3 days]]></availability>
        <instock><![CDATA[Y]]></instock>
        <weight><![CDATA[2.30kg]]></weight>
    </product>
    <!-- More products... -->
</products>

Απαραίτητα πεδία

UniqueID

Μοναδικό αναγνωριστικό προϊόντος

name

Όνομα προϊόντος (μέσα σε CDATA)

description

Περιγραφή προϊόντος (μέσα σε CDATA)

price_with_vat

Τιμή με ΦΠΑ

link

URL σελίδας προϊόντος

image

URL εικόνας προϊόντος

manufacturer

Brand/κατασκευαστής προϊόντος (μέσα σε CDATA)

ean

Ευρωπαϊκός αριθμός είδους

sku

Κωδικός SKU (μέσα σε CDATA)

category

Διαδρομή κατηγορίας (μέσα σε CDATA)

Προαιρετικά πεδία

availability

Κατάσταση διαθεσιμότητας αποθέματος

instock

Ένδειξη διαθεσιμότητας (Y/N)

category_id

Αριθμητικό ID κατηγορίας

quantity

Ποσότητα αποθέματος (μέσα σε CDATA)

weight

Βάρος προϊόντος με μονάδα

Ρύθμιση στο Studio

Μόλις το XML feed είναι έτοιμο, προσθέστε το URL στις ρυθμίσεις του site σας:

1
Μεταβείτε στο site σας μέσα από το Studio dashboard
2
Μεταβείτε στο "Data Sync" ή στο "XML Settings"
3
Εισαγάγετε το URL του XML feed
4
Πατήστε "Test Connection" για επαλήθευση
5
Πατήστε "Start Sync" για να ξεκινήσει η εισαγωγή δεδομένων

Πρόγραμμα συγχρονισμού

Το Qwik.Select συγχρονίζει αυτόματα το XML feed με βάση τις ρυθμίσεις σας ώστε τα δεδομένα προϊόντων να παραμένουν ενημερωμένα. Διατίθεται επίσης χειροκίνητος συγχρονισμός μέσα από το dashboard.

Βήμα 3: Προσθέστε JavaScript snippet

Μόλις συγχρονιστούν τα δεδομένα σας, προσθέστε το JavaScript snippet για να ενεργοποιήσετε τη λειτουργία αναζήτησης:

Υλοποίηση αναζήτησης 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Store</title>
</head>
<body>
    <!-- Your search input field -->
    <input 
        type="text" 
        id="product-search" 
        placeholder="Search for products..."
        autocomplete="off"
    />
    
    <!-- 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>
</body>
</html>

Ρύθμιση widget

Απαραίτητη ρύθμιση

javascript 
{
    "id": "your-site-slug",                    // Your site slug from Studio
    "searchInputSelector": "#product-search"   // CSS selector for search field
}

Προαιρετική ρύθμιση

javascript 
{
    "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)
}

id: Το αναγνωριστικό slug του site σας από το Studio

searchInputSelector: CSS selector για το πεδίο αναζήτησης (π.χ. «#search», «.product-search»)

preserveInputStyle: Ορίστε true για να διατηρήσετε το αρχικό styling του πεδίου ή false για να χρησιμοποιήσετε το styling του widget

Ενσωμάτωση με πλατφόρμες

Το Qwik.select προσφέρει έτοιμα plugins για δημοφιλείς πλατφόρμες ηλεκτρονικού εμπορίου:

🛒 Plugin WooCommerce

Πλήρες plugin που δημιουργεί αυτόματα XML feeds και προσθέτει αναζήτηση σε καταστήματα WooCommerce.

  • • Εγκατάσταση με ένα κλικ
  • • Αυτόματη δημιουργία XML
  • • Ενσωμάτωση widget αναζήτησης
  • • Πίνακας ρυθμίσεων διαχείρισης

🛍️ Επέκταση OpenCart

Επέκταση OpenCart για συγχρονισμό δεδομένων και ενσωμάτωση αναζήτησης.

  • • Εύκολη εγκατάσταση
  • • Εξαγωγή δεδομένων προϊόντων
  • • Module αναζήτησης
  • • Ρυθμίσεις

Τα plugins διατίθενται στα marketplaces των αντίστοιχων πλατφορμών ή απευθείας από το qwik.select.

Δοκιμάστε την υλοποίησή σας

Ακολουθήστε αυτά τα βήματα για να επιβεβαιώσετε ότι όλα λειτουργούν σωστά:

Ελέγξτε τον συγχρονισμό XML

  • Ελέγξτε την κατάσταση συγχρονισμού στο Studio
  • Επιβεβαιώστε ότι ο αριθμός προϊόντων συμφωνεί με το XML σας
  • Ελέγξτε τα logs για σφάλματα συγχρονισμού

Δοκιμάστε την αναζήτηση

  • Ανοίξτε τη σελίδα με την ενσωματωμένη αναζήτηση
  • Πληκτρολογήστε έναν όρο αναζήτησης (δοκιμάστε ένα όνομα προϊόντος)
  • Επιβεβαιώστε ότι τα αποτελέσματα εμφανίζονται σωστά
  • Δοκιμάστε να πατήσετε στα αποτελέσματα

Δοκιμή σε κινητά

  • Δοκιμάστε σε κινητές συσκευές
  • Επιβεβαιώστε ότι λειτουργούν οι αλληλεπιδράσεις αφής
  • Ελέγξτε την προσαρμογή της διάταξης στην οθόνη

Η υλοποίηση ολοκληρώθηκε!

Η υλοποίηση του qwik.select είναι πλέον ενεργή! Οι χρήστες μπορούν να αναζητούν τα προϊόντα σας με έξυπνα αποτελέσματα, προτάσεις αυτόματης συμπλήρωσης και γρήγορη απόκριση.

✨ Αναζήτηση σε πραγματικό χρόνο
🚀 Γρήγορη απόκριση
📱 Βελτιστοποίηση για κινητά

Επόμενα βήματα

Επεκτείνετε την υλοποίηση του qwik.select με αυτές τις προηγμένες δυνατότητες:

🎨 Προσαρμόστε το περιβάλλον αναζήτησης

Σχεδιάστε ένα περιβάλλον αναζήτησης που ταιριάζει στο brand σας, με CSS styling και προσαρμοσμένα templates αποτελεσμάτων.

📊 Προβολή analytics

Παρακολουθήστε την απόδοση αναζήτησης, τους δημοφιλείς όρους και τη συμπεριφορά των χρηστών στο Studio.

🔧 Προηγμένες ρυθμίσεις

Ρυθμίστε την κατάταξη αποτελεσμάτων, τα φίλτρα facets και τα URL «View All Results» για καλύτερη εμπειρία χρήσης.

Χρειάζεστε βοήθεια;

Αν αντιμετωπίσετε προβλήματα κατά τη ρύθμιση, η ομάδα υποστήριξης είναι διαθέσιμη να σας βοηθήσει:

Επικοινωνία με την υποστήριξη