Mega Mart

Dies ist eine Einreichung für die Wix Studio Challenge.

Hintergrund

Warum veralteten Methoden folgen, wenn KI die Geschäftslandschaft verändert? Ich habe diesen E-Commerce ins Leben gerufen, weil KI heutzutage der Trend für Unternehmen ist. Mega Mart ist eine Plattform, die nicht nur eine große Auswahl an Produkten bietet, sondern auch die Benutzeroberfläche/UX durch erweiterte Funktionen verbessert, die in Wix Studio erstellt wurden.

---

Was ich gebaut habe

Ich habe erweiterte KI-Suchoptionen entwickelt, um das Problem der ineffizienten Produkterkennung zu lösen, mit dem Ziel, ein intuitiveres und angenehmeres Einkaufserlebnis für Benutzer zu schaffen.

Haben Sie schon einmal jemanden gesehen, der ein T-Shirt trägt, das Ihnen gefällt, Sie ihn aber nicht nach der Marke fragen wollten? Machen Sie mit Mega Market einfach ein Foto und laden Sie es auf unsere Plattform hoch; Wir werden in unserer Produktdatenbank danach suchen.

Warum ins Einkaufszentrum gehen, wenn Sie nach dem gewünschten Produkt genauso suchen können, wie Sie es von einem Filialmitarbeiter erwarten würden? Schreiben Sie einfach Ihre Anfrage in natürlicher Sprache und wir zeigen Ihnen Beispiele für die Produkte, nach denen Sie suchen. Geben Sie zum Beispiel „Ich brauche eine Winterjacke für Damen“ oder „Ich möchte ein schwarzes Smartphone mit Kamera“ ein.

Das Beste daran ist, dass für die Website kein Wix-Abonnement erforderlich ist, um den Bestellvorgang abzuschließen, da sie vollständig mit Wix-Elementen und Velo-APIs erstellt wurde.

---

So kaufen Sie im Mega Market ein

Erstellen Sie ein Konto (oder nicht...)

Bei Mega Mart haben Sie die Möglichkeit, Produkte mit oder ohne Konto zu kaufen.
Das Erstellen eines Kontos bietet mehrere Vorteile:

• Während des Bezahlvorgangs werden Ihre persönlichen Daten und vorherigen Adressen automatisch ausgefüllt, wodurch Sie Zeit sparen.
• Zusätzlich erhalten Sie Sofort-Cashback, das für zukünftige Einkäufe verwendet werden kann.
• Sie lieben ein Produkt, möchten es aber noch nicht kaufen? Ihr Konto enthält eine Wunschliste-Funktion, mit der Sie Produkte für später speichern können.

Produktartikel suchen

Wie bereits erwähnt, können Sie nach Produkten suchen, indem Sie Bilder von Ihrem Gerät hochladen, KI verwenden oder alle Artikel durchsuchen, um das auszuwählen, das Ihnen am besten gefällt.

Überprüfen Sie Ihren Warenkorb

Stellen Sie vor dem Bezahlen sicher, dass Sie alle gewünschten Produkte in Ihren Warenkorb gelegt haben. Passen Sie bei Bedarf die Menge der Artikel an oder löschen Sie etwaige Fehler. Überprüfen Sie außerdem Ihre Gesamtsumme und den voraussichtlichen Liefertermin.

Kasse

Wenn Sie angemeldet sind, werden Ihre persönlichen Daten automatisch ausgefüllt. Sie können eine Ihrer zuvor gespeicherten Adressen auswählen oder eine neue eingeben, die Ihrem Konto für zukünftige Bestellungen hinzugefügt wird.
Geben Sie Ihre Kredit- oder Debitkarteninformationen ein und klicken Sie dann auf die letzte Schaltfläche, um den Kaufvorgang abzuschließen.

Ihre Bestellung ist abgeschlossen!

Sie werden zur Bestellseite weitergeleitet, wo Sie die Details Ihres Kaufs und seinen Status einsehen können: ob er bearbeitet wird, zur Lieferung unterwegs ist oder bereits geliefert wurde. Sie erhalten außerdem eine E-Mail-Bestätigung Ihrer Bestellung.

---

Vorteile von Mega Mart

Ohne Passwort

Wer möchte sich heutzutage Passwörter merken? Bei Mega Mart müssen Sie sich darüber keine Sorgen machen; Jedes Mal, wenn Sie sich bei Ihrem Konto anmelden möchten, erhalten Sie einen einmaligen Zifferncode per E-Mail, SMS oder Anruf.

Cashback

Wer freut sich nicht, fürs Einkaufen belohnt zu werden? Bei jedem Einkauf bei Mega Mart erhalten Sie 1 % Cashback, den Sie für die Bezahlung zukünftiger Bestellungen verwenden können.

Wunschliste

