Store Locator: How to make a map view default on mobile

[Max]

Want to make a Map view in your Store Locator widget default on mobile devices? We’ve got a solution!

Just add the script below to the Custom JS field on the Settings tab of your widget’s settings and you’ll be fine

const openMapsButtonSelector = "[class*='mobile-layout__Container-sc'] [class*='FloatingButton__FloatingButtonContainer-sc'] button";

const LISTEN_TYPES = {
  one: {
    select: (selector, root) => root.querySelector(selector),
    validate: (node) => !!node
  },
  all: {
    select: (selector, root) => root.querySelectorAll(selector),
    validate: (node) => node?.length > 0
  }
};

function listenStep(args) {
  args.node = args.select(args.selector, args.root);

  if (!args.validate(args.node)) {
    args.step++;
    if (args.step < args.limit)
      setTimeout(() => {
        listenStep(args);
      }, args.delay);
    else
      args.reject();
  }
  else {
    args.resolve(args.node);
  }
}

async function asyncListenFor(selector, type = 'one', customArgs = {}) {
  const args = {
    root: document,
    node: undefined,
    selector,
    delay: 100,
    limit: 50,
    step: 0,
    select: LISTEN_TYPES[type].select,
    validate: LISTEN_TYPES[type].validate,
    reject: () => {},
    ...customArgs
  };

  if (type === 'one' || type === 'all') {
    return new Promise((resolve) => {
      listenStep({ ...args, resolve });
    });
  }
}

asyncListenFor(openMapsButtonSelector).then((openMapsButton) => {
  openMapsButton.click();
});

Guys, was this solution helpful to you? Please let us know in the comments