نحوه ساخت بخش سبد خرید با HTML و CSS و جاوااسکریپت

س

ساخت بخش سبد خرید شاید مهمترین قسمت از قالب فروشگاهی شما باشد. در این مطلب می خواهیم نحوه ساخت بخش سبد خرید باHTML و CSS و جاوا اسکریپت را به نحوی به شما آموزش بدهیم تا حتی اشخاصی که هیچ نوع آشنایی با علم برنامه نویسی ندارند نیز بتوانند این عمل را انجام دهند. پس فرقی نمی کند شما در چه سطحی از دانش هستید ، با ما همراه باشید تا ساخت بخش سبد خرید را آموزش ببینید.

ساخت بخش سبد خرید

این تصویری از کار نهایی ما می باشد.

ساختار HTML

در اولین قدم می بایست ساختار HTML خود را بسازیم.
ما برای ساختار HTML  احتیاج به یک div به عنوان ظرف داریم. نام کلاس این ظرف را “shopping-cart.”  می گذاریم. ما در داخل این ظرف یک عنوان و سه آیتم خواهیم داشت که هرکدام شامل مواردی می باشند که در زیر از آنها نام می بریم:

  • عنوان و توضیح محصول
  • تصویر محصول
  • دو دکمه شامل : دکمه اول علاقه مندی و دکمه دوم حذف
  • دکمه هایی برای تعیین محصول قابل خرید
  • قیمت نهایی

CSS

شما با استفاده از کد های CSS می توانید شکل ظاهری سایت خود را تغییر دهید. فقط کافی است کد های زیر را در فایل استایل خود قرار بدهید.

ما حتی می توانیم سایز سبد خریدمان را هم خود معین کنیم و آن را به شکل زیبایی نمایش بدهیم. برای اینکه ما از Flexbox استفاده می کنیم می بایست توجه داشته باشیم خصوصیات  display را بر اساس flex در نظر بگیریم. برای اینکه پیش فرض flex direction  به صورت row تنظیم شده است باید آن را به حالت column  تغییر داد و سایز سبد را ۷۵۰×۴۲۳ در بیاوریم

سپس ، اولین آیتم عنوان سبد خرید است ، ارتفاع آن را ۶۰ قرار می دهیم و استایل های پایه ای برایش قرار می دهیم. بعد از آن برای سه ایتم بعد display  انها را به حالت flex  در می اوریم و ارتفاع آن ها را ۱۲۰ قرار می دهیم

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

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

زمانی که روی دکمه ها کلیک می شود ما کلاس “is-active” را تعریف می کنیم. با استفاده از این کلاس در هر بار کلیک کردن ،جی کوئری فعال می شود. سپس حرکت انیمیشنی دکمه اتفاق میافتد

در این مرحله برای تصاویر margin را ۵۰px از راست تعیین می کنیم و به تصاویر محصولات خود استایل می دهیم.

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

و در آخرین مرحله نیز قیمت نهایی محصولات را استایل دهی می کنیم.

با استفاده از کد زیر سبد خریدمان را ریسپانسیو می کنیم.

خب این از CSS!

جاوااسکریپت

یک کد به صورت زیر بین تگ ها در فایل html قرار می دهیم.

یک تکه کد به صورت زیر بگذارید:

از این به بعد همه کد ها را در بین دو تگ بالا قرار می دهیم.

کد جاوااسکریپت زیر را برای حرکت انیمیشنی قلب ایجاد می کنیم.

برای فعال شدن دکمه های افزایش و کاهش تعداد محصول کد زیر را اضافه می کنیم.

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)