javascriptwordpressfacetwp

Pull text from within span class to FacetWP Proximity Input text field


I'm able to copy the text from within the span class to the input field automatically on page load but I am unable to get FacetWP to respond and update the results even when using FWP.refresh()

https://facetwp.com/documentation/developers/javascript/facetwp-refresh/

Facet name - proximity

Span class - local-addrress-name

Input class - facetwp-location

window.addEventListener('load', function () {
var nodes = document.querySelectorAll('.local-address-name');
var last = nodes[nodes.length- 1];
document.querySelector('.facetwp-location').value =last.innerHTML;
  setTimeout(function() {  
FWP.refresh(); // Change a facet value
         console.log( "ready!" );
  }, 2000);

    
});
<span class="local-address-name">Brunswick, GA, USA</span>

<input type="text" class="facetwp-location" value="" placeholder="Enter Zip or Address" id="facetwp-location" autocomplete="off">


Solution

  • FacetWP relies on hidden lat/lng fields that do the heavy lifting, was then just syncing everything up. This is such a simple way to achieve related products by lat/lng location proximity on each single product page. Cheers!

    window.addEventListener('load', function () {
    var nodes = document.querySelectorAll('.local-address-name');
    var last = nodes[nodes.length- 1];
    document.querySelector('.facetwp-location').value =last.innerHTML;
    });
    
    window.addEventListener('load', function () {
    var nodes = document.querySelectorAll('.local-lat-val');
    var last = nodes[nodes.length- 1];
    document.querySelector('.facetwp-lat').value =last.innerHTML;
    });
    
    window.addEventListener('load', function () {
    var nodes = document.querySelectorAll('.local-lng-val');
    var last = nodes[nodes.length- 1];
    document.querySelector('.facetwp-lng').value =last.innerHTML;
    FWP.refresh('');
    });