Haben Sie schon einmal ein Produkt gefunden, das Ihnen gefällt, das Sie aber noch nicht kaufen möchten? Bei Mega Mart können Sie es auf Ihrer Wunschliste speichern für einen zukünftigen Einkauf.

Bestellstatus

Sie müssen nicht zwischen den Seiten wechseln, um den Status Ihrer Sendung anzuzeigen. Auf der Bestellseite können Sie ganz einfach überprüfen, ob die Bestellung bearbeitet, unterwegs oder bereits geliefert wird.

Volle Reaktionsfähigkeit

Haben Sie sich jemals gefragt, ob eine Website auf Ihrem Computer, Tablet oder Telefon genauso reibungslos funktionieren kann? Bei Mega Mart reagiert unsere Website vollständig auf alle Geräte.

Speichern Sie Ihre Adressen

Neugierig, wie bequem Einkaufen sein kann? Bei Mega Mart werden Ihre Adressen für zukünftige Einkäufe gespeichert und Sie können sie einfach über Ihre Kontoseite verwalten.

Kein Konto erforderlich

Während viele E-Commerce-Websites zum Einkaufen die Erstellung eines Kontos erfordern, können Sie bei Mega Mart als Gast einkaufen. Denken Sie jedoch an alle Vorteile, die Sie als Stammkunde von Mega Mart haben können.

---

Entwicklungsreise

Der Einsatz von Wix Studio hat mir geholfen, die Frontend-Entwicklung zu beschleunigen, die Zeit erheblich zu reduzieren und gleichzeitig ein vollständig responsives Design auf allen Geräten sicherzustellen. JavaScript spielt eine wichtige Rolle bei der Verbesserung der Benutzerinteraktion mit Wix Studio-Elementen und ermöglicht die nahtlose Bereitstellung dynamischer Funktionen. Darüber hinaus setzt unsere Website robuste Sicherheitsmaßnahmen ein, darunter Datenbanken, Webmethoden und Router-Sicherheit, um Benutzerdaten zu schützen und ein sicheres Surferlebnis zu gewährleisten.

Bevor ich näher darauf eingehe, wie ich Mega Mart erstellt habe, ist es wichtig zu sagen, dass ich keine Apps von Wix Market installiert habe. Während ich Wix Stores verwendet habe, um Produkte im Warenkorb zu speichern und sie dann auf einigen Seiten abzurufen, habe ich mich dafür entschieden, die Produktseiten, den Warenkorb und die Checkout-Seiten mit Wix Elements komplett neu zu erstellen.

Haftungsausschluss
Da es sich um eine Demo für den Wettbewerb handelt, habe ich nur 29 Produkte in der Datenbank gespeichert. Um die KI-Bildprodukterkennung und die KI-Suchmethoden optimal nutzen zu können, machen Sie sich bitte zunächst mit den im Shop verfügbaren Produkten vertraut. Beispielsweise liefert die Suche nach einem Drucker oder einem Hammer möglicherweise keine Ergebnisse, da diese Elemente nicht in der Demodatenbank enthalten sind. Wenn dieses Projekt jedoch auf große Unternehmen wie Home Depot oder Walmart ausgeweitet würde, die Tausende von Produkten in ihren Datenbanken haben, würden die KI-Funktionen umfassende Suchvorgänge durchführen und eine größere Bandbreite an Ergebnissen liefern.

---

Probieren Sie es aus!

Sind Sie neugierig, was Mega Mart zu Ihrem Einkaufserlebnis beitragen kann? Klicken Sie hier, um die Möglichkeiten zu erkunden und zu entdecken.
Auf geht's!

---

Wie ich es gebaut habe

Die Entwicklung dieser E-Commerce-Website war nicht einfach, insbesondere angesichts des engen Zeitplans, aber ich bin stolz, sie mit all ihren Funktionen innerhalb von nur zwei Wochen erstellt zu haben.

Heim

Die erste Seite, die ich entwickelte, war die Startseite, auf der ich Funktionen integrieren wollte, die häufig auf anderen E-Commerce-Websites zu finden sind, wie z. B. die Präsentation von Bestsellern und Neuankömmlingen sowie die Hervorhebung der Vorteile des Einkaufens im Geschäft.
Unten ist ein Beispiel dafür, wie ich Daten für Bestseller und neueste Produkte im Code abgerufen habe.

import wixData from 'wix-data';
import wixWindowFrontend from 'wix-window-frontend';
import wixLocationFrontend from 'wix-location-frontend';

const limit = wixWindowFrontend.formFactor === "Mobile" ? 6 : 5

const bestSellers = (await wixData.query("Products").descending("rating").limit(limit).find()).items
$w('#repeater2').data = bestSellers

