Store Locator Plus® Internal Docs

The Settings Interface architecture drives most of the legacy Store Locator Plus admin interfaces. These are the interfaces customers interact with most often, especially on the SaaS platform. It is the main component of the SLP Dashboard for SaaS.

It was originally written to manage the UI surfaces that present the myriad of settings (options) available to customers. It presents the “dials the users turn” to change how their store locator maps and directory presentations are configured. It grew to cover other admin UI interfaces including the Locations Interface.

Research Notes

About SLP_Settings

Extends SLP_Base_ReactObject which extends SLPlus_BaseClass_Object

SLP_Settings::render_settings_page

Outputs the HTML for settings pages, including the location details page (it uses the “settings” page construct). The output all ends up in a HTML element: <div class=’dashboard-wrapper’>…</div>.

General layout:

• <div class=’dashboard-wrapper’>
  • <header id=”dashboard-header” class=”dashboard-header”> = React blue bar header
  • <div class=’dashboard-main store-locator-plus’>
    • <section class=’dashboard-content’>
      • <div id=’wpcsl_container’ …>
        • <form method=’post’ class=’slplus_settings_form’ …>
          • …
          • <div id=”main” class=”dashboard-content-inner panel-settings”>
          • <div id=”wpcsl-nav” class=”sub_navigation”> = from \SLP_Settings::sublevel_navbar
          • <div id=”content” class=”content js settings-content”>

The settings page header

The page header ends up in:

<header id="dashboard-header" class="dashboard-header"><!-- react slp_adminheader --></header>

Which is setup and managed with:

		// -- include the asset file to get the WordPress Scripts defined dependencies and version ID
		$asset = include SLPLUS_PLUGINDIR . 'build/slp_adminheader/script.asset.php';

		wp_enqueue_script( 'slp_adminheader', SLPLUS_PLUGINURL . '/build/slp_adminheader/script.js', $asset['dependencies'], $asset['version'], true );

		wp_add_inline_script( 'slp_adminheader', 'const slpReact = ' . wp_json_encode( $this->get_vars_for_react() ) . ';', 'before' );

Rendered via the React component at
wp-content/plugins/store-locator-plus/src/components/AdminHeader.js

That renders React Components:

• <CssBaseline/>
• <AdminHeader/>

Where <AdminHeader/> renders as:

• <AppBar position=”sticky”>
  • <Toolbar>
    • <Typography variant=”h6″ component=”div”
      sx={{flexGrow: 1}}>{slpReact.pageName}</Typography>
    • {mainButtonGroup}
    • <Tooltip title={__(‘Documentation’, ‘store-locator-le’)}>
      • <IconButton … documentation … />

The settings page sub navbar (menu)

In the current version the header element DOES NOT contain the sub navbar.

It is rendered via SLP_Settings::sublevel_navbar deep inside the <div class=’dashboard-wrapper’>…</div> element.

React Update To Render Subnavbar

The goal is to render the \SLP_Settings::sublevel_navbar HTML output using React instead of the current PHP and HTML implementation.

The AdminHeader at wp-content/plugins/store-locator-plus/src/components/AdminHeader.js renders the top-of-page header with the page name and some interactive icon buttons.

The task is to add a submenu below the Toolbar that is comprised of the sections currently residing in $this->sections in the \SLP_Settings::sublevel_navbar method.  Using the $titleText ($section->name) within.  The wp_kses_post function current used to set $titleText is not necessary as the $section->name is already considered "clean".

The best way to get the variables into React so they are accessible in JavaScript is to modify the \SLP_Base_ReactObject::get_vars_for_react method.  Instead of attempting to override or extend the base \SLP_Base_ReactObject::get_vars_for_react method, add a filter in \SLP_Settings for slp_react_vars.   That will extend the react variable array via this return method on the end of the get_vars_for_react method:
apply_filters( 'slp_react_vars', $defaultVars );

You will find a good reference implementation of the slp_react_vars filter via:
\Customer_Profile_Site_Info::initialize - adds the filter for that class
\Customer_Profile_Site_Info::extendReactVars - extends the available JavaScript variables for React

In our case we are not extending MySLP variables, so the SLP_Settings::extendReactVars method should be more like this:
$vars['SLP']['sections'][] = array( 
'name' => $section->name,
'div_id' => ! empty( $section->div_id ) ? $section->div_id : $section->slug,
'link_id' => "wpcsl-option-{$div_id}"
);
This should be set up by looping through $this->sections in a new extendReactVars method in SLP_Settings.

This should create a horizontal navbar that shows and reveals each section by the div id. This may require further refinement as the current system uses outdated JavaScript and jQuery to hide and reveal subsequent divs by using the div IDS as noted in the link_id property.   For now we will assume that if React renders the components correctly the pre-existing JavaScript will take over.

Initial Results

Works on locations page.
Does not work on Settings page.
Spacing is not well defined, needs more space between menu items.

The locations interface needs a major overhaul.

Let’s investigate the process and where we can start shimming some React components.

Research

Main Loader : Locations | Location Details (SaaS) Menu

• \SLP_Admin_UI::create_admin_menu
  • The main hook attached to \SLP_Admin_UI::$menu_items[‘slp_manage_locations‘]
  • When clicked, fires \SLP_Admin_UI::renderLocationsPage
    • Which calls \SLP_Admin_Locations::display

SLP_Admin_Locations

extends WP_List_Table – this is already going to be a shit show. The WP_List_Table interface is from 1902. Maybe before that. It is awful.

Referenced by:

• \MySLP_Admin::do_admin_startup()
  • Setting the screen property , probably not needed:
    SLP_Admin_Locations::get_instance()->screen = ‘store-locator-plus_page_slp_manage_locations’;
• \SLP_Power_Pages_Admin::extend_location_edit()
  • Only if Store Pages is active, add an edit section to show an “edit Store Page” link
• \SLP_Power_Pages_Admin::set_page_actions()
  • Add the recreate store page action hyperlink under each location on the table
• \SLP_Actions::save_screen_options()
  • To save the screen options, which is currently only the page (table rows) length.
• \SLP_Admin_Locations_Add::
  • initialize
  • extended_data_block – for extended data fields
• \SLP_Admin_UI::renderLocationsPage
  • To render the UI
• \SLP_Location_LoadFromWP::import
  • To only report back any URL the person puts in is invalid.
  • This is called from \SLP_Admin_Locations_Actions::process_actions when the current_action is load_from_wp
  • This is setup from \SLP_Admin_Locations_Load
• \SLP_Settings_manage_locations_table::display
  • A shim for $this->settings->add_ItemToGroup( array(
    ‘group_params’ => $group_params,
    ‘type’ => ‘manage_locations_table’,
    ) );