جلسه چهل و هفتم – آموزش طراحی سایت فروشگاهی با وردپرس

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

یک محصول در فروشگاه بخش های زیادی دارد مثل امتیاز محصول ، نظرات ، توضیحات ، ویژگی های محصول ، تصویر محصول ، گالری ، دکمه ثبت تعداد محصول ، دکمه سفارش محصول ، بخش قیمت ها و … که باید یاد گرفت این قسمت ها را چگونه کدنویسی کنیم و وابسته به پلاگین ووکامرس و فایل های داخل پلاگین نباشیم ( کدنویسی استاندارد و بدون مشکل ) . پس در این جلسه قسمت های خیلی زیادی را قرار است با هم یاد بگیریم . قسمت هایی مثل عنوان محصول ، قیمت ، لینک خرید ، نمایش تصویر اصلی محصول ، نمایش گالری محصولات و … که در این جلسه سعی می کنیم بیش از 70% این صفحه را دقیقا مطابق با دیزاینی که طراحی کردیم برنامه نویسی کنیم .

البته کدنویسی این بخش در دو قسمت انجام خواهد شد . در این جلسه قسمت های زیادی را یاد خواهید گرفت و چند قسمت باقیمانده مثل توضیحات و امتیاز و … در جلسه بعدی آموزش داده خواهد شد تا صفحه جزئیات محصول به اتمام رسیده و به سراغ سایر قسمت ها همچون تسویه حساب و سبد و حساب کاربری و … برویم .

جزئیات محصولات و تجربه کاربری مناسب

همانظور که گفته شد این صفحه یعنی صفحه جزئیات محصول ، تنها صفحه در سایت است که تمام جزئیات یک محصول در آن نمایش داده می شود و عملا صفحه دیگری برای این کار وجود ندارد . پس با این توصیفات باید دید که برای یک محصول چه ویژگی هایی را می توان در نظر داشت .

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

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

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

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