$w('#repeater2').onItemReady(($item, itemData, index)=>{
    $item('#imageX9').src = itemData.imageUrl[0].src
    $item('#imageX9').alt = itemData.name

    $item('#text12').text = itemData.name
    $item('#text13').text = "$" + itemData.price

    $item('#box15').onClick(() => {
        wixLocationFrontend.to(`/product/${itemData._id}`)
    })
})

const newProucts = (await wixData.query("Products").descending("_createdDate").limit(limit).find()).items
$w('#repeater3').data = newProucts

$w('#repeater3').onItemReady(($item, itemData, index)=>{
    $item('#imageX10').src = itemData.imageUrl[0].src
    $item('#imageX10').alt = itemData.name

    $item('#text15').text = itemData.name
    $item('#text14').text = "$" + itemData.price

    $item('#box19').onClick(() => {
        wixLocationFrontend.to(`/product/${itemData._id}`)
    })
})

Wie Sie sehen können, enthält der Code auch Logik, um zu erkennen, ob der Benutzer auf einem mobilen Gerät surft oder nicht. In der mobilen Ansicht werden die Repeater in zwei Spalten angezeigt, während sie im Tablet- und Computermodus in einer einzigen Zeile mit fünf Spalten angeordnet sind.

Anmelden und registrieren

Ich glaube, dass die Registrierungs- und Anmeldeseiten über eine intuitive UI/UX-Oberfläche verfügen sollten. Wenn einer der Prozesse für Benutzer schwierig oder frustrierend ist, verlassen sie möglicherweise die Website, was zu einem entgangenen Verkauf führt.
Um dies zu verhindern, verwendet Mega Mart ein passwortloses System. Jedes Mal, wenn Sie sich anmelden möchten, wird ein Einmalcode per SMS, Anruf oder E-Mail gesendet, sodass Sie sich nicht mehrere Passwörter merken müssen.

Registrieren

import { verify, sendVerification } from "backend/twilio.web"
import { register } from "backend/members.web"

$w('#button1').onClick(async () => {
    $w('#imageX9').show()
    $w('#button1').disable()
    if ($w('#box37').isVisible) {
        if ($w('#input5').valid) {

            $w('#text35').collapse()

            const verifyEmailResponse = await verify($w('#input3').value, $w('#input5').value)
            const verifyPhoneResponse = await verify($w('#input4').value, $w('#input5').value)

            if (verifyEmailResponse || verifyPhoneResponse) {
                try {
                    const sessionToken = await register($w('#input1').value, $w('#input2').value, $w('#input3').value, $w('#input4').value)
                    await authentication.applySessionToken(sessionToken)
                } catch (error) {
                    $w('#text35').text = "Error registering: " + new Error(error).message
                    $w('#text35').expand()
                }

            } else {
                $w('#text35').text = "Wrong verification code."
                $w('#text35').expand()
            }
        }
    } else {
        const sendEmailResponse = await sendVerification("email", $w('#input3').value)
        const sendSMSResponse = await sendVerification("sms", $w('#input4').value)
        if (sendEmailResponse && sendSMSResponse) {
            $w('#input1,#input2,#box36').collapse()
            $w('#box37').expand()
            $w('#button1').label = "Register"
            $w('#text37').hide()
        }
    }
    $w('#imageX9').hide()
    $w('#button1').enable()
})

Dieser Code übernimmt den Registrierungsprozess, wenn auf die Schaltfläche geklickt wird. Wenn das Eingabefeld für den Bestätigungscode sichtbar ist und die Eingabe für den Bestätigungscode gültig ist, wird die E-Mail-Adresse oder Telefonnummer des Benutzers mit dem bereitgestellten Bestätigungscode überprüft. Wenn eine der Überprüfungen erfolgreich ist, wird versucht, den Benutzer zu registrieren und dann ein Sitzungstoken zur Authentifizierung anzuwenden. Wenn die Überprüfung fehlschlägt, wird eine Fehlermeldung angezeigt.
Wenn das Feld nicht sichtbar ist, sendet es Bestätigungscodes an die E-Mail-Adresse und das Telefon des Benutzers und aktualisiert dann die Benutzeroberfläche, damit der Benutzer die Registrierung abschließen kann.

Login

Verifizierungscode an Benutzer senden

import { sendVerification } from "backend/twilio.web"
import { verifyEmailOrPhoneNumber} from "backend/members.web"

