ShopEase – انجمن DEV

Summarize this content to 400 words in Persian Lang
این یک ارسال برای چالش استودیو Wix است.

چیزی که من ساختم

من یک وب سایت تجارت الکترونیک کاملاً کاربردی به نام ShopEase با استفاده از Wix Studio ساختم. ShopEase بر تبلیغ و فروش محصولات سازگار با محیط زیست، به ویژه کیسه های قابل استفاده مجدد تمرکز دارد. این وب سایت دارای یک صفحه اصلی پویا با بخش هایی برای محصولات ویژه، بنرهای تبلیغاتی و ناوبری یکپارچه است.

نسخه ی نمایشی

https://swetakanguri.wixsite.com/shopease

سفر توسعه

استفاده از قابلیت های توسعه جاوا اسکریپت Wix Studioمن از قابلیت های جاوا اسکریپت قدرتمند Wix Studio برای بهبود عملکرد و تعامل وب سایت ShopEase استفاده کردم:

توابع جاوا اسکریپت سفارشی: جاوا اسکریپت سفارشی برای افزودن عناصر تعاملی مانند افکت های شناور و به روز رسانی محتوای پویا پیاده سازی شده است.

جاوا اسکریپتجلوه های شناور برای متن بنر:

جاوا اسکریپتکد را کپی کنید// متن بنر را در حالت شناور تغییر دهید$w.onReady(function () {$w(“#bannerText”).onMouseIn(() => {$w(“#bannerText”).text = “از دست ندهید – پیشنهاد زمان محدود!”;})؛

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

})؛این اسکریپت متن #bannerText را هنگامی که کاربر روی آن قرار می‌گیرد تغییر می‌دهد و محتوای پویا را بر اساس تعامل کاربر ارائه می‌کند.

لیست محصولات پویا:

جاوا اسکریپتکد را کپی کنید// داده های محصول را به صورت پویا واکشی و نمایش دهیدوارد کردن wixData از 'wix-data'.

$w.onReady(function () {wixData.query (“محصولات”).پیدا کردن().then((نتایج) => {let items = results.item;items.forEach((product) => {// نمایش جزئیات محصول در صفحه$w(“#productList”).append(${product.name} – $${product.price})})؛}).catch((خطا) => {console.log(“خطا در واکشی محصولات: “، خطا);})؛})؛این اسکریپت داده های محصول را از مجموعه ای به نام “محصولات” واکشی می کند و به صورت پویا نام و قیمت هر محصول را در وب سایت نمایش می دهد.

فعال سازی منوی ناوبری:

جاوا اسکریپت// آیتم منوی پیمایش را بر اساس صفحه فعلی فعال کنید$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): برای توسعه جاوا اسکریپت سفارشی استفاده شده است که تعاملات پیشرفته و مدیریت داده ها را امکان پذیر می کند.ویرایشگر Wix: برای سفارشی سازی بصری و طراحی چیدمان استفاده می شود.Wix Stores API: برای مدیریت داده های محصول و نمایش اطلاعات در وب سایت یکپارچه شده است وارد کردن wixStoresBackend از 'wix-stores-backend'.

// تابع مثال برای واکشی محصولات از Wix Stores APIتابع async fetchProducts() {تلاش كردن {// محصولات را با استفاده از Wix Stores API جستجو کنیدconst products = await wixStoresBackend.products.query().limit(10) // تعداد محصولات برگشتی را محدود کنید.پیدا کردن()؛

// 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()سپس (محصولات => {// داده های محصولات را در صورت نیاز مدیریت کنیدconsole.log('محصولات واکشی شده:', products);}).catch(خطا => {// رسیدگی به خطاهاconsole.error('خطا در واکشی محصولات:', خطا);})؛

ارسالی تیم: https://dev.to/sweta_kangurisonulkar_ ارسال و اعتبار Sweta Kanguri Sonulkar را منتشر کرد

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

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

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