CC-Shoes: یک وب سایت تجارت الکترونیک نوآورانه برای خرید و شخصی سازی کفش های کتانی با طراحی منوی جذاب

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

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

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

علاوه بر این، یک عملکرد ورود به سیستم برای ذخیره جلسه کاربر برای زمانی که او می‌خواهد طرح‌های سفارشی به کفش‌های کتانی اضافه کند یا از صفحه نمایه اصلی بازدید کند، فراهم می‌کند.

نسخه ی نمایشی

https://oogbotemi.wixstudio.io/cc-shoes

صفحه فرود

پاورقی

ناوبری تطبیقی ​​و شبکه مانند

بخش طراحی سفارشی

شبکه بخش پاسخگو

سیار

تبلت

دسکتاپ

می توان مشاهده کرد که منوی هدر در سه تصویر بالا تطبیق می یابد، در اینجا چهارمین مورد مربوط به طراحی منوی سفارشی است.

طراحی منوی تطبیقی

سفر توسعه

1. برای تغییر رفتار انیمیشن منوی شبکه با CSS سفارشی

کد مختصر زیر در قسمت قرار می گیرد onReady پاسخ تماس در masterPage.js فایل و رفتارهای مختلف انیمیشن را برای مربع های منوی شبکه تضمین می کند.

آنها در ابتدا در کارت های مشابهی متحرک می شوند و کارت بعدی دو برابر عرض یا ارتفاع دو کارت قبلی است.

let track_click=0;
explore = $w(‘#explore-pane’),
$w(‘#open-explore’).onClick(_=>{
// [1, 2].forEach(n=>$w(‘#wishliststat’+n).label = /*wishlist count*/+’ items added’),
++track_click,
explore.customClassList.remove(‘hide’),
explore.customClassList.add(‘show’, ‘menu’)
}),
$w(‘#close-explore’).onClick(_=>{
explore.customClassList[track_click===2
? (track_click=0, ‘remove’) : ‘add’](‘hide’),
explore.customClassList.remove(‘show’, ‘menu’)
})

وقتی برای بار دوم بین کلیک‌ها کلیک می‌کنید، مربع‌های شبکه به‌صورت تکان‌خورده به نظر می‌رسند تا به‌طور مرتب در موقعیت متحرک شوند.

2. به آرامی پیوندهای مخفی را هنگام ورود نشان دهید

برخی از دکمه‌ها مانند «خروج» و «پروفایل» برای جلوگیری از حواس‌پرتی پنهان هستند و فقط پس از ورود موفقیت‌آمیز نمایش داده می‌شوند.
ولو authentication.onLogin و authentication.onLogout

روش ها این کار را بسیار آسان، ایمن و مطمئن می کنند
همچنین، دریافت و نشان دادن نام کاربری یا ایمیل ورود به سیستم اعضا بدون نیاز به رسیدگی به فرم‌ها ساده است.

import { authentication, currentMember } from “wix-members-frontend”;

