بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
40 تا 60 درصد تخفیف برای دوره های جامع سایت

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

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

0 242

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

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

توجه : این ویدئو یک پیش نمایش است . این دوره در 10 قسمت اول به شکل رایگان ارائه شده است و از جلسه 10 ، تمامی قسمت ها به شکل پیش نمایش قرار می گیرند .

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

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

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

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

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

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

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

فیروز بیگلری

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

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