Mega Mart

Ini adalah penyerahan untuk Cabaran Wix Studio.

Latar belakang

Mengapa mengikut kaedah lapuk apabila AI sedang mengubah landskap perniagaan? Saya mencipta e-dagang ini kerana pada masa kini AI adalah trend untuk syarikat. Mega Mart ialah platform yang bukan sahaja menawarkan pelbagai jenis produk tetapi juga mempertingkatkan UI/UX melalui ciri termaju yang dibuat dalam Wix Studio.

---

Apa yang Saya Bina

Saya membangunkan pilihan carian AI lanjutan untuk menyelesaikan isu penemuan produk yang tidak cekap, mempunyai matlamat untuk mencipta pengalaman membeli-belah yang lebih intuitif dan menyeronokkan untuk pengguna.

Pernahkah anda melihat seseorang memakai t-shirt yang anda suka tetapi tidak mahu bertanya jenamanya? Dengan Pasaran Mega, hanya ambil gambar dan muat naik ke platform kami; kami akan mencarinya dalam pangkalan data produk kami.

Mengapa pergi ke pusat membeli-belah apabila anda boleh mencari produk yang anda inginkan seperti yang anda tanyakan kepada pekerja kedai? Hanya tulis pertanyaan anda dalam bahasa semula jadi dan kami akan menunjukkan kepada anda contoh produk yang anda cari. Contohnya, cuba taip Saya perlukan jaket musim sejuk untuk wanita atau saya mahu telefon pintar hitam dengan kamera.

Bahagian terbaiknya ialah tapak itu tidak memerlukan langganan Wix untuk menyelesaikan proses pembayaran kerana ia dibina sepenuhnya menggunakan elemen Wix dan API Velo.

---

Cara beli di Mega Market

Buat akaun (atau tidak...)

Di Mega Mart, anda mempunyai pilihan untuk membeli produk dengan atau tanpa akaun.
Mencipta akaun menawarkan beberapa faedah:

• Semasa pembayaran, maklumat peribadi anda dan alamat sebelumnya diisi secara automatik, menjimatkan masa anda.
• Selain itu, anda menerima pulangan tunai segera yang boleh digunakan untuk pembelian akan datang.
• Suka produk tetapi masih belum mahu membelinya? Akaun anda termasuk ciri senarai hajat, membolehkan anda menyimpan produk untuk kemudian.

Cari item produk

Seperti yang dinyatakan sebelum ini, anda boleh mencari produk dengan memuat naik imej daripada peranti anda, menggunakan AI atau menyemak imbas semua item untuk memilih yang paling anda sukai.

Sahkan Troli Anda

Sebelum mendaftar keluar, pastikan anda telah menambahkan semua produk yang diingini pada troli anda. Laraskan kuantiti item jika perlu atau padam sebarang kesilapan. Selain itu, semak jumlah anda dan anggaran tarikh penghantaran.

Checkout

Jika anda log masuk, maklumat peribadi anda akan secara automatik diisi. Anda boleh memilih salah satu daripada alamat yang disimpan sebelum ini atau masukkan yang baharu, yang akan ditambahkan pada akaun anda untuk pesanan akan datang.
Masukkan maklumat kad kredit atau debit anda, kemudian klik butang terakhir untuk melengkapkan pembayaran.

Pesanan anda telah selesai!

Anda akan diubah hala ke halaman pesanan, di mana anda boleh melihat butiran pembelian anda dan statusnya: sama ada ia sedang diproses, dalam transit untuk penghantaran atau sudah dihantar. Anda juga akan menerima e-mel pengesahan pesanan anda.

---

Faedah Mega Mart

Tanpa kata laluan

Siapa yang mahu mengingati kata laluan hari ini? Di Mega Mart, anda tidak perlu risau tentang mereka; setiap kali anda ingin log masuk ke akaun anda, anda akan menerima kod digit satu kali melalui e-mel, SMS atau panggilan.

Pulangan tunai

Siapa yang tidak suka mendapat ganjaran untuk membeli-belah? Setiap kali anda membeli di Mega Mart, anda akan menerima 1% pulangan tunai, yang boleh anda gunakan untuk membayar pesanan akan datang.

Senarai hajat

Pernah menemui produk yang anda suka tetapi belum bersedia untuk membeli lagi? Di Mega Mart, anda boleh simpan ke senarai hajat anda untuk pembelian akan datang.

Status pesanan

Anda tidak perlu bertukar antara halaman untuk melihat status penghantaran anda. Daripada halaman pesanan, anda boleh menyemak dengan mudah sama ada dalam proses, dalam transit atau sudah dihantar.

Responsif penuh

Pernah tertanya-tanya sama ada tapak web boleh sama lancar pada komputer, tablet atau telefon anda? Di Mega Mart, tapak kami responsif sepenuhnya pada semua peranti.

Simpan alamat anda

Ingin tahu betapa mudahnya membeli-belah? Di Mega Mart, alamat anda disimpan untuk pembelian masa hadapan dan anda boleh mengurusnya dengan mudah daripada halaman akaun anda.

Tiada akaun diperlukan

Walaupun banyak tapak e-dagang memerlukan penciptaan akaun untuk membeli-belah, di Mega Mart, anda boleh membeli sebagai tetamu. Walau bagaimanapun, ingat semua faedah yang anda boleh perolehi sebagai pelanggan kerap Mega Mart.

---

Kembara Pembangunan

