易購

這是 Wix Studio 挑戰賽的投稿內容。

我建造了什麼

我使用 Wix Studio 建立了一個功能齊全的電子商務網站，名為 ShopEase。 ShopEase 專注於推廣和銷售環保產品，特別是可重複使用的袋子。該網站具有動態主頁，其中包含特色產品、促銷橫幅和無縫導航的部分。

示範

https://swetakanguri.wixsite.com/shopease

發展歷程

利用 Wix Studio 的 JavaScript 開發能力
我利用Wix Studio強大的JavaScript功能來增強ShopEase網站的功能和互動性：

自訂 JavaScript 函數：實作自訂 JavaScript 以新增互動元素，例如懸停效果和動態內容更新。

javascript
橫幅文字的懸停效果：

javascript
複製程式碼
// 更改懸停時的橫幅文字
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "不要錯過 - 限時優惠！";
});

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

});
當使用者將滑鼠懸停在 #bannerText 上時，此腳本會變更 #bannerText 的文本，從而根據使用者互動提供動態內容。

動態產品清單：

javascript
複製程式碼
// 動態取得並顯示產品資料
從 'wix-data' 導入 wixData;

$w.onReady(function () {
wixData.query("產品")
.find()
.then((結果) => {
讓 items = results.items;
items.forEach((產品) => {
// 在頁面上顯示商品詳情
$w("#productList").append(

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

);
});
})
.catch((錯誤) => {
console.log("取得產品時發生錯誤：", error);
});
});
該腳本從名為「Products」的集合中獲取產品數據，並在網站上動態顯示每個產品的名稱和價格。

導航選單啟動：

javascript
// 根據目前頁面啟動導覽選單項目
$w.onReady(function () {
讓 currentPage = window.location.pathname;
$w("#navMenu").forEach((menuItem) => {
if (menuItem.link === currentPage) {
menuItem.activate();
}
});
});
此腳本啟動與目前頁面 URL 相對應的導覽選單項，向使用者提供有關其在網站上目前位置的視覺回饋。

// 範例：更改懸停時的橫幅文字
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "不要錯過 - 限時優惠！";
});

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

});

使用的 API 和函式庫

Wix Velo (Corvid)：用於自訂 JavaScript 開發，實現高階互動和資料處理。
Wix Editor：用於視覺自訂和佈局設計。
Wix Stores API：整合以管理產品資料並在網站上顯示資訊
從 'wix-stores-backend' 匯入 wixStoresBackend;

// 從 Wix Stores API 取得產品的範例函數
非同步函數 fetchProducts() {
嘗試{
// 使用 Wix Stores API 查詢產品
const products = 等待 wixStoresBackend.products.query()
.limit(10) // 限制回傳的產品數量
.find();

    // 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
}

}

// 用法範例
fetchProducts()
.then(產品 => {
// 依需要處理產品資料
console.log('取得的產品：', products);
})
.catch(錯誤=> {
// 處理錯誤
console.error('取得產品時發生錯誤：', error);
});

團隊提交內容：https://dev.to/sweta_kangurisonulkar_ 發布了提交內容並註明 Sweta Kanguri Sonulkar

以上是易購的詳細內容。更多資訊請關注PHP中文網其他相關文章！