const member =()=>currentMember
.getMember({fieldsets: [ ‘FULL’ ]})
.catch((error) => {
console.error(error);
});
function loggedIn(args, uS, elm) {
isLoggedIn = !0, rmStasis(), uS=$w(‘#user’),
member().then(user=>{
elm = [], [‘loginLoader’, ‘profile’, ‘to-design’, ‘logout’] .forEach((str, i, e)=>(elm.push(e=$w(‘#’+str)), e).customClassList[i?’add’:’remove’](‘show’)),
signIn.link = ‘/profile’,
console.log(‘::LOGGED IN::’, args, signIn.link),
signIn.label = ‘view profile’,
uS.text = user.loginEmail
})
}

function loggedOut(args) {
isLoggedIn = void 0, rmStasis(),
signIn.label = ‘sign in’,
[‘#logout’, ‘#profile’].forEach(str=>$w(str).customClassList.remove(‘show’))
}

authentication.onLogin(loggedIn), authentication.onLogout(loggedOut)

3. نمایش ورود ایمیل کاربران وارد شده در منوی شبکه

برای سرعت بخشیدن به توسعه با Velo، من حالت های نمایش/پنهان کردن عناصر خود را از طریق a ایجاد کردم CSS کلاسی که می توان اضافه یا حذف کرد

4. همگام سازی خودکار کد بین IDE و ویرایشگر

این یک تقویت قابل توجه برای توسعه سایت من بود زیرا می توانستم یک بار کد را در IDE بنویسم و ​​طراحی کنم، نمونه های اولیه طرح بندی ها را تقریباً بلافاصله در ویرایشگر امتحان کنم.

با تشکر از توسعه دهندگان برای ایده گنجاندن آن همراه با همکاری های بدون برخورد.

منطقه اعضای Wix
فرم های Wix
“wix-data”
“wix-members-frontend”
API آپلود فایل
Wix stores API
CMS

چالش های پیش رو

ساخت CSS سفارشی

باید ببینم که Wix چه تغییراتی را در کلاس‌های سفارشی انجام می‌دهد تا راه‌حلی پیدا کند و همچنین بدانم چه چیزی کار می‌کند و چه چیزی خوب نیست.

افزودن بخش هایی به منطقه جهانی برای قابلیت استفاده مجدد

این مرا مبهوت کرد. افزودن یک بخش به‌عنوان سراسری، همیشه قرار گرفتن در فهرست z بالای صفحه را سخت می‌کند

این یک ارسال برای چالش استودیو Wix است.

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

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

علاوه بر این، یک عملکرد ورود به سیستم برای ذخیره جلسه کاربر برای زمانی که او می‌خواهد طرح‌های سفارشی به کفش‌های کتانی اضافه کند یا از صفحه نمایه اصلی بازدید کند، فراهم می‌کند.

نسخه ی نمایشی

https://oogbotemi.wixstudio.io/cc-shoes

صفحه فرود

پاورقی

ناوبری تطبیقی ​​و شبکه مانند

بخش طراحی سفارشی

شبکه بخش پاسخگو

• سیار
  

  

• تبلت
  

  

• دسکتاپ
  

  

می توان مشاهده کرد که منوی هدر در سه تصویر بالا تطبیق می یابد، در اینجا چهارمین مورد مربوط به طراحی منوی سفارشی است.

طراحی منوی تطبیقی

سفر توسعه

1. برای تغییر رفتار انیمیشن منوی شبکه با CSS سفارشی

کد مختصر زیر در قسمت قرار می گیرد onReady پاسخ تماس در masterPage.js فایل و رفتارهای مختلف انیمیشن را برای مربع های منوی شبکه تضمین می کند.

• آنها در ابتدا در کارت های مشابهی متحرک می شوند و کارت بعدی دو برابر عرض یا ارتفاع دو کارت قبلی است.

  let track_click=0;
  explore = $w('#explore-pane'),
  $w('#open-explore').onClick(_=>{
      // [1, 2].forEach(n=>$w('#wishliststat'+n).label = /*wishlist count*/+' items added'),
      ++track_click,
      explore.customClassList.remove('hide'),
      explore.customClassList.add('show', 'menu')
  }),
  $w('#close-explore').onClick(_=>{
      explore.customClassList[track_click===2
        ? (track_click=0, 'remove') : 'add']('hide'),
      explore.customClassList.remove('show', 'menu')
  })

• وقتی برای بار دوم بین کلیک‌ها کلیک می‌کنید، مربع‌های شبکه به‌صورت تکان‌خورده به نظر می‌رسند تا به‌طور مرتب در موقعیت متحرک شوند.

2. به آرامی پیوندهای مخفی را هنگام ورود نشان دهید

برخی از دکمه‌ها مانند «خروج» و «پروفایل» برای جلوگیری از حواس‌پرتی پنهان هستند و فقط پس از ورود موفقیت‌آمیز نمایش داده می‌شوند.
ولو authentication.onLogin و authentication.onLogout

روش ها این کار را بسیار آسان، ایمن و مطمئن می کنند
همچنین، دریافت و نشان دادن نام کاربری یا ایمیل ورود به سیستم اعضا بدون نیاز به رسیدگی به فرم‌ها ساده است.

import { authentication, currentMember } from "wix-members-frontend";

const member =()=>currentMember
  .getMember({fieldsets: [ 'FULL' ]})
  .catch((error) => {
    console.error(error);
  });
function loggedIn(args, uS, elm) {
  isLoggedIn = !0, rmStasis(), uS=$w('#user'), 
  member().then(user=>{
    elm = [], ['loginLoader', 'profile', 'to-design', 'logout']
    .forEach((str, i, e)=>(elm.push(e=$w('#'+str)), e).customClassList[i?'add':'remove']('show')),
    signIn.link = '/profile',
    console.log('::LOGGED IN::', args, signIn.link),
    signIn.label = 'view profile',
    uS.text = user.loginEmail
  })
}

function loggedOut(args) {
  isLoggedIn = void 0, rmStasis(),
  signIn.label = 'sign in',
  ['#logout', '#profile'].forEach(str=>$w(str).customClassList.remove('show'))
}

authentication.onLogin(loggedIn), authentication.onLogout(loggedOut)

3. نمایش ورود ایمیل کاربران وارد شده در منوی شبکه

برای سرعت بخشیدن به توسعه با Velo، من حالت های نمایش/پنهان کردن عناصر خود را از طریق a ایجاد کردم CSS کلاسی که می توان اضافه یا حذف کرد

4. همگام سازی خودکار کد بین IDE و ویرایشگر

این یک تقویت قابل توجه برای توسعه سایت من بود زیرا می توانستم یک بار کد را در IDE بنویسم و ​​طراحی کنم، نمونه های اولیه طرح بندی ها را تقریباً بلافاصله در ویرایشگر امتحان کنم.

با تشکر از توسعه دهندگان برای ایده گنجاندن آن همراه با همکاری های بدون برخورد.

منطقه اعضای Wix
فرم های Wix
“wix-data”
“wix-members-frontend”
API آپلود فایل
Wix stores API
CMS

چالش های پیش رو

ساخت CSS سفارشی

باید ببینم که Wix چه تغییراتی را در کلاس‌های سفارشی انجام می‌دهد تا راه‌حلی پیدا کند و همچنین بدانم چه چیزی کار می‌کند و چه چیزی خوب نیست.

افزودن بخش هایی به منطقه جهانی برای قابلیت استفاده مجدد

این مرا مبهوت کرد. افزودن یک بخش به‌عنوان سراسری، همیشه قرار گرفتن در فهرست z بالای صفحه را سخت می‌کند

ek3nk4r ارسال ایمیل 2024-07-15

0 0 خواندن این مطلب 5 دقیقه زمان میبرد

فیس بوک توییتر (X) لینکدین ‫تامبلر ‫پین‌ترست ‫رددیت ‫VKontakte ‫Odnoklassniki پاکت