$w('#button2,#button3').onClick(async (rest) => {
    if ($w('#input7').valid || $w('#input8').valid) {
        $w('#imageX10').show()
        $w('#text34').collapse()
        $w('#button2,#button3').disable()

        let toSearch = $w('#input7').isVisible ? $w('#input7').value : $w('#input8').value
        if (!(await verifyEmailOrPhoneNumber(toSearch))) {
            $w('#text34').text = "There isn't an account with that email or phone number."
            $w('#text34').expand()
        } else {
            switch (rest.target) {
            case $w('#button2'):
                let response = false
                if ($w('#input7').isVisible) {
                    response = await sendVerification("email", $w('#input7').value)
                    verificationTypeAtLogin = "email"
                    $w('#text31').text = "Please check you email. It may be at junk mails."
                } else {
                    response = await sendVerification("sms", $w('#input8').value)
                    verificationTypeAtLogin = "sms"
                    $w('#text31').text = "Please check you SMS."
                }

                if (response) {
                    $w('#text33,#box41,#box47').collapse()
                    $w('#box46,#box48').expand()
                    $w('#text36').hide()
                } else {
                    $w('#text34').text = "We couldn't send the verification code. Try using another method."
                    $w('#text34').expand()
                }
                break;
            case $w('#button3'):
                verificationTypeAtLogin = "call"
                $w('#text31').text = "You will receive a phone call in a few moments."

                if (await sendVerification("call", $w('#input8').value)) {
                    $w('#text33,#box41,#box47').collapse()
                    $w('#box46,#box48').expand()
                    $w('#text36').hide()
                } else {
                    $w('#text34').text = "We couldn't send the verification code. Try using another method."
                    $w('#text34').expand()
                }
                break;
            }
        }
        $w('#imageX10').hide()
        $w('#button2,#button3').enable()
    }
})

Zuerst wird die Existenz der eingegebenen E-Mail-Adresse oder Telefonnummer überprüft.
Je nachdem, auf welche Schaltfläche geklickt wird, wird ein Bestätigungscode per E-Mail, SMS oder Anruf gesendet. Anschließend wird die Eingabe des Bestätigungscodes erweitert, sodass der Benutzer den empfangenen Code schreiben kann.
Wenn die Überprüfung fehlschlägt, wird eine entsprechende Fehlermeldung angezeigt. Schließlich wird das Ladebild ausgeblendet und die Schaltflächen werden wieder aktiviert.

Bestätigung des Bestätigungscodes

import { verify } from "backend/twilio.web"
import { login } from "backend/members.web"

if ($w('#input9').valid) {
    $w('#imageX11').show()
    $w('#text34').collapse()
    $w('#button4').disable()

    let verifyResponse = false
    if (verificationTypeAtLogin === "email") verifyResponse = await verify($w('#input7').value, $w('#input9').value)
    else verifyResponse = await verify($w('#input8').value, $w('#input9').value)

    if (verifyResponse) {
        try {
            const sessionToken = await login(verificationTypeAtLogin === "email" ? $w('#input7').value : "", verificationTypeAtLogin !== "email" ? $w('#input8').value : "")
            await authentication.applySessionToken(sessionToken)
        } catch (error) {
            $w('#text34').text = "Error registering: " + new Error(error).message
            $w('#text34').expand()
            $w('#imageX11').hide()
            $w('#button4').enable()
        }

    } else {
        $w('#text34').text = "Wrong verification code."
        $w('#text34').expand()
        $w('#imageX11').hide()
        $w('#button4').enable()
    }

}

Es überprüft den bereitgestellten Code basierend auf der Überprüfungsart (E-Mail oder Telefon). Wenn die Überprüfung erfolgreich ist, wird versucht, den Benutzer anzumelden und das Sitzungstoken zur Authentifizierung anzuwenden.

Umleitung des Benutzers

Unabhängig davon, ob sich der Benutzer anmeldet oder registriert, wird er nach einem erfolgreichen Vorgang zur zuletzt besuchten Seite weitergeleitet.

import { authentication } from "wix-members"
import wixLocationFrontend from 'wix-location-frontend'

authentication.onLogin(() => {
    wixLocationFrontend.to(wixLocationFrontend.query.redirect)
})

Suchleistenfenster

Damit Benutzer auf jeder Seite nach Produkten suchen können, habe ich die Suchleiste in einen Leuchtkasten eingefügt.

Search type

First check what search type the user selected.

import wixWindowFrontend from 'wix-window-frontend';

$w('#imageX7').hide()
$w('#button2,#input1,#searchByImage,#searchByAI').enable()
const type = wixWindowFrontend.lightbox.getContext()

let instructions = ""
switch (type) {
case "text":
    $w('#searchByTextMobile').show("fade", { duration: 500 })
    instructions = "Enter keywords or product names into the search bar."
    break;
case "image":
    $w('#searchByImage').show("fade", { duration: 500 })
    instructions = "Upload an image of the product you are looking for."
    break;
case "AI":
    $w('#searchByAI').show("fade", { duration: 500 })
    instructions = "Type your query in natural language (e.g., 'I need a winter jacket for women')."
    break;
}

$w('#text21').text = `Search by ${type}`
$w('#text22').text = instructions

Handle search type

By image

import { getImageLabels } from "backend/googleVision.web"

