চেকআউট বাস্তবায়ন গাইড

সংক্ষিপ্ত বিবরণ

অনলাইন কেনাকাটা এবং অর্ডার করা আমাদের জীবনের এক অবিচ্ছেদ্য অংশ হয়ে উঠেছে। একই দিনে ডেলিভারি পরিষেবা থেকে শুরু করে ট্যাক্সি বুক করা বা রাতের খাবার অর্ডার করা পর্যন্ত, গ্রাহকরা একটি ঝামেলাহীন চেকআউট প্রক্রিয়া আশা করেন।

তবে, এই সমস্ত অ্যাপ্লিকেশনেই, বিলিং বা শিপিংয়ের জন্য ঠিকানা প্রবেশ করানো চেকআউট প্রক্রিয়ার একটি বড় বাধা হয়ে দাঁড়ায়, যা সময়সাপেক্ষ এবং ঝামেলাপূর্ণ উভয়ই হতে পারে। মোবাইল জগতে একটি বাধাহীন চেকআউট অভিজ্ঞতা আরও বেশি গুরুত্বপূর্ণ হয়ে ওঠে, যেখানে ছোট স্ক্রিনে জটিল টেক্সট প্রবেশ করানো হতাশাজনক হতে পারে এবং গ্রাহক কেনার পথে এটি আরেকটি প্রতিবন্ধকতা সৃষ্টি করে।

এই ডকুমেন্টটি প্রিডিক্টিভ অ্যাড্রেস এন্ট্রির মাধ্যমে আপনার গ্রাহকদের চেকআউট প্রক্রিয়া দ্রুত সম্পন্ন করতে সাহায্য করার জন্য বাস্তবায়ন নির্দেশিকা প্রদান করে।

নিচের ডায়াগ্রামটিতে চেকআউট বাস্তবায়নে ব্যবহৃত মূল এপিআইগুলো দেখানো হয়েছে। ডায়াগ্রামটি বড় করে দেখতে এটিতে ক্লিক করুন।

এপিআই সক্ষম করা

চেকআউট বাস্তবায়ন করতে, আপনাকে গুগল ক্লাউড কনসোলে নিম্নলিখিত API-গুলি সক্রিয় করতে হবে:

• মানচিত্র জাভাস্ক্রিপ্ট এপিআই
• স্থান এপিআই
• মানচিত্র স্ট্যাটিক এপিআই

সেটআপ সম্পর্কে আরও তথ্যের জন্য, গুগল ম্যাপস প্ল্যাটফর্ম দিয়ে শুরু করা দেখুন।

অনুশীলন বিভাগ

নিম্নলিখিত বিভাগগুলিতে আপনার চেকআউট প্রক্রিয়াকে আরও উন্নত করতে সহায়ক কিছু টিপস এবং কাস্টমাইজেশন সম্পর্কে আলোচনা করা হয়েছে।

• check_circle_filled আইকনটি একটি মূল অনুশীলন।
• stars আইকনটি একটি ঐচ্ছিক কিন্তু সমাধানটিকে আরও উন্নত করার জন্য প্রস্তাবিত কাস্টমাইজেশন।

প্লেস অটোকমপ্লিট আপনার অ্যাপ্লিকেশনে ঠিকানা প্রবেশ করানো সহজ করে, যার ফলে উচ্চতর কনভার্সন রেট এবং আপনার গ্রাহকদের জন্য একটি নির্বিঘ্ন অভিজ্ঞতা নিশ্চিত হয়। অটোকমপ্লিট একটি একক, দ্রুত এন্ট্রি ফিল্ড প্রদান করে, যেখানে 'টাইপ-এহেড' ঠিকানা পূর্বাভাসের সুবিধা রয়েছে, যা বিলিং বা শিপিং ঠিকানা ফর্ম স্বয়ংক্রিয়ভাবে পূরণ করতে ব্যবহার করা যেতে পারে।

আপনার অনলাইন শপিং কার্টে প্লেস অটোকমপ্লিট অন্তর্ভুক্ত করার মাধ্যমে, আপনি যা করতে পারেন:

• ঠিকানা এন্ট্রির ত্রুটি হ্রাস করুন।
• চেকআউট প্রক্রিয়ার ধাপ সংখ্যা কমান।
• মোবাইল বা পরিধানযোগ্য ডিভাইসে ঠিকানা লেখার অভিজ্ঞতা সহজ করুন।
• গ্রাহকের অর্ডার দেওয়ার জন্য প্রয়োজনীয় কীস্ট্রোক এবং মোট সময় উল্লেখযোগ্যভাবে হ্রাস করুন।

যখন ব্যবহারকারী অটোকমপ্লিট এন্ট্রি বক্সটি নির্বাচন করে টাইপ করা শুরু করেন, তখন সম্ভাব্য ঠিকানার একটি তালিকা প্রদর্শিত হয়:

যখন ব্যবহারকারী সম্ভাব্য ঠিকানার তালিকা থেকে একটি ঠিকানা নির্বাচন করেন, তখন আপনি সেই প্রতিক্রিয়া ব্যবহার করে ঠিকানাটি যাচাই করতে এবং অবস্থানটি জানতে পারেন। এরপর আপনার অ্যাপ্লিকেশনটি ঠিকানা লেখার ফর্মের সঠিক ক্ষেত্রগুলিতে তথ্য পূরণ করতে পারে।

প্লেস অটোকমপ্লিট দিয়ে শুরু করা

আপনি মাত্র কয়েক লাইন জাভাস্ক্রিপ্ট কোড ব্যবহার করে আপনার সাইটে প্লেস অটোকমপ্লিট যুক্ত করতে পারেন।

আপনি আপনার সাইটে ম্যাপস জাভাস্ক্রিপ্ট এপিআই অন্তর্ভুক্ত করতে এবং প্লেসেস লাইব্রেরি নির্দিষ্ট করতে পারেন, এমনকি যদি আপনি কোনো ম্যাপ প্রদর্শন নাও করেন। নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এটি করতে হয় এবং ইনিশিয়ালাইজেশন ফাংশনটি কার্যকর করতে হয়।

<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 এ সেট করুন। Place Autocomplete অনুরোধে সমর্থিত প্রকারগুলি সম্পর্কে আরও জানুন।
• যদি বিশ্বব্যাপী অনুসন্ধানের প্রয়োজন না হয়, তবে উপযুক্ত বিধিনিষেধ এবং পক্ষপাতিত্ব নির্ধারণ করুন। নির্দিষ্ট অঞ্চলে মিল খুঁজে পেতে পক্ষপাতিত্ব বা সীমাবদ্ধতা আরোপ করতে আপনি বিভিন্ন প্যারামিটার ব্যবহার করতে পারেন।
  • কোনো একটি এলাকাকে সীমাবদ্ধ করার জন্য আয়তাকার সীমানা নির্ধারণ করতে ' bounds ব্যবহার করুন। শুধুমাত্র ঐ এলাকাগুলোর মধ্যে থাকা অ্যাড্রেসগুলোই যেন ফেরত আসে, তা নিশ্চিত করতে strictBounds ব্যবহার করুন।
  • নির্দিষ্ট কিছু দেশের মধ্যে প্রতিক্রিয়া সীমাবদ্ধ করতে componentRestrictions ব্যবহার করুন।
• ম্যাচ করার সময় নির্দিষ্ট কিছু ফিল্ড বাদ পড়ে গেলে সেগুলোকে সম্পাদনাযোগ্য রাখুন এবং প্রয়োজনে গ্রাহকদের ঠিকানা আপডেট করার সুযোগ দিন। যেহেতু প্লেস অটোকমপ্লিট দ্বারা প্রাপ্ত বেশিরভাগ ঠিকানায় অ্যাপার্টমেন্ট, স্যুট বা ইউনিট নম্বরের মতো সাব-প্রিমিস নম্বর থাকে না, তাই এই উদাহরণটি অ্যাড্রেস লাইন ২-এর উপর ফোকাস নিয়ে আসে, যাতে ব্যবহারকারী প্রয়োজনে সেই তথ্যটি পূরণ করতে উৎসাহিত হন।