Menggunakan Wix Studio telah membantu saya mempercepatkan pembangunan bahagian hadapan, dengan ketara mengurangkan masa sambil memastikan reka bentuk responsif sepenuhnya merentas semua peranti. JavaScript memainkan peranan penting dalam meningkatkan interaksi pengguna dengan elemen Wix Studio, membolehkan ciri dinamik dengan lancar. Selain itu, tapak kami menggunakan langkah keselamatan yang teguh, termasuk pangkalan data, kaedah web dan keselamatan penghala, untuk melindungi data pengguna dan memastikan pengalaman penyemakan imbas yang selamat.

Sebelum menyelami cara saya mencipta Mega Mart, adalah penting untuk mengatakan bahawa saya tidak memasang sebarang apl daripada Pasaran Wix. Semasa saya menggunakan Kedai Wix untuk menyimpan produk ke troli dan kemudian mendapatkannya semula dalam beberapa halaman, saya memilih untuk membina halaman produk, troli dan halaman daftar keluar sepenuhnya dari awal menggunakan Wix Elements.

Penafian
Oleh kerana ini adalah demo untuk peraduan, saya hanya menyimpan 29 produk dalam pangkalan data. Untuk memanfaatkan sepenuhnya kaedah pengecaman produk imej AI dan carian AI, sila biasakan diri anda terlebih dahulu dengan produk yang tersedia di kedai. Contohnya, mencari pencetak atau tukul mungkin tidak membuahkan hasil, kerana item ini tiada dalam pangkalan data demo. Walau bagaimanapun, jika projek ini dipertingkatkan untuk syarikat besar seperti Home Depot atau Walmart, yang mempunyai beribu-ribu produk dalam pangkalan data mereka, fungsi AI akan melakukan carian yang komprehensif dan memberikan hasil yang lebih luas.

---

Cubalah!

Ingin melihat apa yang Mega Mart boleh bawa kepada pengalaman membeli-belah anda? Klik untuk meneroka dan menemui kemungkinan.
Jom!

---

Bagaimana saya membinanya

Membangunkan tapak e-dagang ini bukanlah mudah, terutamanya memandangkan garis masa yang ketat, tetapi saya berbangga kerana telah membinanya dengan semua fungsinya dalam masa 2 minggu sahaja.

Rumah

Halaman pertama yang saya bangunkan ialah halaman utama, di mana saya menyasarkan untuk menggabungkan ciri yang biasa ditemui dalam tapak e-dagang lain seperti mempamerkan penjual terbaik, pendatang baharu dan menyerlahkan faedah membeli-belah di kedai.
Di bawah ialah contoh cara saya mendapatkan semula data untuk penjual terbaik dan produk terbaharu dalam kod.

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}`)
    })
})

Seperti yang anda boleh lihat, kod itu juga termasuk logik untuk mengesan sama ada pengguna menyemak imbas pada peranti mudah alih atau tidak. Dalam paparan mudah alih, pengulang dipaparkan dalam dua lajur, manakala dalam mod tablet dan komputer, ia disusun dalam satu baris dengan lima lajur.

Log masuk & Daftar

Saya percaya bahawa halaman daftar dan log masuk harus mempunyai antara muka UI/UX yang intuitif. Jika salah satu proses sukar atau mengecewakan pengguna, mereka mungkin meninggalkan tapak tersebut, mengakibatkan jualan hilang.
Untuk mengelakkan ini, Mega Mart menggunakan sistem tanpa kata laluan. Setiap kali anda ingin log masuk, kod sekali akan dihantar melalui SMS, panggilan atau e-mel, menghapuskan keperluan untuk mengingati berbilang kata laluan.

Daftar

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()
})

Kod ini mengendalikan proses pendaftaran apabila butang diklik. Jika kotak input kod pengesahan kelihatan dan input kod pengesahan adalah sah, ia mengesahkan e-mel atau nombor telefon pengguna dengan kod pengesahan yang diberikan. Jika salah satu pengesahan berjaya, ia cuba mendaftarkan pengguna dan kemudian menggunakan token sesi untuk pengesahan. Jika pengesahan gagal, mesej ralat dipaparkan.
Jika kotak tidak kelihatan, ia menghantar kod pengesahan ke e-mel dan telefon pengguna, kemudian mengemas kini UI untuk membolehkan pengguna melengkapkan pendaftaran.

Log masuk

Menghantar kod pengesahan kepada pengguna

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()
    }
})

Ia mula-mula mengesahkan kewujudan e-mel atau nombor telefon yang dimasukkan.
Bergantung pada butang yang diklik, ia menghantar kod pengesahan melalui e-mel, SMS atau panggilan. Kemudian ia mengembangkan input kod pengesahan untuk pengguna menulis kod yang diterima.
Jika pengesahan gagal, mesej ralat yang sesuai dipaparkan. Akhirnya, imej yang dimuatkan disembunyikan dan butang didayakan semula.

Mengesahkan kod pengesahan

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()
    }

}

Ia mengesahkan kod yang disediakan berdasarkan jenis pengesahan (e-mel atau telefon). Jika pengesahan berjaya, ia cuba melog masuk pengguna dan menggunakan token sesi untuk pengesahan.

Mengubah hala pengguna

Sama ada pengguna sedang log masuk atau mendaftar, selepas proses yang berjaya, mereka akan dialihkan ke halaman terakhir yang mereka lawati.

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

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

Tetingkap bar carian

Untuk membolehkan pengguna mencari produk dari mana-mana halaman, saya menambahkan bar carian di dalam peti cahaya.

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
    }
);

Atas ialah kandungan terperinci Mega Mart. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!