Debug: Results Phone Label Issue

Posted by lcleveland in Debugging, Development, Store Locator Plus®

Bug report

The Label for RESULTS PHONE is not appearing in front end

Recreation on QC

Set style on QC to “Default”.

Settings | Results | Results Layout:
<div id=”slp_results_[slp_location id]” class=”results_entry location_primary [slp_location featured]”> <div class=”results_row_left_column” id=”slp_left_cell_[slp_location id]” > [slp_addon section=primary position=first] <span class=”location_name”>[slp_location name] [slp_location uml_buttons] [slp_location gfi_buttons]</span> <span class=”location_distance”>[slp_location distance_1] [slp_location distance_unit]</span> [slp_addon section=primary position=last] </div> <div class=”results_row_center_column location_secondary” id=”slp_center_cell_[slp_location id]” > [slp_addon section=secondary position=first] <span class=”slp_result_address slp_result_street”>[slp_location address]</span> <span class=”slp_result_address slp_result_street2″>[slp_location address2]</span> <span class=”slp_result_address slp_result_citystatezip”>[slp_location city_state_zip]</span> <span class=”slp_result_address slp_result_country”>[slp_location country]</span> <div class=”contact_info”> <span class=”slp_result_address slp_result_phone”>[slp_location phone]</span> <span class=”slp_result_address slp_result_fax”>[slp_location fax]</span> </div> [slp_addon section=secondary position=last] </div> <div class=”results_row_right_column location_tertiary” id=”slp_right_cell_[slp_location id]” > [slp_addon section=tertiary position=first] <div class=”online_info”> <span class=”slp_result_contact slp_result_website”>[slp_location web_link]</span> <span class=”slp_result_contact slp_result_email”>[slp_location email_link]</span> <span class=”slp_result_contact slp_result_directions”><a href=”https://[slp_option map_domain]/maps?saddr=[slp_location search_address]&daddr=[slp_location location_address]” target=”_blank” class=”storelocatorlink”>[slp_location directions_text]</a></span> </div> <span class=”slp_result_contact slp_result_hours textblock”>[slp_location hours]</span> [slp_location pro_tags] [slp_location iconarray wrap=”fullspan”] [slp_location eventiconarray wrap=”fullspan”] [slp_location socialiconarray wrap=”fullspan”] [slp_addon section=tertiary position=last] </div> </div>

Settings | Results | Labels | Phone
Phone

Read More “Debug: Results Phone Label Issue”

Architecture: Update Plugin

Posted by lcleveland in Architecture, Development, Store Locator Plus®

FOR INTERNAL USE ONLY

The process that happens when a plugin is updated, especially the conversion of pre-existing options to SLPlus options / options_nojs serialized JSON objects.

In older releases , including some vestiges that still existing in 2209.X versions, options were stored in a WordPress option_name that match the plugin name. Such as option_name ‘slp-power’ for the power add on. Each add on had its own set of options.

When Smart Options were introduced into the SLP architecture there were two options that stored “all settings”. csl-slplus-options (aka “options”) stores settings that were not being localized and sent to JavaScript. csl-slplus-options_nojs (aka “options_nojs”) are the settings that are not localized. (In theory… both of these will be replaced with a single monolithic store in csl-slplus-options eventually and specific settings retrieved from JavaScript via a REST call).

The idea was to eventually (soon?) convert all separate plugin-specific option settings like option_name = ‘slp-power’ into a standard csl-slplus-options string. Below is the flowchart that describes how that conversion happens.

Read More “Architecture: Update Plugin”

Store Locator Plus® JavaScript Pub/Sub

Posted by lcleveland in Architecture, Store Locator Plus®

Store Locator Plus® was updated with a “pub/sub” model a few years ago. This feature is a managed interface for jQuery Callbacks that allows disparate Javascript functions to interact with each other. It works much like hooks and filters in WordPress, but solely within the JavaScript runtime space.

The basic premise is any JavaScript function can call a “publish” method that fires off a stack of callbacks.

slp_Filter('slp_map_ready').publish(cslmap);

What is run by those callbacks is set by having a JavaScript module call a “subscribe” method.

slp_Filter( 'slp_map_ready' ).subscribe( this.initialize );
Read More “Store Locator Plus® JavaScript Pub/Sub”

Architecture: Locations Bulk Action

Posted by lcleveland in Architecture, Store Locator Plus®

Location bulk actions allow for users to work on multiple locations at once. Export a list of locations, delete select locations from the location table, geocode locations ,and more.

