for adding pincode search option on product page how can i setup

Ask the community
,
1

i want to setup pincode search button on product page how can i setup

2

Hi @kakusukhija :raised_hand_with_fingers_splayed:

You can do it like this:

Step #1: Add an event handler to open up a lightbox to enter your pin number when you click on “Search”.

// Page Code
$w('#search').onClick(async() => {
    wixWindow.openLightbox('Enter PIN').then((result) => {
        if (result.type === 'success') {
            // Step #3 here ...
        } else {
            // Show a message that the user closed the lightbox
        }
    })
})

Step #2: Enter the PIN number in an input field to validate, send the entered PIN number to the backend for validation, NEVER VALIDATE CRITICAL ACTIONS ON FRONTEND.

// Lightbox Code
import {validatePin} from 'backend/search.jsw';

$w('#pin').onInput(async() => {
    let value = $w('#pin').value;
    if (value.length === 4) {
        $w('#pin').disable();
        // So the user cannot edit the PIN before the validation is done
           
        // Call the validator function
        await validatePin(value).then((result) => {
            if (result.type === 'success') {
                wixWindow.lightbox.close({ type: 'success' })
            } else {
                // Run code in case the PIN is incorrect
                $w('#pin').enable();
                $w('#pin').value = '';
                // .....
            }
        })
    }
})

// search.jsw Code

export function validatePin(pin) {
    const myPin = 9745; // Or you can get it by a query if you want.
    if (myPin === Number(pin)) {
        return { type: 'success' }
    } else {
        return { type: 'incorrect' }
    }
}

Step #3: Perform the search if the entered PIN matches the saved one. Notice the 5th line in Step #1.

Hope this helps~!
Ahmad

3

Hi,
I am a non-coder. Can you please elaborate the above steps, as in where these are put and if there are more than 2000 pincodes then how it is done? Thank you very much