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.

Leave a Reply