$w('#searchByImage').onChange(async () => {
    $w('#searchByImage').disable()
    $w('#imageX7').show()
    const file = await $w('#searchByImage').uploadFiles()
    const labels = await getImageLabels(file[0].fileUrl)

    sendTo("tags", labels)
})

First, the image is uploaded to the Media Manager to obtain its URL. Then, the URL is sent to Google Vision to identify tags related to the image.

By AI

$w('#searchByAI').onKeyPress(async (rest) => {
    if ($w('#searchByAI').valid && rest.key === "Enter") {
        $w('#searchByAI').disable()
        $w('#imageX7').show()

        const labels = await getTextLabels($w('#searchByAI').value)
        sendTo("tags", labels)
    }
})

If the user presses Enter, the input text is tokenized to extract nouns.

Search redirection

Once one of the methods is completed, the user is redirected to the search router page with the queries included in the URL.

import wixLocationFrontend from 'wix-location-frontend';

function sendTo(type = "", value = []) {
    wixLocationFrontend.to(`/search?type=${type}&value=${JSON.stringify(value)}`)
}

Search page

This is a Wix Router page that helped me show the different types of search, and also the wishlist of the products the user saved.

Repeater display

import wixWindowFrontend from 'wix-window-frontend';
import { cart } from "wix-stores-frontend";

let originalItem = wixWindowFrontend.getRouterData()
let items = wixWindowFrontend.getRouterData()
initRepeater(items)

$w('#repeater1').onItemReady(async ($item, itemData, index) => {
    $item('#imageX9').src = itemData.imageUrl[0].src
    $item('#text12').text = itemData.name
    $item('#text13').text = "$" + itemData.price
    $item('#ratingsDisplay1').rating = itemData.rating

    $item('#button1').onClick(async () => {
        const product = [{
            productId: itemData._id,
            quantity: 1,
        }]

        await cart.addProducts(product)
        await showAlert("add")
    })

    $item('#box38').onClick(() => {
        wixLocationFrontend.to(`/product/${itemData._id}`)
    })

    if (authentication.loggedIn()) {
        const userID = await currentMember.getMember({ fieldsets: ["FULL"] })
        const item = await wixData.query("Wishlist").eq("product", itemData._id).eq("_owner", userID._id).find()
        if (item.totalCount === 0) $item('#button2').expand()
        else {
            itemData.wishList = item.items[0]._id
            $item('#button3').expand()
        }
    } else $item('#button2').expand()

    $item('#button2').onClick(async () => {
        if (authentication.loggedIn()) {
            const itemWishlist = await wixData.insert("Wishlist", { product: itemData._id })
            itemData.wishList = itemWishlist._id
            await showAlert("save")
            $item('#button2').collapse().then(() => {
                $item('#button3').expand()
            })
        } else wixWindowFrontend.openLightbox("loginToWishlist")
    })

    $item('#button3').onClick(async () => {
        await wixData.remove("Wishlist", itemData.wishList)
        await showAlert("remove")
        $item('#button3').collapse().then(() => {
            $item('#button2').expand()
        })
    })
})

function initRepeater(items = [], changeFilter = true) {
    $w('#repeater1').data = items

    if ($w('#repeater1').data.length === 0) {
        if (wixLocationFrontend.query.type === "wishlist") {
            $w('#text27').text = "You haven't add any item to your wishlist. Add your first product!"
        } else {
            $w('#text27').text = "Try searching with another method or include more details if you are using AI."
        }
        $w('#section5').collapse()
        $w('#section6').expand()
    } else {
        const htmlLinks = items[0].tags.slice(0, 5).map(word => `<span style="font-size: 10px;"><a href="/search?type=tags&value=[%22${word}%22]">${word}</a></span>`).join(' - ');
        $w('#text22').html = htmlLinks
        $w('#section6').collapse()
        $w('#section5').expand()

        $w('#switch1').checked = false

        if (changeFilter) {
            const maxPrice = sortByPrice(items, "desc")[0]

            $w('#slider1').max = maxPrice.price
            $w('#slider2').max = maxPrice.price

            $w('#slider2').value = maxPrice.price
        }

    }

}

As you can see, this includes the import { cart } from "wix-stores-frontend" statement, which allows the product to be added to the cart when the user clicks the button inside the repeater.

Sort products

$w('#switch1').onChange(() => {
    $w('#repeater1').data = []

    items = sortByPrice(items, $w('#switch1').checked ? "desc" : "asc")
    $w('#repeater1').data = items
})

function sortByPrice(products = [{}], order = 'asc') {
    return products.sort((a, b) => {
        if (order === 'asc') {
            return a.price - b.price;
        } else if (order === 'desc') {
            return b.price - a.price;
        } else {
            throw new Error("Order must be either 'asc' or 'desc'");
        }
    });
}

Filter products