2209.12

Export locations is our first attempt at making bulk actions work more like a single page application.

Instead of doing a form post and submitting the location list, then reading in some PHP-driven variables to set the JavaScript behavior — in 2209.12 the export process bypasses the form submit.

Bypass is handled by using a pub/sub module with a dynamic filter name “exportBulkAction”. This tells the main SLP JavaScript process to execute the callback stack instead of pushing a form submit. This allows the AJAX call to happen immediately without a full page re-render.

2208.15

The apply button processing is handled in the main plugin’s admin.js file.

It uses jQuery to process form variables and prepare the #locationForm to be submitted.

When submitted it sends the request back to WordPress for standard “full page load” processing.

Read More “Architecture: Locations Bulk Action”

Architecture: Location Download

Posted by lcleveland in Architecture, Store Locator Plus®

A feature provided in the Professional level service is a CSV export of locations via the Location Manager page.

2209.12

This process is being revised so that export bulk action works more like a single page application.

Also see the Bulk Action processor page.

2208.15

The process flow for the Locations : Export CSV…

The process starts with a standard form submit from the Bulk Actions “Apply” button.

WordPress sets up a JavaScript variable location_import that has info about the action “export”.

This triggers a jQuery(document).ready() call that fires another request via AJAX back to WordPress with some new parameters in place.

That AJAX call eventually sends back a CSV file that is stored in a DOM div that was prepared with the jQuery() document loader when the refreshed page (post original submit) was rendered.

Read More “Architecture: Location Download”

SOP: Code Management

Posted by lcleveland in Development, Internal Use Only, Process, Store Locator Plus®

All development is done on personal forked copies (origin) of the primary Store Locator Plus® repositories (upstream). Upstream is considered the “single source of truth” for the current code state.

Additional Reading

Forks and Pull Requests

To begin work, fork the main Store Locator Plus® repository (upstream) to a personal repo (origin).

When code is ready to be integrated with current ongoing development effort, issue a pull request for your origin:update/<something> (see branch conventions below) branch into the upstream:develop branch. When the pull request is approved and merged, the upstream:develop branch be ready for the rest of the team.

Monitor upstream:develop regularly and be sure to fetch-and-merge (aka “pull”) the upstream:develop branch into origin:develop. Any in-progress origin:update/<something> branches that have not had a pull request issues against upstream should be rebased onto the new origin:develop branch. Make sure all conflicts are resolved.

Read More “SOP: Code Management”

Sass, SCSS and CSS files

Posted by lcleveland in Development, Process, Store Locator Plus®

Store Locator Plus® uses SCSS files compiled by the Sass application to generate the custom CSS files for the application. To process these files you’ll need to have a builder application, such as Webpack via Node, or an IDE with a file watcher in place. Proper generation of the CSS compilations is critical to creating a proper application interface.

Eventually our process will move to a managed script to build the application stack as we move toward JavaScript interfaces, such as React, as a core of the user experience. In the meantime the IDE file watcher approach is in place.

Read More “Sass, SCSS and CSS files”

Sneak Preview: Reports 2208.15

Posted by lcleveland in General

A new reports interface is coming in the 2208.15 release based on preliminary work with the React API library. In addition to the simplified interface , the new reports provide more controls over the data table. Some new features include a date selector that auto-refreshes the data table, ability to filter rows, select which columns to display, or change the display density. The export CSV now honors the column display and filter settings. There is also a new “direct to print” option.

Here is the informal review of the new reports.

Dev Standards

Posted by lcleveland in Debugging, Development, Store Locator Plus®, Testing

git Branching Model

Master / Main

The production branch. This branch should always point to production releases – the code released to the public or in use on production systems.

Staging

The release candidate branch. Prerelease plugins or the plugins/components that are published to dashbeta for the SaaS offering.

Test / Develop

The branch being used for testing integration of ongoing development branches.

Version Identifiers

Starting in August 2022 all product versions will follow a YYMMDD.xx standard where YYMMDD is based on the development start date for primary product releases (Store Locator Plus® for WordPress, MySLP Dashboard,etc.) For related product releases (Power, Front-End, etc.) the date should try to match the main product/service it is related to but this is not a strict rule – rather a suggest to help users easily identify related releases.

The YYMMDD should be 2 digits each and xx should always start at 01 for the first revision. For example 220815.01 is the first iteration for an app that started development on 220815.

Code Formatting / Linting

JavaScript

The preferred linting library is ESLint due to the ongoing React support.