0 comments on “Locations Table : Convert Search Box To React Component”

Locations Table : Convert Search Box To React Component

Posted by lcleveland in App Updates, Feature Requests, Store Locator Plus®

Goal: At the top of the Locations | List interface there is a search box for locations. This is currently rendered and managed with PHP+HTML+jQuery. Add this to the new React LocationsTableHeader component and deprecate the legacy code.

Research

Current UI/UX

This image shows the new Bulk Actions React component with the legacy filter and search PHP+HTML+jQuery UI below.

Existing LocationsTableHeader React Component

Typescript File: wp-content/plugins/store-locator-plus/src/components/locations/LocationsTableHeader.tsx

Legacy PHP+HTML Search Interface

HTML output string is generated in \SLP_Admin_Locations::createstring_SearchBlock.
This uses HTML based onkeypress and onClick attributes to trigger JavaScript actions.
Pressing enter in the search box or clicking on the search icon runs the jQuery-driven AdminUI.doAction(‘search’)

Development

Create A New LocationsSearch React Component

Create a new LocationsSearch React component that is a sibling of the LocationsBulkActions React component.
Create a search input box with a search icon button after that triggers the search.

UI/UX Updates

  • In LocationsTableHeader use MUI components to wrap all children that will allow for horizontal stacking of children.
    • LocationsTableHeader should take 100% of the width of parent .react-wrapper div.
    • If the children don’t fit
      • wrap the entire child component to the next line
      • do not use a horizontal scroll bar
  • Place the new LocationsSearch React component to the right of the LocationsBulkActions component.
  • All of for a future LocationsFilter component to be placed between the LocationsBulkActions and LocationsSearch components.
0 comments on “SLP Settings : Quick Save”

SLP Settings : Quick Save

Posted by lcleveland in Development, Store Locator Plus®

Originally all of the SLP settings forms had to be submitted by clicking a save button. This runs a typical form post + full page render… old-school web 1.X style.

Along the way work was done to utilize JavaScript triggers and save data with an onBlur on settings form fields. The tech uses jQuery using an AJAX-type model to send a single form field to the WordPress AJAX processor to manage saving a single field without re-rendering the entire page or sending the entire form.

How It Is Triggered

SLP base plugin’s admin.js initializes and hooks a change_option JS function to any INPUT type field with a quick_save CSS class attached.

    var qs_inputs = jQuery('.quick_save').find(':input');
    qs_inputs.on('change', function (e) {
      change_option(e.currentTarget);
    });
    qs_inputs.on('blur', function (e) {
      var start_val = e.currentTarget.defaultValue;
      if (e.currentTarget.value !== start_val) {
        change_option(e.currentTarget);
      }
    });
Read More “SLP Settings : Quick Save”