$w('#slider1,#slider2').onChange(() => {
    items = filterByPriceRange(originalItem, $w('#slider1').value, $w('#slider2').value)
    initRepeater(items, false)
})

function filterByPriceRange(products, minPrice, maxPrice) {
    return products.filter(product => product.price >= minPrice && product.price <= maxPrice);
}

Wixlocation.onChange()

Since searching for new products redirects the user to the same page /search and only changes the URL queries, I needed to handle this with wixLocationFrontend.onChange() to update the repeater items.

Product page

This is also a router page /product/${productID} that fetches product information from the backend and displays it using wixWindowFrontend.getRouterData().

import wixWindowFrontend from 'wix-window-frontend';

const product = wixWindowFrontend.getRouterData()

$w('#gallery1').items = product.imageUrl
$w('#features').text = product.features
$w('#title').text = product.name
$w('#brand').text = product.brand
$w('#color').text = product.color
$w('#price').text = String(product.price)
$w('#description').text = product.description
$w('#ratings').rating = product.rating
$w('#stock').text = `${product.stock} available`

Since you can add the product to your cart from here, with the option to set a quantity, I used the following code to achieve this.

import { cart } from "wix-stores-frontend"

$w('#addCart').onClick(async () => {
    const productToSave = [{
        productId: product._id,
        quantity: Number($w('#inputQuantity').value),
    }]

    await cart.addProducts(productToSave)
    await showAlert("add")

})

$w('#quantityLess,#quantityMore').onClick((rest) => {
    let value = Number($w('#inputQuantity').value)

    switch (rest.target) {
    case $w('#quantityLess'):
        if (value > 1) value--
        break;
    case $w('#quantityMore'):
        value++
        break;
    }

    $w('#inputQuantity').value = String(value)
})

Also having the option to add the product to the wishlist or delete it.

$w('#addWishList').onClick(async () => {
    if (authentication.loggedIn()) {
        await wixData.insert("Wishlist", { product: product._id })
        await showAlert("save")
        $w('#addWishList').collapse().then(() => {
            $w('#deleteWishlist').expand()
        })
    } else wixWindowFrontend.openLightbox("loginToWishlist")
})

$w('#deleteWishlist').onClick(async () => {
    await wixData.remove("Wishlist", product.wishList)
    await showAlert("remove")

    $w('#deleteWishlist').collapse().then(() => {
        $w('#addWishList').expand()
    })
})

Cart page

Need to review your cart? This page allows you to check if you have added the desired quantities of the products you want to buy and also lets you delete any items if needed.

import { cart } from "wix-stores-frontend"

$w('#repeater1').onItemReady(($item, itemData, index) => {
$item('#quantityLess,#quantityMore').onClick(async (rest) => {
        $item('#quantityLess,#quantityMore,#button3').disable()
        let value = Number($item('#inputQuantity').value)

        switch (rest.target) {
        case $item('#quantityLess'):
            if (value > 1) value--
            break;
        case $item('#quantityMore'):
            value++
            break;
        }

        $item('#inputQuantity').value = String(value)
        $item('#text22').text = `$${(itemData.price * value).toFixed(2)}`

        const updadedCart = await cart.updateLineItemQuantity(Number(itemData._id), value)
        $item('#quantityLess,#quantityMore,#button3').enable()

        $w('#text25').text = `Total: $${updadedCart.totals.total.toFixed(2)}`
    })

    $item('#button3').onClick(async () => {
        $item('#quantityLess,#quantityMore,#button3').disable()
        await cart.removeProduct(Number(itemData._id))
        await initCart()
    })
})

Clicking the buttons #quantityLess and #quantityMore triggers an event to edit the product quantity. Clicking the #button3 removes the product from the cart.

Checkout

This is the final step for purchasing at Mega Market.
If the user is a Site Member, it retrieves their saved addresses and accumulated cashback from their account.

import { authentication, currentMember } from "wix-members-frontend"

if (authentication.loggedIn()) {
    $w('#text25').collapse()

    const user = await currentMember.getMember({ fieldsets: ["FULL"] })

    $w('#input1').value = user.contactDetails.firstName
    $w('#input2').value = user.contactDetails.lastName
    $w('#input3').value = user.loginEmail
    $w('#input4').value = user.contactDetails.phones[0]

    const addresses = await getUserAdderess(user._id)

    if (addresses.length === 0) {
        $w('#dropdown1').options = [{ value: "No addresses founded", label: "No addresses founded" }]
        $w('#dropdown1').value = "No addresses founded"
        $w('#dropdown1').disable()
    } else {
        const addressesOptions = addresses.map(address => ({
            label: `${address.addressLine} ${address.state}, ${address.country}`,
            value: JSON.stringify(address)
        }));

        $w('#dropdown1').options = addressesOptions
    }

    const totalCashback = await getTotalCashback(user._id)

    if (totalCashback === 0) {
        $w('#switch1').disable()
        $w('#switch1').checked = false
        $w('#text28').text = `You will earn $${Number(currentCart.totals.total * 0.01).toFixed(2)} in cashback with this order.`
    } else {
        cashback = totalCashback > currentCart.totals.total ? currentCart.totals.total : totalCashback;
        $w('#switch1').enable()
        $w('#text28').text = `Use my cashback: $${Number(cashback).toFixed(2)}`
    }

}

