Guide to displaying personalized metadata on the front end using WP Store Locator

I would like to insert a unique text into the information windows located beneath the Store details (below Email).

https://i.sstatic.net/2ItMW.jpg

Following the guidelines from:

To implement this feature, I made the necessary adjustments in the function.php file of the WordPress theme:

// custom_textinput field addition
add_filter( 'wpsl_meta_box_fields', 'custom_meta_box_fields' );

function custom_meta_box_fields( $meta_fields ) {

    $meta_fields[__( 'Additional Information', 'wpsl' )] = array(
        'phone' => array(
            'label' => __( 'Tel', 'wpsl' )
        ),
        'fax' => array(
            'label' => __( 'Fax', 'wpsl' )
        ),
        'email' => array(
            'label' => __( 'Email', 'wpsl' )
        ),
        'url' => array(
            'label' => __( 'Url', 'wpsl' )
        ),
        'my_textinput' => array(
            'label' => __( 'Textinput', 'wpsl' )
        )
    );

    return $meta_fields;
}

// incorporation of my_textinput into the JSON response
function custom_frontend_meta_fields( $store_fields ) {

    $store_fields['wpsl_my_textinput'] = array( 
        'name' => 'my_textinput',
        'type' => 'text'
    );

    return $store_fields;
}


// showcasing my_textinput on the frontend info window
add_filter( 'wpsl_info_window_template', 'custom_info_window_template' );

function custom_info_window_template() {

    global $wpsl_settings, $wpsl;

    $info_window_template = '<div data-store-id="<%= id %>" class="wpsl-info-window">' . "\r\n";
    $info_window_template .= "\t\t" . '<p>' . "\r\n";
    $info_window_template .= "\t\t\t" .  wpsl_store_header_template() . "\r\n";  
    $info_window_template .= "\t\t\t" . '<span><%= address %></span>' . "\r\n";
   
   // Remaining template code shortened for brevity...

    return $info_window_template;
}

After appending the subsequent section of code (close to the end), the info windows cease to display:

$info_window_template .= "\t\t" . '<% if ( my_textinput ) { %>' . "\r\n";
$info_window_template .= "\t\t" . '<p><%= my_textinput %></p>' . "\r\n";
$info_window_template .= "\t\t" . '<% } %>' . "\r\n";

The Developer Tools console shows the following error message:

Uncaught ReferenceError: my_textinput is not defined
    at eval (eval at m.template (underscore.min.js?ver=1.8.3:5), <anonymous>:52:2)
    at c (underscore.min.js?ver=1.8.3:5)
    at H (wpsl-gmap.min.js?ver=2.2.15:1)
    at _.ze.<anonymous> (wpsl-gmap.min.js?ver=2.2.15:1)
    at Object.trigger ...

How can I ensure that the data is included in the JSON output?

javascriptjsonwordpressgoogle-maps

Answer №1

To achieve the desired outcome, you will need to utilize 3 specific filters.

  1. The first filter is wpsl_meta_box_fields
  2. The second filter is wpsl_frontend_meta_fields
  3. Lastly, make use of the wpsl_info_window_template filter

The wpsl_frontend_meta_fields filter is crucial for adding a custom field in the frontend json data.

If you encounter an error stating that the custom field "my_textinput" has not been added to the frontend json, it could be due to caching issues. Make sure to clear your cache by navigating to the Tools section in the Store Locator settings page and selecting Clear store locator transient cache. Clear transient cache

Answer №2

Make sure to include a filter for custom_frontend_meta_fields in your code:

add_filter( 'wpsl_frontend_meta_fields', 'custom_frontend_meta_fields' );

