راهنمای پیاده‌سازی تسویه‌حساب

نمای کلی

خرید و سفارش آنلاین به بخشی همه‌جاگیر از زندگی ما تبدیل شده است. از خدمات ارسال کالا در همان روز تا رزرو تاکسی یا سفارش شام، مشتریان انتظار دارند فرایند تسویه‌حساب بدون دردسری داشته باشند.

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

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

نمودار زیر میاناهای برنامه‌سازی کاربردی اصلی درگیر در پیاده‌سازی «تسویه‌حساب» را نشان می‌دهد. برای بزرگ کردن نمودار، روی آن کلیک کنید.

درحال فعال کردن میاناهای برنامه‌سازی کاربردی

برای پیاده‌سازی «تسویه‌حساب»، باید میاناهای برنامه‌سازی کاربردی زیر را در کنسول Google Cloud فعال کنید:

• Maps JavaScript API
• Places API
• Maps Static API

برای کسب اطلاعات بیشتر درباره راه‌اندازی، به شروع کار با «پلاتفرم Google Maps» مراجعه کنید.

بخش‌های تمرین‌ها

بخش‌های زیر شامل نکته‌ها و سفارشی‌سازی‌هایی است که به شما کمک می‌کند روند تسویه‌حساب را بهبود دهید.

• check_circle_filled نماد تیک یک تمرین اصلی است.
• stars نماد ستاره یک سفارشی‌سازی اختیاری اما توصیه‌شده برای بهبود راهکار است.

«تکمیل خودکار جا» می‌تواند وارد کردن نشانی را در برنامه‌تان ساده‌تر کند و به نرخ تبدیل بالاتر و تجربه یکپارچه برای مشتریانتان منجر شود. «تکمیل خودکار» یک فیلد ورودی سریع و واحد با پیش‌بینی نشانی «پیش‌نویس» ارائه می‌دهد که می‌توان از آن برای تکمیل خودکار فرم نشانی صورت‌حساب یا نشانی ارسال استفاده کرد.

با گنجاندن «تکمیل خودکار مکان» در سبد خرید آنلاینتان، می‌توانید:

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

وقتی کاربر چارگوش ورودی «تکمیل خودکار» را انتخاب می‌کند و شروع به تایپ می‌کند، فهرستی از پیش‌بینی‌های نشانی ظاهر می‌شود:

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

شروع به کار با «تکمیل خودکار جا»

با چند خط جاوا اسکریپت می‌توانید «تکمیل خودکار جا» را در سایتتان بگنجانید.

می‌توانید Maps JavaScript API را در سایتتان اضافه کنید و کتابخانه «جاها» را مشخص کنید، حتی اگر نقشه‌ای را نمایش نمی‌دهید. مثال زیر نشان می‌دهد چگونه این کار را انجام دهید و تابع مقداردهی اولیه را اجرا کنید.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

سپس، برای ورودی کاربر، چارگوش نوشتاری به صفحه‌تان اضافه کنید:

<input id="autocomplete" placeholder="Enter your address"></input>

درنهایت، سرویس «تکمیل خودکار» را مقداردهی اولیه کنید و آن را به چارگوش نوشتاری نام‌گذاری‌شده پیوند دهید:

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

در مثال قبلی، شنونده رویداد place_changed زمانی راه‌اندازی می‌شود که کاربر پیش‌بینی نشانی را انتخاب کند و تابع fillInAddress اجرا شود. این تابع، همان‌طور که در مثال زیر نشان داده شده است، پاسخ انتخاب‌شده را می‌گیرد و مؤلفه‌های نشانی را برای نمایش در فرم استخراج می‌کند.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
index.ts

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;
index.js

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

در این نمونه کد، نسخه نمایشی کاری و کد منبع کامل برای تکمیل فرم ورودی نشانی ببینید.

ملاحظات هنگام پیاده‌سازی «تکمیل خودکار جا»

«جای‌گذاری خودکار» چندین گزینه ارائه می‌دهد که به شما امکان می‌دهد پیاده‌سازی‌تان را سفارشی‌سازی کنید اگر می‌خواهید از چیزی فراتر از ابزارک استفاده کنید. می‌توانید از ترکیبی از سرویس‌ها برای مطابقت دقیق مکان‌ها استفاده کنید.

• برای فرم نشانی، پارامتر types را روی address تنظیم کنید تا مطابقت‌ها به نشانی‌های کامل خیابان محدود شود. درباره انواع پشتیبانی‌شده در درخواست‌های «تکمیل خودکار مکان» بیشتر بدانید.
• اگر نیازی به جستجوی سراسری ندارید، محدودیت‌ها و سوگیری‌های مناسب را تنظیم کنید. می‌توانید از چندین پارامتر برای سوگیری یا محدود کردن مطابقت‌ها به مناطق خاص استفاده کنید.
  • از bounds برای تنظیم محدوده‌های مستطیلی برای محدود کردن ناحیه استفاده کنید. از strictBounds استفاده کنید تا مطمئن شوید فقط نشانی‌های آن مناطق برگردانده می‌شود.
  • از componentRestrictions برای محدود کردن پاسخ‌ها به مجموعه خاصی از کشورها استفاده کنید.
