JavaScript API

This documentation details how to programmatically open, close, and toggle the screets Product Search modal using JavaScript. These functionalities are particularly useful for integrating the search functionality into custom user flows or advanced interactions.

Available Actions

The screets Product Search plugin exposes three JavaScript functions for modal control:

Function Name	Description
openModal()	Opens the search modal.
closeModal()	Closes the currently open search modal.
toggleModal()	Toggles the visibility of the search modal (opens it if closed, closes it if open).

Usage with JavaScript

You can directly call these functions from your JavaScript code to manage the modal state. Here's an example:

// Open the modal
window.screetsPS('openModal');

// Close the modal (assuming it's already open)
window.screetsPS('closeModal');

// Toggle the modal visibility
window.screetsPS('toggleModal');

Usage with HTML Elements

For a more user-driven approach, you can utilize HTML elements with the onclick property to trigger these modal actions. Here's an example:

<button onclick="window.screetsPS('openModal')">Open Search</button>

<button onclick="window.screetsPS('closeModal')">Close Search</button>

<button onclick="window.screetsPS('toggleModal')">Toggle Search</button>

For anchor elements, you can use the href="javascript:void(0)" attribute to prevent the default link behavior:

<a href="javascript:void(0)" onclick="window.screetsPS('openModal')">Open Search</a>

<a href="javascript:void(0)" onclick="window.screetsPS('closeModal')">Close Search</a>

<a href="javascript:void(0)" onclick="window.screetsPS('toggleModal')">Toggle Search</a>

These buttons, when clicked, will execute the corresponding JavaScript function to control the modal visibility.

Additional Considerations

• You can integrate these functionalities into existing event listeners or UI components within your application.
• Refer to the official screets Product Search documentation for potential updates or additional functionalities related to modal control.

By incorporating these techniques, you can leverage the screets Product Search modal within your custom web development projects, enhancing user interaction and search accessibility.