اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس

اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس

woocommerce میتوان گفت رایج ترین روش جهت فروش محصولات با استفاده از wordpress تقریبا %۲۵ از فروشگاههای اینترنتی فعال ساخته شده با افزونه woocommerce است. تقریبا %۳۹ از تمام فروشگاههای اینترنتی (درون خطی) را فعال می سازد و استفاده از این دو با هم روشی مطمئن جهت عرضئه کالا به مشتریان شماست ولی مانند هر نرم افزار اوقاتی هست که ما یا سرویس گیرنده های ما اغلب میخواهیم مجموعه ویژگی ها را در جریان عرضه گسترش دهیم .

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

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

 

ابزار های لازم

قیل از اینکه شروع کنیم فرض می کنم که شما مجموعه ی زیر را روی کامپیوتر خودتان دارید :

  • سیستم عامل انتخابی شما – من macOS را به کار خواهم برد
  • حداقل ورژن پی اچ پی php 5.6.25 ، من php 7 را به کار خواهم برد
  • ۵٫۶٫۳۳ MySQL
  • Nginx یا Apache
  • WordPress 4.7
  • WooCommerce 3.9
  • هر lde یا محیط برنامه نویسی مورد علاقه شما
اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس
اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس

در صورتی که شما woocommerce را مخصوصا برای این اموزش دانلود کنید لازم نیست نگران چیزهایی مانند کنترل صفحات ، صفحات وارسی و ضوابط و شرایط یا هرچیز دیگری مانند آن باشید .

در واقع ما فقط قصد داریم جعبه متا simple product محصول ساده در این آموزش تمرکز کنیم .

 

افزودن فیلد های اختصاصی

زمانی که کار با woocommerce فرا میرسد مفهوم فیلد های سفارشی معمولا یک تعریف به آن می دهد .

wordpress قابلیت اختصاص دادن فیلد های سفارشی شده را به یک پست را می دهد . این اطلاعات اضافی اختیاری بعنوان داده متا شناخته می شود .

 

شاید برای بعضی از افراد این نوع اطلاعات کمی پیچیده و غیر ضروری به نظر برسد .

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

اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس
اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس

ما در ادامه این مفهوم را بیشتر مورد بررسی قرار می دهیم اکنون اجازه بدهید شروع کنیم .

۱٫ هوک ها

woocommerce خیلی شبیه به wordpress است ووکامرس یک API را فراهم می کند که به ما اجازه می هد به بخشی از هوک صفحه متصل شویم . بنابراین هر چند شما ممکن است با apI داده متا wordpress قبلا کار کرده باشید ، کار با woocommerce متفاوت است .

دو هوک وجود دارد که مهم است :

۱٫ woocommerce_product_options_grouping. ما این هوک را جهت پردازش پاکسازی و ذخیره سازی مقدار وردوی متنی به کار خواهیم برد .

۲٫ woocommerce_process_product_meta. ما این هوک را جهت پردازش پاکسازی وذخیره سازی مقدار ورودی متنی که مقادیر ما را قبول خواهند کرد به کار خواهیم برد .

اینها مانند همه ی هوک ها در wordpress نیاز به معرفی هوک دارید  و سپس عاملیت کار آمدی اختصاصی را یرای آنها تعریف کنیم هر چند شما می توانید این ها را با استفاده از برنامه نویسی رویه ای انجام دهید این آموزش کارآمدی عاملیت را با استفاده از برنامه نویسی شی گرا انجام خواهد داد .

 

۲ . عاملیت کارامدی

اول ما یک کلاسی را تعریف خواهیم کرد یک متغیر since را بعنوان داده نمونه خواهد داشت این متغیر id فیلد ورودی را معرفی خواهد کرد که در رابطه کاربر ظاهر خواهد شد :

 

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

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

در ۲ بخش زیر ما نحوه اجرای کارآمدی اختصاصی را دقیقا خواهیم دید .

۱٫اضافه کردن یک فیلد ورودی متنی

اول ما قصد داریم یک تابعی را اضافه کنیم که به woocommerce_product_options_gruping متصل است . در تابع init  که ما در بخش قبلی تعریف کردیم دقیقا آن را انجام خواهیم داد.

دقت کنید که من تابع را product_options_grouping نامیده ام . به نظر من انجام این باعث می شود خواندن کد کمی آسانتر شود . با اینکه تابع بتنهایی ممکن است خیلی توصیف کننده آنچه تابع انجام می دهد نباشد ، ولی خودش را به هوک مربوطه اش نسبت می دهد .

سپس ما نیاز به اجرای تابع داریم . برای انجام این ، ما اطلاعاتی را خواهیم داشت :

  • ما نیاز به یک ID خواهیم داشت که جهت شناسایی فقطو فقط فیلد متنی به کار خواهیم برد. ما مجموعه داده نمونه در سازنده را به کار خواهیم برد .
  • یک برچسب برای ارائه یک توصیف به فید ورودی به کار خواهد رفت
  • ما می توانیم یک نگهدارنده مکان را به طور اختیاری مشخص کنیم و برای اهداف مثالمان این کار را خواهیم کرد
  • یک اختیار جهت نمایش یک راهنمای ابزار وجود دارد هر گاه کاربران ماوس را روی یک آیکون نگاهدارند
  • و ما انتخابی ( گزینه ای ) برای یک توصیف داریم که جهت پر کردن متن راهنمای ابزار به کار خواهیم برد

تمامی اطلاعات بالا در یک ارائه پیوسته تنظیم شده و سپس به woocommerce_wp_text_input  انتقال خواهند یافت . این یک تابع woocommerse  api است که جهت برون دادن یک مولفه متنی با آرگومانهای (نشانوند های) بالا طراحی شده است .

