Skip to main content

Create Pataa on Web

Create Pataa on web integration steps:-

1) First you need to include creata pataa on web js url in your root index file head section.

<head>
  <meta charset="UTF-8">
  <title>Test Page</title>
   <!--Inject Remote Url in you enrty point page-->
  <script src="create-pataa.js"></script>
</head>

2) After this you need to open creata pataa on web on popup modal so for this you have to add create pataa selector in your modal popup body.

<div class="modal-body">
    <create-pataa></create-pataa>
</div>

3) Once you open the modal you will see the create pataa map for creating pataa. In first screen you will see cross icon, by this close icon you will get close event so you need to close you modal popup once you get that close event.

const createPataa = document.querySelector('create-pataa');
        // You will also get 'closeWindow' EventListener when you click on close icon in first screen then you need to close you modal popup of create pataa
createPataa.addEventListener('closeWindow', (event) => {
    console.log('Close window Clicked')
// Here you need to close your modal popuo
});

4) After selecting location on map & filling address with OTP verification user will redirect to pataa code congratulation screen. Where if he clicks on done button he will get a createPataaCode event, this event will get created pataa code.

const createPataa = document.querySelector('create-pataa');
    createPataa.addEventListener('createPataaCode', (event) => {
    document.getElementById('autofill').value = event.detail;
    console.log(event.detail)
});

5) When you try to change the location and on google suggest you will get the “unable to find location” button and after clicking the button the user will redirect to the Add Address Details screen. Where if he clicks on the done button he will get a manualAddress event, this event will details .

const createPataa = document.querySelector('create-pataa');
    createPataa.addEventListener('manualAddress', (event) => {
      event.detail.firstName
            event.detail.lastName                                       
      event.detail.countryCode
            event.detail.ad1
            event.detail.ad2
            event.detail.ad3
            event.detail.ad4
            event.detail.category                   
            event.detail.city
            event.detail.stateCode
            event.detail.zipcode
    });