• فیلدها را قابل‌ویرایش بگذارید تا اگر فیلدهای خاصی در تطابق ازقلم افتاده بود، مشتریان بتوانند درصورت نیاز نشانی را به‌روز کنند. چون اکثر نشانی‌های برگردانده‌شده توسط «تکمیل خودکار جا» حاوی شماره‌های فرعی مانند شماره آپارتمان، سوئیت، یا واحد نیستند، این نمونه تمرکز را به «خط نشانی ۲» منتقل می‌کند تا کاربر را تشویق کند درصورت لزوم آن اطلاعات را تکمیل کند.

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

می‌توانید هر دو مورد استفاده را با Maps Static API پیاده‌سازی کنید، که نسخه تصویری نقشه را به هر برچسب تصویر در صفحه یا ایمیل اضافه می‌کند.

شروع به کار با Maps Static API

می‌توانید ازطریق فراخوانی سرویس وب از «میانای برنامه‌سازی کاربردی Maps Static» استفاده کنید که براساس پارامترهایی که مشخص می‌کنید نسخه تصویری نقشه را ایجاد می‌کند. مانند نقشه پویا، می‌توانید نوع نقشه را مشخص کنید، از همان سبک‌های مبتنی بر ابر استفاده کنید، و برای متمایز کردن مکان، نشانگر اضافه کنید.

فراخوانی زیر نقشه راهی را با اندازه ۶۰۰ در ۳۰۰ پیکسل نشان می‌دهد که مرکز آن Googleplex در مانتین ویو، کالیفرنیا با سطح بزرگ‌نمایی ۱۳ است. همچنین نشانگر مکان تحویل آبی و سبک نقشه آنلاین را مشخص می‌کند.

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a
      

این بخش به بخش‌های زیر تقسیم می‌شود:

درخواست تصویر زیر را برمی‌گرداند:

برای کسب اطلاعات بیشتر درباره گزینه‌های Maps Static API، مستندات را ببینید.

با بهره‌گیری از برخی‌از ویژگی‌های پیشرفته‌ای که «تکمیل خودکار جا» ارائه می‌دهد، می‌توانید تجربه مشتری‌تان را بیشتر بهبود دهید. در اینجا چند نکته برای بهبود کادر ورودی نشانی «تکمیل خودکار» آورده شده است:

• stars به کاربران اجازه دهید نشانی را براساس نام کسب‌وکار یا نقطه موردعلاقه وارد کنند. خدمات پیش‌بینی «تایپ سریع» نه تنها برای نشانی‌ها کار می‌کند، بلکه می‌توانید انتخاب کنید که نام‌های کسب‌وکار یا نشانگرهای مکانی نیز وارد شوند. پس‌از اینکه کاربر نام کسب‌وکاری را وارد کرد، می‌توانید نشانی را با فراخوانی جزئیات مکان بازیابی کنید. برای اینکه هم نشانی‌ها و هم نام‌های مؤسسه وارد شود، دارایی types را از تعریف «تکمیل خودکار» بردارید.
• stars ظاهر و عملکرد چارگوش «تکمیل خودکار جا» را سفارشی‌سازی کنید تا با سبک وب‌سایتتان مطابقت داشته باشد. همچنین می‌توانید ابزاره تکمیل خودکار را سبک‌بندی کنید تا با ظاهر و احساس سبد خریدتان مطابقت داشته باشد. می‌توانید از کلاس‌های CSS برای سفارشی‌سازی ظاهر ابزاره استفاده کنید. برای اطلاعات بیشتر، به سبک تکمیل خودکار مراجعه کنید.
• stars رابط کاربری سفارشی بسازید. اگر می‌خواهید به‌جای استفاده از واسط کاربر طراحی‌شده توسط Google، واسط کاربر سفارشی بسازید، سرویس «تکمیل خودکار مکان» را به‌صورت برنامه‌نویسی فراخوانی کنید تا پیش‌بینی‌های ورودی داده‌شده را بازیابی کنید. می‌توانید پیش‌بینی‌های «تکمیل خودکار جا» را به‌صورت برنامه‌نویسی‌شده در جاوا اسکریپت، Android، و iOS بازیابی کنید و همچنین مستقیماً ازطریق Places API با میانای برنامه‌سازی کاربردی خدمات وب تماس بگیرید.