It also validates that the card number of the user is a Master Card, Visa or AMEX.

$w('#input10').onCustomValidation((value, reject) => {
        const cardsInfo = {
            "Unknown": {
                "image": "https://static.wixstatic.com/media/4c0a11_600a3b93f607463296a7c9149268800e~mv2.gif",
                "regex": /^\d+$/,
                "length": 16
            },
            "Master Credit": {
                "image": "https://www.mercadopago.com/org-img/MP3/API/logos/master.gif",
                "regex": ,
                "length": 16
            },
            "Visa Credit": {
                "image": "https://www.mercadopago.com/org-img/MP3/API/logos/visa.gif",
                "regex": ,
                "length": 16
            },
            "AMEX": {
                "image": "https://www.mercadopago.com/org-img/MP3/API/logos/amex.gif",
                "regex": ,
                "length": 15
            },
            "Visa Debit": {
                "image": "https://www.mercadopago.com/org-img/MP3/API/logos/debvisa.gif",
                "regex": ,
                "length": 16
            },
            "Master Debit": {
                "image": "https://www.mercadopago.com/org-img/MP3/API/logos/debmaster.gif",
                "regex": ,
                "length": 16
            }
        }

        const cardCategory = identifyCardCategory(value)
        $w('#imageX8').src = cardsInfo[cardCategory].image
        $w('#input10').maxLength = cardsInfo[cardCategory].length
        if (!cardsInfo[cardCategory].regex.test(value)) {
            reject("Invalid card number")
        }
    })

function identifyCardCategory(cardNumber) {
    const patterns = {
        masterCredit: ,
        visaCredit: ,
        amex: ,
        visaDebit: ,
        masterDebit: 
    };

    if (patterns.masterCredit.test(cardNumber)) return "Master Credit";
    if (patterns.visaCredit.test(cardNumber)) return "Visa Credit";
    if (patterns.amex.test(cardNumber)) return "AMEX";
    if (patterns.visaDebit.test(cardNumber)) return "Visa Debit";
    if (patterns.masterDebit.test(cardNumber)) return "Master Debit";

    return "Unknown";
}

After the user inputs all the required information, it's time to process the order.

$w('#button2').onClick(async () => {
    if ($w('#input1').valid && $w('#input2').valid && $w('#input3').valid && $w('#input4').valid && $w('#input5').valid && $w('#input6').valid && $w('#input7').valid && $w('#input8').valid && $w('#input9').valid && $w('#input10').valid && $w('#dropdown2').valid && $w('#dropdown3').valid && $w('#dropdown4').valid) {
        $w('TextInput,Dropdown').disable()
        $w('#box53').show()

        const productArray = currentCart.lineItems.map(item => ({
            quantity: item.quantity,
            name: item.name,
            priceData: {
                price: item.price,
            },
            mediaItem: {
                src: item.mediaItem.src
            }
        }));

        const insertedItem = await wixData.insert("Orders", {
            lineItems: productArray,
            totals: {
                subtotal: subTotal,
                total: total,
            },
            shippingInfo: {
                shipmentDetails: {
                    address: {
                        city: $w('#dropdown4').value,
                        country: $w('#dropdown2').value,
                        addressLine: $w('#input5').value,
                        postalCode: $w('#input6').value,
                        subdivision: $w('#dropdown3').value,
                    }
                }
            },
            billingInfo: {
                address: {
                    city: $w('#dropdown4').value,
                    country: $w('#dropdown2').value,
                    addressLine: $w('#input5').value,
                    postalCode: $w('#input6').value,
                    subdivision: $w('#dropdown3').value,
                },
                lastName: $w('#input2').value,
                firstName: $w('#input1').value,
                email: $w('#input3').value,
                phone: $w('#input4').value
            },
            cashback: $w('#switch1').checked
        })

        for (let lineItem of currentCart.lineItems) {
            await cart.removeProduct(lineItem.id)
        }

        wixLocationFrontend.to(`/order/${insertedItem._id}`)
    }
})

This wixData.insert() triggers a data hook that creates the order using wixStoresBackend.createOrder() which I'll talk of it later.

Order page

This page displays the order information passed though the wixWindowFrontend.getRouterData().

import wixWindowFrontend from 'wix-window-frontend';