আপনার গ্রাহক ঠিকানা দেওয়ার পর, একটি স্থির মানচিত্রের মাধ্যমে ডেলিভারি বা পিকআপের স্থানটি দৃশ্যমানভাবে নিশ্চিত করুন। এটি গ্রাহককে ঠিকানাটি সঠিক হওয়ার ব্যাপারে অতিরিক্ত আশ্বাস দেয় এবং ডেলিভারি বা পিকআপ ব্যর্থ হওয়ার সম্ভাবনা কমায়। আপনি ঠিকানা দেওয়ার পাতায় স্থির মানচিত্রটি প্রদর্শন করতে পারেন, অথবা লেনদেন সম্পন্ন হওয়ার পর পাঠানো নিশ্চিতকরণ ইমেইলেও এটি অন্তর্ভুক্ত করতে পারেন।

আপনি ম্যাপস স্ট্যাটিক এপিআই (Maps Static API) ব্যবহার করে এই উভয় ব্যবহারই বাস্তবায়ন করতে পারেন, যা একটি পেজ বা ইমেলের ভেতরের যেকোনো ইমেজ ট্যাগে ম্যাপের একটি ইমেজ সংস্করণ যুক্ত করে।

Maps Static API দিয়ে শুরু করা

আপনি একটি ওয়েব সার্ভিস কলের মাধ্যমে ম্যাপস স্ট্যাটিক এপিআই ব্যবহার করতে পারেন, যা আপনার নির্দিষ্ট করা প্যারামিটারগুলোর উপর ভিত্তি করে একটি মানচিত্রের ইমেজ সংস্করণ তৈরি করে। ডাইনামিক ম্যাপের মতোই, আপনি মানচিত্রের ধরন নির্দিষ্ট করতে পারেন, একই ক্লাউড-ভিত্তিক স্টাইল ব্যবহার করতে পারেন এবং অবস্থান চিহ্নিত করার জন্য মার্কার যোগ করতে পারেন।

নিম্নলিখিত কলটিতে একটি রোডম্যাপ দেখানো হয়েছে, যার আকার ৬০০x৩০০ পিক্সেল এবং এটি ক্যালিফোর্নিয়ার মাউন্টেন ভিউতে অবস্থিত গুগলপ্লেক্সকে কেন্দ্র করে ১৩ জুম লেভেলে রয়েছে। এতে একটি নীল ডেলিভারি লোকেশন মার্কার এবং একটি অনলাইন ম্যাপ স্টাইলও নির্দিষ্ট করা আছে।

      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 প্রপার্টিটি সরিয়ে দিন।
• আপনার ওয়েবসাইটের স্টাইলের সাথে মিলিয়ে প্লেস অটোকমপ্লিট বক্সের চেহারা ও অনুভূতি কাস্টমাইজ করুন। এছাড়াও, আপনি আপনার শপিং কার্টের চেহারা ও অনুভূতির সাথে মিলিয়ে অটোকমপ্লিট উইজেটটিকে স্টাইল করতে পারেন। উইজেটটির বাহ্যিক রূপ কাস্টমাইজ করতে আপনি CSS ক্লাস ব্যবহার করতে পারেন। আরও তথ্যের জন্য, stars অটোকমপ্লিট দেখুন।
• একটি stars UI তৈরি করুন। আপনি যদি Google-এর ডিজাইন করা UI ব্যবহার না করে একটি কাস্টম UI তৈরি করতে চান, তাহলে প্রদত্ত ইনপুটের জন্য প্রেডিকশন পেতে প্রোগ্রাম্যাটিকভাবে Place Autocomplete সার্ভিসটি কল করুন। আপনি JavaScript , Android , এবং iOS- এ প্রোগ্রাম্যাটিকভাবে Place Autocomplete প্রেডিকশন পেতে পারেন, পাশাপাশি Places API-এর মাধ্যমে সরাসরি ওয়েব সার্ভিসেস API-কে কল করতে পারেন।