function custom_frontend_meta_fields( $store_fields ) {

    $store_fields['wpsl_my_textinput] = array(
        'name' => 'my_textinput',
        'type' => 'text'
    );

You can specify different types like URL, phone, text... Explore the documentation here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of extracting data from a form and storing it as global variables

Consider the following example: This is our HTML form <form action="test1" method="GET" name="frm"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <i ...

javascriptnode.js

When I submit a form with an empty date input field, the Datepicker is sending a 0000-00-00 date

[I am experiencing an issue with my date input field. When I submit without entering any value, the date on the view page shows as 0000-00-00 instead of being empty or blank.] <div class="col-sm-3 col-sm-offset-1"> <div class="input-group"& ...

javascriptphpjqueryhtmlcodeigniter

Unable to serialize stream data in ASP .NET Core

Attempting to deserialize objects from an HTTP response. The response stream contains JSON information, which has been verified as valid through an online deserializer. I obtained the object class from the API framework, so I believe all properties should ...

c#jsonasp.net-core

Detect the 'mousewheel' event on a container with a concealed overflow

Is there a way to capture the "mousewheel" event on a body with a hidden overflow? I attempted to follow the solution provided here, but unfortunately, it did not work in my situation. ...

javascriptjqueryscrollmousewheel

Attempting to create an array using jQuery's :checked selector

In my table structure below, I have multiple rows with various data: <tr class="row"> <td class="row-checkbox-delete-row"> <input tabindex="-1" class="checkbox-delete-row" type="checkbox" /> </td> <td class="r ...

javascriptjqueryarraysjquery-selectors

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

Exploring the art of unmarshalling with various variable types

Currently, I am dealing with a challenging API that produces the following output: [ { "contactId": 2, "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda6acbfa4a3ace3bda1aca4a38da8b5aca0bda1a8e3aea2a0">[email ...

jsongogo-http

PHP encoding of JSON converts key to a string if it is not set

Seeking assistance in understanding the transformation occurring in the following code snippet. $data[0] = array("one" => "uno", "two" => "dos", "three" => "tres"); $data[1] = array("one" => "uno", "two" => "dos", "three" => "tres"); // ...

phpjson

What is the process of transforming JsonForm into Json format?

Looking to extract specific data from a JSON file and convert it into a JsonForm using Java. Can anyone recommend a suitable framework for this task? ...

javajsonjsonforms

Having difficulty removing new or existing lines on StackBlitz

I attempted to experiment with React on StackBlitz, but I encountered a problem where I couldn't delete any lines of code. It seems that while I can add new lines of code, deleting them is not an option. Even when logging in with GitHub, the issue per ...

javascriptangularjsreactjstypescriptstackblitz

Refreshing a JQplot graph with new data using ajax

I've been trying various approaches to solve this issue, but haven't been able to get it working as intended. I believe it's not a major problem (or at least I hope so), but my Ajax and jQuery skills are somewhat limited, which is why I&apos ...

ajaxjsonjqplot

ng-if directive in AngularJs will not function properly if the condition text includes a space

I encountered an issue while attempting to set values in AngularJS UI grid based on the row.entity values. To address this, I created a cellTemplate that evaluates the row values and applies text styling accordingly. Code Snippet var statusTemplate=&apos ...

javascriptangularjsangular-ng-if

Best practices for using Promises in NodeJS

I'm in the process of developing a library that builds on top of amqp.node (amqplib), focusing on simplifying RabbitMQ functionality for our specific project needs. This new library is designed to utilize Promises. So, for instance, when subscribing ...

javascriptnode.jsamqp

Download the ultimate HTML package with a built-in chart.js component directly from your nuxt app

I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...

javascripthtmlvue.jsnuxt.jsserver-side-rendering

Adding key/value pairs to an array of objects in RxJS Observables can be easily

I currently have an Angular app with state management that retrieves data from a database in observables. Here is an example of the interfaces I am working with: interface Service { id: number, name: string, category_id: number, } interface Category ...

javascriptangulartypescriptrxjs

Is it possible to forward both the header and body of a request to an AWS Step Function pipeline?

Currently facing a challenge with request passthrough. I am tasked with extracting and processing information from both the header and body of a request using a step function pipeline. The setup involves utilizing a REST API Gateway with a mapping template ...

jsonamazon-web-servicesaws-api-gatewayaws-step-functions

The Json serialization process encountered an error: the type 'Null' is incompatible with the type 'String'

As I dive into the world of Flutter development, I find myself faced with a challenging task - building a list from a JSON list object obtained through a REST API. The JSON response includes fields such as type, contact (consisting of first_name and last_n ...

jsonflutterrestflutter-listview

Split vue.js templates into individual files

Is there a way to modify this code in Vue.js to achieve the following: <template type="login" /> <template type="subscribe" /> <template id="login"> <label>Username</label> <input placeholder="Enter your username" ke ...

javascriptvue.js

Leveraging jquery within an XML document in a SAPUI5 fragment

I'm experiencing a minor issue with my app. I have an Image property that has an empty background, and I want to add a class to it when clicked. However, my controller is unable to detect classes or IDs of properties in the view.xml document. Is there ...

javascriptjqueryxmlviewsapui5

I am interested in retrieving a particular item from the data() function in Firestore

snapshot.forEach(doc => { console.log("ID: "+doc.id, '=>', "Doc DATA: "+JSON.stringify(doc.data())); }); I am looking to extract just one item from doc.data(), which is an array of strings named "supportedCurrencies". Can someone guide m ...

jsontypescriptgoogle-cloud-firestore