Javascript WP商店定位器的定制

Javascript WP商店定位器的定制,javascript,wordpress,Javascript,Wordpress,我曾尝试使用WP store locator以编程方式生成门店结果,基本上我所做的是使用elementor为每个城市创建了一个按钮。当用户单击“城市”按钮时,“我的代码”会设置相应的邮政编码、半径和“结果数”值,这样我就可以毫无问题地获得该城市的商店列表 当用户输入邮政编码并首先执行搜索时,问题就会出现。在此之后,如果用户试图通过单击该城市按钮获取该城市的商店,则不会显示结果,因为商店定位器没有读取编程提供的邮政编码。我不知道为什么WP商店定位器没有读取邮政编码,请提供此问题的解决方案。我使用的

我曾尝试使用WP store locator以编程方式生成门店结果,基本上我所做的是使用elementor为每个城市创建了一个按钮。当用户单击“城市”按钮时,“我的代码”会设置相应的邮政编码、半径和“结果数”值,这样我就可以毫无问题地获得该城市的商店列表

当用户输入邮政编码并首先执行搜索时,问题就会出现。在此之后,如果用户试图通过单击该城市按钮获取该城市的商店,则不会显示结果,因为商店定位器没有读取编程提供的邮政编码。我不知道为什么WP商店定位器没有读取邮政编码,请提供此问题的解决方案。我使用的代码附在下面

const data = {
  cities: {
    austin: {
      center: '78702'
    },
    houston: {
      center: '77080'
    },
    sanAntonio: {
      center: '78217'
    },
  },
  radius: '30',
  results: '40',
};
const previousValues = {
  selectedCityPos: 0,
  radius: '5',
  results: '20',
  center: '',
}
function getCityPos(cityId){
  return Object.keys(data.cities).findIndex(cityId);
}
function setCityCheckedState(pos, checkedState){
  const checkBox = document.querySelectorAll('#wpsl-checkbox-filter input[type=checkbox]')[pos] || {};
  checkBox.checked = checkedState;
  previousValues.selectedCityPos = pos;
}
function setSearchRadius(miles) {
    const elem = document.querySelector('#wpsl-radius span.wpsl-selected-item');
    previousValues.radius = elem['data-value'];
    elem.setAttribute('data-value', miles);
}
function setSearchResults(count) {    
    const elem = document.querySelector('#wpsl-results span.wpsl-selected-item');
    previousValues.results = elem['data-value'];
    elem.setAttribute('data-value', count);
}
function setSearchLocation(zipCode){
  const elem = document.getElementById('wpsl-search-input');
  previousValues.center = elem.value;
  elem.value = zipCode;
  elem.dispatchEvent(new Event("input"));
  elem.dispatchEvent(new Event('keyup', {keyCode: 13}));
}
function searchStores(){
    const link = document.getElementById('wpsl-search-btn');
    const clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": false,
    "cancelable": true
    });
    link.dispatchEvent(clickEvent);
}
function revertValues(){
    const {selectedCityPos, radius, results, center} = previousValues;
    setCityCheckedState(selectedCityPos, false);
    setSearchRadius(radius);
    setSearchResults(results);
    setSearchLocation(center);
}
function attachCityClickListeners(){
  //cities should be in sorted order
  data.cities = Object.fromEntries(Object.entries(data.cities).sort());

  //query all city button elements from DOM
  const buttons = document.querySelectorAll('section.elementor-element-a089118 p');
  buttons.forEach((button, i) => {
    //for each button attach a click listener
    button.addEventListener('click', (elem)=>{      
      //1. check this city
      setCityCheckedState(i,true);

      //2. set radius to max
      setSearchRadius(data.radius);

      //3. set results to max
      setSearchResults(data.results);

      //4. set a zip code as a center point for this city
      setSearchLocation(Object.values(data.cities)[i].center);

      //5. search stores
      setTimeout(()=>searchStores(), 1500);

      //6. revert values after a short delay to allow form event to capture new values
      setTimeout(()=>{
        revertValues();
      }, 500);
    });
  });
}
attachCityClickListeners();