در این مرحله ما اولین قسمت plugin  را انجام داده ایم . ما هنوز باید کدی بنویسیم که همه چیز را راه اندازی کند و هنوز باید کدی بنویسیم که اطلاعات را در پایگاه داده ذخیره کند ، بنابر این اجازه بدهید الان آن را انجام بدهیم .

۲٫ ذخیره کردن اطلاعات

پس از آن ، خطوط کد را که در زیر آمده به روش init اضافه کنید .

بعد از آن حتما تابع add_custom_linked_field_save را اضافه کنید .

من کمی درباره اجرای تابع در بخش بعدی صحبت خواهم کرد .

پاکسازی داده ها

در تابع بالا دقت کنید ، سه چیز روی می دهد :

  1. ما بررسی می کنیم تا مطمئن شویم مقادیر nonce وجود دارند در صورت نبودن به false بر می گردیم . این یک تدبیر امنیتی استاندارد است . مقادیر nonce توسط بررسی ویژه آنچه woocommerce در کد مبدا فراهم می کند کشف می شود .
  2. داده ها را در مجموعه $_post مطابق با ورودی کاربر پاکسازی کنید .
  3. اطلاعات را در جدول فوق داده پست ذخیره کنید .
اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس
اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس

دقت کنید که ما در واقع کاری جهت ارائه اطلاعات در خط اول هنوز  انجام نمی دهیم بنا بر این هیچ فراخوانی برای get_post_meta وجود ندارد . ولی اینگونه است که ما اطلاعات را در خط اول ارائه خواهیم داد .

۳٫ نمایش دادن teaser در خط اول

جهت ارائه اطلاعات در خط اول ما نیاز به یک کلاسی داریم که قسمت زیادی از همان کاری را انجام خواهد داد که ما قبلا انجام داده ایم . مخصوصا ما به موارد زیر نیاز خواهیم داشت :

  • یک ID فیلد متنی (textpield)
  • راه اندازی Id گفته شده در shckni
  • یک تابع راه انداز برای وصل کردن کد اختصاصی ما به خط اول
  • ارائه مقدار واقعی

راه اندازی این در واقع آنقدر مشکل نیست زیرا ما قبلا این کار را انجام داده ایم ، بنابر این من قصد دارم کلاس را بطور کامل در زیر انتقال بدهم ، ولی من چند نظریه را درباره طریقی که در ارتباط با راه اندازی این کلاس بعد از اینکه بریم سراغش ارئه خوام داد :

نتیجه نهایی باید چیزی مانند این باشد :

اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس
اضافه کردن فیلد های سفارشی در محصول ها با ووکامرس

این فایل توسط wordpress خوانده شده اطلاعات plugin را در عرضه plugin admin  تولید می کند این فایل نیز تمامی وابستگی های به کار رفته توسط plugin تولید می کند این فایل نیز شامل تمامی وابستگی های به کار رفته توسط plugin بوده و یک تابع را تعریف می کند که plugin را شروع می کند .

 

در این مرحله یک کد افزونگی داریم مخصوصا کلاسهای عمومی و اجرایی هم یک textfield_ID را به کار برده و آن را در سازنده شان راهندازی می کنند این یک شکل برنامه ای code smell است زیرا اصل کلی dry مربوط به برنامه نویسی شی گرا را نقض می کند .

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

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

دوم ، دقت کنید که من هوکِ woocommerce _ prodoct _ thumbnails را جهت کمک به ارائه اطلاعات به کار می برم . چندین هوک وجود دارد که woocommerce در دسترس قرار می دهد و من فقط این یکی را از هوک های موجود جهت ارائه آن (اطلاعات) انتخاب کردم . شما می توانید آزادانه به برسی دقیق مستندات پرداخته تعیین کنید که کدام هوک برای نیاز های شما بهتر کار می کند

۴٫ بطور کلی

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

این کدی (برنامه ای) است که من برای انجام آن به کار بردم :

 

 

دقت کنید که من وابستگی ها را گنجانده و سپس وقتی تابع روشن شد برسی می کنم ببینم آیا دانشبورد نمایش داده می شود یا نه . اگر نمایش داده شود پس قسمت صحیح plugin بارگذاری می شود ، در غیر این صورت نمایش استاندارد بارگذاری می شود ، که شما می توانید در صفحه محصول cproduct page ببینید .

نتیجه گیری

در این مرحله ، ما تمامی انچه را که در مقدمه آموزش مورد انتظار بود پوشش داده ایم :

  • ما یک فیلد اختصاصی اضافه کرده ایم
  • ما آن را پاکسازی کرده و ذخیره کرده ایم
  • ما یک وجه نمای عمومی public _ facing _ aspect  از plugin  راه اندازی کرده ایم
  • و ما محتوا را بازیابی کرده و نمایش داده ایم

دانلود کردن نمایش کارانه نهایی را از نوار جانبی این صفحه فراموش نکنید . آن دکمه بزرگ آبی رنگ در نوار کناری است . بعلاوه اگر شما به woocommerse علاقه مندید .

بررسی بعضی از آموزش های دیگر ما یا بعضی از آیتم هایی که ما در محل بازارمان in our market place  داریم فراموش نکنید .

طبق معمول اگر شما در جستجوی مواد دیگر مربوط به word press هستید ، می توانید همه آموزش های قبلی مرا در صفحه پروفایل من پیدا کنید و شما می توانید مرا در وبلاگ من یا در twitter  دنبال کنید

فراموش نکنید هر سوال یا نظریه ای که دارید در زیر مطرح کنید .

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *