ショップイーズ

これは Wix Studio チャレンジへの提出物です。

私が作ったもの

Wix Studio を使用して、ShopEase という完全に機能する電子商取引ウェブサイトを構築しました。 ShopEase は、環境に優しい製品、特に再利用可能なバッグの宣伝と販売に重点を置いています。この Web サイトは、注目の製品、プロモーション バナー、シームレスなナビゲーションのセクションを備えた動的なホームページを備えています。

デモ

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 の上にマウスを移動するとそのテキストを変更し、ユーザーの操作に基づいて動的なコンテンツを提供します。

動的商品リスト:

JavaScript
コードをコピー
// 商品データを動的に取得して表示します
import wixData から 'wix-data';

$w.onReady(function () {
wixData.query("製品")
.find()
.then((結果) => {
let items = results.items;
items.forEach((製品) => {
// ページに商品の詳細を表示します
$w("#productList").append(

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

);
});
})
.catch((エラー) => {
console.log("製品の取得エラー: ", error);
});
});
このスクリプトは、「Products」という名前のコレクションから製品データを取得し、各製品の名前と価格を Web サイトに動的に表示します。

ナビゲーション メニューのアクティブ化:

JavaScript
// 現在のページに基づいてナビゲーション メニュー項目をアクティブ化します
$w.onReady(function () {
let 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 エディタ: ビジュアルカスタマイズとレイアウトデザインに使用されます。
Wix ストア API: 商品データを管理し、ウェブサイトに情報を表示するために統合
import wixStoresBackend from 'wix-stores-backend';

// Wix ストア API から商品を取得する関数の例
非同期関数 fetchProducts() {
{
を試してください // Wix ストア API を使用して商品をクエリします
const products = await 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(error => {
// エラーを処理します
console.error('製品の取得エラー:', error);
});

チームの提出物: https://dev.to/sweta_kangurisonulkar_ 提出物とクレジットを公開 Sweta Kanguri Sonulkar

以上がショップイーズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。