ShopEase-tutorial js-php.cn

ShopEase

WBOY

Lepaskan： 2024-07-17 12:35:40

asal

1073 orang telah melayarinya

Ini adalah penyerahan untuk Cabaran Wix Studio .

Apa yang Saya Bina

Saya membina tapak web e-dagang berfungsi sepenuhnya yang dipanggil ShopEase menggunakan Wix Studio. ShopEase memfokuskan pada mempromosikan dan menjual produk mesra alam, khususnya beg boleh guna semula. Tapak web ini menampilkan halaman utama dinamik dengan bahagian untuk produk yang ditampilkan, sepanduk promosi dan navigasi yang lancar.

Demo

https://swetakanguri.wixsite.com/shopease

Image description

Kembara Pembangunan

Memanfaatkan Keupayaan Pembangunan JavaScript Wix Studio
Saya menggunakan keupayaan JavaScript hebat Wix Studio untuk meningkatkan fungsi dan interaktiviti tapak web ShopEase:

Fungsi JavaScript Tersuai: Melaksanakan JavaScript tersuai untuk menambah elemen interaktif seperti kesan tuding dan kemas kini kandungan dinamik.

javascript
Kesan Tuding untuk Teks Sepanduk:

javascript
Salin kod
// Tukar teks sepanduk pada tuding
$w.onReady(fungsi () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Jangan Terlepas - Tawaran Masa Terhad!";
});

$w("#bannerText").onMouseOut(() => {
    $w("#bannerText").text = "Summer Sale - Up to 50% Off";
});

Salin selepas log masuk

});
Skrip ini menukar teks #bannerText apabila pengguna menuding ke atasnya, menyediakan kandungan dinamik berdasarkan interaksi pengguna.

Penyenaraian Produk Dinamik:

javascript
Salin kod
// Ambil dan paparkan data produk secara dinamik
import wixData daripada 'wix-data';

$w.onReady(fungsi () {
wixData.query("Produk")
.cari()
.then((hasil) => {
biarkan item = hasil.item;
item.forEach((produk) => {
// Paparkan butiran produk pada halaman
$w("#productList").append(

${product.name} - $${product.price}

);
});
})
.catch((error) => {
console.log("Ralat mengambil produk: ", ralat);
});
});
Skrip ini mengambil data produk daripada koleksi bernama "Produk" dan memaparkan nama dan harga setiap produk secara dinamik di tapak web.

Pengaktifan Menu Navigasi:

javascript
// Aktifkan item menu navigasi berdasarkan halaman semasa
$w.onReady(fungsi () {
biarkan currentPage = window.location.pathname;
$w("#navMenu").forEach((menuItem) => {
if (menuItem.link === currentPage) {
menuItem.activate();
}
});
});
Skrip ini mengaktifkan item menu navigasi yang sepadan dengan URL halaman semasa, memberikan maklum balas visual kepada pengguna tentang lokasi semasa mereka di tapak.

// Contoh: Tukar teks sepanduk pada tuding
$w.onReady(fungsi () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Jangan Terlepas - Tawaran Masa Terhad!";
});

$w("#bannerText").onMouseOut(() => {
    $w("#bannerText").text = "Summer Sale - Up to 50% Off";
});

Salin selepas log masuk

});

API dan Perpustakaan Digunakan

Wix Velo (Corvid): Dimanfaatkan untuk pembangunan JavaScript tersuai, mendayakan interaksi lanjutan dan pengendalian data.
Editor Wix: Digunakan untuk penyesuaian visual dan reka bentuk reka letak.
Wix Stores API: Bersepadu untuk mengurus data produk dan memaparkan maklumat di tapak web
import wixStoresBackend daripada 'wix-stores-backend';

// Contoh fungsi untuk mengambil produk daripada Wix Stores API
fungsi async fetchProducts() {
cuba {
// Pertanyaan produk menggunakan Wix Stores API
produk const = tunggu wixStoresBackend.products.query()
.limit(10) // Hadkan bilangan produk yang dikembalikan
.cari();

    // Process the products data
    products.items.forEach(product => {
        console.log(`Product Name: ${product.name}, Price: ${product.price}`);
        // Further processing or display logic can be added here
    });

    return products.items; // Return the products array if needed
} catch (error) {
    console.error('Error fetching products:', error);
    throw error; // Handle or rethrow the error as needed
}

Salin selepas log masuk

}

// Contoh penggunaan
fetchProducts()
.then(produk => {
// Kendalikan data produk mengikut keperluan
console.log('Produk yang diambil:', produk);
})
.catch(error => {
// Tangani ralat
console.error('Ralat mengambil produk:', ralat);
});