ShopEase

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

Was ich gebaut habe

Ich habe mit Wix Studio eine voll funktionsfähige E-Commerce-Website namens ShopEase erstellt. ShopEase konzentriert sich auf die Förderung und den Verkauf umweltfreundlicher Produkte, insbesondere wiederverwendbarer Taschen. Die Website verfügt über eine dynamische Homepage mit Abschnitten für vorgestellte Produkte, Werbebannern und nahtloser Navigation.

Demo

https://swetakanguri.wixsite.com/shopease

Entwicklungsreise

Nutzung der JavaScript-Entwicklungsfunktionen von Wix Studio
Ich habe die leistungsstarken JavaScript-Funktionen von Wix Studio genutzt, um die Funktionalität und Interaktivität der ShopEase-Website zu verbessern:

Benutzerdefinierte JavaScript-Funktionen: Benutzerdefiniertes JavaScript implementiert, um interaktive Elemente wie Hover-Effekte und dynamische Inhaltsaktualisierungen hinzuzufügen.

Javascript
Hover-Effekte für Bannertext:

Javascript
Code kopieren
// Bannertext bei Hover ändern
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Nicht verpassen – zeitlich begrenztes Angebot!";
});

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

});
Dieses Skript ändert den Text von #bannerText, wenn ein Benutzer mit der Maus darüber fährt, und stellt dynamische Inhalte basierend auf Benutzerinteraktion bereit.

Dynamische Produktliste:

Javascript
Code kopieren
// Produktdaten dynamisch abrufen und anzeigen
wixData aus 'wix-data' importieren;

$w.onReady(function () {
wixData.query("Produkte")
.find()
.then((results) => {
let items = results.items;
items.forEach((product) => {
// Produktdetails auf der Seite anzeigen
$w("#productList").append(

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

);
});
})
.catch((error) => {
console.log("Fehler beim Abrufen von Produkten: ", Fehler);
});
});
Dieses Skript ruft Produktdaten aus einer Sammlung namens „Produkte“ ab und zeigt den Namen und Preis jedes Produkts dynamisch auf der Website an.

Aktivierung des Navigationsmenüs:

Javascript
// Navigationsmenüelement basierend auf der aktuellen Seite aktivieren
$w.onReady(function () {
let currentPage = window.location.pathname;
$w("#navMenu").forEach((menuItem) => {
if (menuItem.link === currentPage) {
menuItem.activate();
}
});
});
Dieses Skript aktiviert den Navigationsmenüpunkt, der der aktuellen Seiten-URL entspricht, und gibt Benutzern visuelles Feedback zu ihrem aktuellen Standort auf der Website.

// Beispiel: Bannertext beim Hover ändern
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Nicht verpassen – zeitlich begrenztes Angebot!";
});

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

});

Verwendete APIs und Bibliotheken

Wix Velo (Corvid): Wird für die benutzerdefinierte JavaScript-Entwicklung genutzt und ermöglicht erweiterte Interaktionen und Datenverarbeitung.
Wix Editor: Wird zur visuellen Anpassung und Layoutgestaltung verwendet.
Wix Stores API: Integriert, um Produktdaten zu verwalten und Informationen auf der Website anzuzeigen
wixStoresBackend aus 'wix-stores-backend' importieren;

// Beispielfunktion zum Abrufen von Produkten von der Wix Stores API
asynchrone Funktion fetchProducts() {
versuche es mit {
// Produkte mit der Wix Stores API abfragen
const products = wait wixStoresBackend.products.query()
.limit(10) // Anzahl der zurückgegebenen Produkte begrenzen
.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
}

}

// Beispielverwendung
fetchProducts()
.then(products => {
// Produktdaten nach Bedarf verarbeiten
console.log('Abgerufene Produkte:', Produkte);
})
.catch(error => {
// Fehler behandeln
console.error('Fehler beim Abrufen der Produkte:', Fehler);
});

Team-Einreichungen: https://dev.to/sweta_kangurisonulkar_ hat die Einreichung veröffentlicht und Sweta Kanguri Sonulkar genannt

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