Achetez facilement

Ceci est une soumission pour le Wix Studio Challenge .

Ce que j'ai construit

J'ai créé un site Web de commerce électronique entièrement fonctionnel appelé ShopEase à l'aide de Wix Studio. ShopEase se concentre sur la promotion et la vente de produits respectueux de l'environnement, en particulier de sacs réutilisables. Le site Web présente une page d'accueil dynamique avec des sections pour les produits en vedette, des bannières promotionnelles et une navigation fluide.

Démo

https://swetakanguri.wixsite.com/shopease

Parcours de développement

Exploiter les capacités de développement JavaScript de Wix Studio
J'ai utilisé les puissantes capacités JavaScript de Wix Studio pour améliorer les fonctionnalités et l'interactivité du site Web ShopEase :

Fonctions JavaScript personnalisées : implémentation de JavaScript personnalisé pour ajouter des éléments interactifs tels que des effets de survol et des mises à jour de contenu dynamiques.

javascript
Effets de survol pour le texte de la bannière :

javascript
Copier le code
// Changer le texte de la bannière au survol
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Ne manquez pas cette offre - Offre à durée limitée !";
});

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

});
Ce script modifie le texte de #bannerText lorsqu'un utilisateur le survole, fournissant un contenu dynamique basé sur l'interaction de l'utilisateur.

Liste de produits dynamique :

javascript
Copier le code
// Récupérer et afficher dynamiquement les données du produit
importer wixData depuis 'wix-data' ;

$w.onReady(function () {
wixData.query("Produits")
.find()
.then((résultats) => {
let items = résultats.items;
items.forEach((produit) => {
// Afficher les détails du produit sur la page
$w("#productList").append(

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

);
});
})
.catch((erreur) => {
console.log("Erreur lors de la récupération des produits : ", erreur);
});
});
Ce script récupère les données produit d'une collection nommée « Produits » et affiche dynamiquement le nom et le prix de chaque produit sur le site Web.

Activation du menu de navigation :

javascript
// Activer l'élément de menu de navigation en fonction de la page actuelle
$w.onReady(function () {
laissez currentPage = window.location.pathname;
$w("#navMenu").forEach((menuItem) => {
if (menuItem.link === currentPage) {
menuItem.activate();
>
});
});
Ce script active l'élément de menu de navigation qui correspond à l'URL de la page actuelle, fournissant un retour visuel aux utilisateurs sur leur emplacement actuel sur le site.

// Exemple : Modifier le texte de la bannière au survol
$w.onReady(function () {
$w("#bannerText").onMouseIn(() => {
$w("#bannerText").text = "Ne manquez pas cette offre - Offre à durée limitée !";
});

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

});

API et bibliothèques utilisées

Wix Velo (Corvid) : exploité pour le développement JavaScript personnalisé, permettant des interactions avancées et une gestion des données.
Éditeur Wix : utilisé pour la personnalisation visuelle et la conception de la mise en page.
API Wix Stores : intégrée pour gérer les données produits et afficher les informations sur le site Web
importer wixStoresBackend depuis 'wix-stores-backend' ;

// Exemple de fonction pour récupérer des produits depuis l'API Wix Stores
fonction asynchrone fetchProducts() {
essayez {
// Interroger des produits à l'aide de l'API Wix Stores
const products = wait wixStoresBackend.products.query()
.limit(10) // Limiter le nombre de produits retournés
.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
}

}

// Exemple d'utilisation
récupérerProduits()
.then(produits => {
// Gérer les données des produits selon les besoins
console.log('Produits récupérés :', produits);
})
.catch(erreur => {
// Gérer les erreurs
console.error('Erreur lors de la récupération des produits :', erreur);
});

Soumissions de l'équipe : https://dev.to/sweta_kangurisonulkar_ a publié la soumission et le crédit de Sweta Kanguri Sonulkar

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!