پرش به مطلب اصلی

پلاگین نقشه

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

بستر‌های پیاده‌سازی​

پلاگین نقشه‌ی گنجه می‌تواند بر روی تمامی وب اپلیکیشن‌ها به صورت iframe و بر روی تمامی موبایل اپلیکیشن‌ها به صورت webview اجرا شود تا برای نصب و استفاده‌ی این پلاگین به کمترین میزان develop نیاز باشد.

نمایش عمومی استیشن‌ها بر روی نقشه​

نمایش تمامی گنجه‌ها و گنجداران فعال و عمومی موجود و ارائه شدهٔ پیش‌فرض، به صورت framing انجام می‌شود. از این مدل می‌توان در هر کامپوننت یا اِلمانی از صفحه استفاده کرد. قابل ذکر است که این سرویس به صورت responsive طراحی شده و قابلیت نمایش بهینه در دستگاه‌های تلفن‌ همراه را دارد.

نحوه‌ی استفاده​

<iframe
  src="https://map.ganje.net/?readOnly=true"
  style="border: none; width: 100%; height: 410px;"
></iframe>

نمونه‌ی پیش‌نمایش​

اطلاع

جهت نمایش و استفاده از قابلیت جستجو و فیلتر استیشن‌ها، می‌توانید مقدار readOnly=true را از src حذف نمایید.

نمایش استیشن‌های مختص یک Supplier​

ممکن است بخواهید به عنوان یک ساپلایر، تنها استیشن‌های تخصیص داده شده به خود را نمایش دهید. در این صورت کافی‌ست supplier_uuid (شناسه‌ی فروشندگی) خود که از گنجه دریافت کرده‌اید را به عنوان suuid در src قرار دهید.

نحوه‌ی استفاده​

<iframe
  src="https://map.ganje.net/?suuid=<YOUR_SUPPLIER_UUID>"
  style="border: none; width: 100%; height: 410px;"
></iframe>

نمونه‌ی پیش‌نمایش​

در اینجا استیشن‌های فعال قابل استفاده در یک سرویس‌دهنده‌ی خاص را مشاهده می‌کنید:

انتخاب استیشن و زمان رزرو توسط کاربر​

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

<script src="https://cdn.jsdelivr.net/npm/js-ganje-delivery/index.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/js-ganje-delivery/style.min.css"
/>

برای استفاده و فراخوانی پلاگین نیز کافی‌ست تابع زیر اجرا شود.

<script>
  openGanjeDelivery(supplierUuid, size, selectedGanjeCallback);
</script>

مقادیر ورودی​

تابع openGanjeDelivery سه پارامتر ورودی داشته که به شرح زیر است:

توضیحات مقدار پارامتر
شناسه فروشنده/سرویس‌دهنده تخصیص داده شده توسط شرکت گنجه[string]supplierUuid
کمترین اندازه ممکن برای مرسوله (small | medium | large)[string]size
یک callback function که اطلاعات گنجه و ظرفیت انتخابی توسط کاربر را برمی‌گرداند[object]selectedGanjeCallback

مقادیر خروجی​

توضیحات مقدار پارامتر
تاریخ جایگذاری مرسوله[string]expected_check_in
مدت زمان قابل برداشت[string]expected_duration
اطلاعات حاوی گنجه‌ی انتخاب شده مانند: نام گنجه، آدرس گنجه، تصویر گنجه، زمان کاری گنجه و …[object]selectedStation