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.

Leave a Reply