const orderInfo = wixWindowFrontend.getRouterData()
const contact = orderInfo.billingInfo
const shipping = contact.address

$w('#text21').text = `Order #${orderInfo.orderNumber}`
$w('#text48').text = `Amount paid: $${orderInfo.totals.total}`
$w('#text47').text = `Subtotal: $${Number(orderInfo.totals.subtotal).toFixed(2)} | Discounts: $${Number(orderInfo.totals.subtotal - orderInfo.totals.total).toFixed(2)}`

$w('#text26').text = contact.firstName
$w('#text27').text = contact.lastName
$w('#text28').text = contact.phone
$w('#text29').text = contact.email

$w('#text30').text = shipping.addressLine
$w('#text31').text = shipping.city
$w('#text32').text = shipping.postalCode
$w('#text33').text = `${shipping.subdivision}, ${shipping.country}`

---

APIs

Velo APIs

API	Method	Location in Project
Wix Data	1. query() 2. insert() 3. remove() 4. get()	1. Home page 2. Search page 3. Checkout
Wix Window Frontend	1. formFactor 2. lightbox.getContext() 3. getRouterData() 4. openLightbox()	1. Home page 2. Login 3. Search bar 4. Search page 5. Product page
Wix Location Frontend	1. to() 2. onChange() 3. query	1. Home page 2. Login 3. Search bar 4. Search page 5. Cart page 6. Checkout 7. Order page
{authentication} from Wix Members	1. applySessionToken() 2. onLogin()	1. Login 2. Checkout
{ cart } from Wix Stores	1. addProducts()	1. Search page 2. Product page 3. Cart page 4. Checkout
{currentMember} from Wix Members	1. getMember()	1. Product page 2. Checkout
Wix Secrets	getSecret()	Backend

External services

country-state-city

Helped to get the countries, states of countries and cities of states.

import { Permissions, webMethod } from "wix-web-module";

export const getAllCountries = webMethod(
    Permissions.Anyone,
    async () => {
        const countries = await require('country-state-city').Country.getAllCountries();

        const toReturn = countries.map(state => ({
            label: state.name,
            value: state.isoCode
        }));

        return toReturn;
    }
);

export const getStatesOfCountry = webMethod(
    Permissions.Anyone,
    async (country) => {
        const states = await require('country-state-city').State.getStatesOfCountry(country);

        const toReturn = states.map(state => ({
            label: state.name,
            value: state.isoCode
        }));

        return toReturn;
    }
);

export const getCitiesOfStates = webMethod(
    Permissions.Anyone,
    async (country, state) => {
        const states = await require('country-state-city').City.getCitiesOfState(country, state);

        const toReturn = states.map(state => ({
            label: state.name,
            value: state.name
        }));

        return toReturn;
    }
);

google-cloud/vision

Reads the image and provides labels of what it identifies.

const vision = require('@google-cloud/vision');

export const getImageLabels = webMethod(
    Permissions.Anyone,
    async (imageUrl) => {
        const credentials = JSON.parse(await wixSecretsBackend.getSecret("googleVisionCredentials"))

        const client = new vision.ImageAnnotatorClient({ credentials });

        try {
            const [result] = await client.labelDetection(getPublicURL(imageUrl));
            const labels = result.labelAnnotations.map(label => label.description);

            const lowerCaseLabels = labels.map(element => element.toLowerCase());

            return lowerCaseLabels;
        } catch (error) {
            console.error('Error detecting labels:', error);
            return []
        }
    }
);

Compromise

Extracts the nouns from a text.

const nlp = require('compromise');

export const getTextLabels = webMethod(
    Permissions.Anyone,
    async (text) => {
        let doc = nlp(text);

        let categories = doc.match('#Noun').out('array');
        const lowerCaseCategories = categories.map(element => element.toLowerCase());

        return lowerCaseCategories
    }
);

Twilio

Used for sending the verification code via SMS, call or email and to verify the one-time digit code.

export const sendVerification = webMethod(
    Permissions.Anyone,
    async (type =  "email" || "sms" || "call", to = "diego_deap@outlook.com") => {
        try {
            const { accountSid, authToken, service } = await auth()

            const client = twilio(accountSid, authToken);

            await client.verify.v2
                .services(service)
                .verifications.create({
                    channel: type,
                    to: to,
                });

            return true
        } catch (error) {
            return false
        }
    }
);

export const verify = webMethod(
    Permissions.Anyone,
    async (to = "", code = "") => {
        const { accountSid, authToken, service } = await auth()

        const client = twilio(accountSid, authToken);

        const verificationCheck = await client.verify.v2
            .services(service)
            .verificationChecks.create({
                code: code,
                to: to,
            });
        const status = verificationCheck.status === "approved" ? true : false;

        return status
    }
);

Das obige ist der detaillierte Inhalt vonMega Mart. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!