Item showing Available Later

[bodegapark]

Some items on my site are being displayed as "Available Later". I have double checked store hours and item category hours, and even within normal operating hours, the items were being displayed as "Available Later" on my "Order Online" page. However, if you look at the same items in a featured menu items section, they were being displayed as available without any issues. Any thoughts on what might be causing this issue?

[Ellie_]

Hey there @bodegapark!

We'd definitely like to take a look at this with you! Typically, when an item says it is "Available Later", that means that the item is in a specific time-based category. If it is showing the customer that it is available in a different section, it won't allow the customer to order until the time frame it is set for. If there is a specific item that is still letting customers order outside of the time category, please send that item name over so we can investigate.

Also, welcome to the Seller Community! 🥳 We are so happy to have you here. While you are here, we recommend checking out our Orientation & Etiquette. Hope this helps! 😊

[sqez]

We're currently having the same issue. We can add the orders to our cart from the item page itself or from the featured-items section on the home page, but on the Orders page, the add-to-cart-button is disabled and says "Available Later". Even when we select a pick-up time that is in the right window for the item.

Our setup

We have a category of items that take 1-calander-day to prep and are available for pickup on Mon/Wed/Fri (set via a time-based category).

Hack/Investigation

If I go into my browser's dev-tools and remove the `disabled` flag from the "Available later" button, I can add it to my cart. Once in my cart my pickup time is adjusted/limited correctly (automatically moves to the next Mon/Wed/Fri and then only allows me to select a pick-up time on Mon/Wed/Fri).

It seems to me like the availability is not being calculated correctly based on the pick-up time selected on the Order page.

Impact

This is causing us lost sales as this category is our most popular and so far I've had to walk people through how to place the order, which is causing a lot of friction. It's frustrating because the cart and item seem to work perfectly, but the Order page is broken.

[frances_a]

Hello @sqez 👋

First, let me just say: I love the way you have presented the information. This is incredibly helpful when we escalate issues to our teams to investigate and avoids a bunch of clarifying questions. We truly appreciate having all the information from the get-go. 

This concern has already been escalated to our e-commerce team, so it can be investigated. 

Once I hear back from them, I'll be back with some updates. 

Thank you ✨

[frances_a · Accepted solution]

I did not expect to hear back so quickly, but here we go! 

@sqez

Time-based categories don't limit the pick-up time for items, but rather the ordering times. 

This means that people will only be able to order an item in a time-based category within the hours specified for that category. 

Now for the issue where you can add the items to the cart from other pages within your site, that's because time-based categories are currently only supported within the Order Online page. 

Featured items sections will not be limited by the time-based category restrictions. 

Hopefully, this helps, but let me know if you have any further questions. 

Thank you ✨

[sqez]

Okay, thank you for the update. It doesn't seem correct to limit order times as opposed to pick up times (we really don't care when customers order as long as the expectation is set that they can only pick up on certain days/times -- in fact we need at least one over-night to prepare these products, so all we care about is controlling the pick-up times).

Since the cart works as expected (automatically adjusts the pick up time to the next available slot), we plan to hack in some javascript and re-enable the add-to-cart buttons on the Order page. We realize the hack may break with future Square updates, but hopefully we can get by with this for a while, until we can evaluate other products for this functionality. I think Toast can handle this case, but we'll have to double check.

Thanks for looking into it!

[sqez]

For posterity, here's a hack that worked for us:

const FIND_BUTTON_TEXT = "Available later";
const FIND_BUTTON_ELEMENT = "button";
const RETRY_DELAY = 500;
let observer;

function workaroundEnabled(currentPath) {
  return currentPath.endsWith("/order")
}

function handleMutations(mutationList) {
  let newElements = false;
  for (const mutation of mutationList) {
    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
      newElements = true;
      break;
    }
  }
  if (newElements) {
    enableAvailableLaterButtons();
  }
}

function watchMutations() {
  console.info("[SQEZ][AvailableLaterWorkaround] watching for new elements")
  observer = new MutationObserver(handleMutations);
  observer.observe(document, {childList: true, subtree: true});
}

function enableAvailableLaterButtons() {
  let matcher = document.evaluate(`//span[contains(text(), '${FIND_BUTTON_TEXT}')]`, document, null, XPathResult.ANY_TYPE, null);
  let element = matcher.iterateNext();
  let buttons = [];
  while (element) {
    const button = element.closest(FIND_BUTTON_ELEMENT);
    if (button !== null) {
      buttons.push([element, button]);
    }
    element = matcher.iterateNext();
  }

  if (buttons.length > 0) {
    console.debug("[SQEZ][AvailableLaterWorkaround] found " + buttons.length + " buttons")
  }

  for (let [element, button] of buttons) {
    element.textContent = "Add to order";
    button.disabled = false;
  }
}

function selectAll() {
  const dropdowns = document.getElementsByClassName("available__dropdown");

  if (dropdowns.length === 0) {
    console.info("[SQEZ][AvailableLaterWorkaround] waiting for dropdown...");
    setTimeout(() => selectAll(), RETRY_DELAY);
    return;
  }

  const select = dropdowns[0].querySelector("select");
  select.value = "all";
  select.dispatchEvent(new Event("change"));
}

document.addEventListener("readystatechange", () => {
  if (document.readyState === "complete" && workaroundEnabled(window.location.pathname)) {
    watchMutations();
    selectAll();
  }
});

navigation.addEventListener("navigate", (event) => {
    const url = new URL(event.destination.url);
  if (workaroundEnabled(url.pathname) && observer === undefined) {
    watchMutations();
    selectAll();
  } else if (!workaroundEnabled(url.pathname) && observer !== undefined) {
    console.debug("[SQEZ][AvailableLaterWorkaround] stop watching for new elements")
    observer.disconnect();
    observer = undefined;
  }
});

We put this inside of a <script></script> tag in Online > Tracking Tools > Custom code. This will break if:

1. the role attribute changes or is removed from the item-cards
2. the button text changes from Available later, to anything else
3. the cart is "fixed" (a.k.a. broken) to not allow ordering outside of the time-based category windows
4. the <button /> is changed to a different element

Hope this helps someone! Happy hacking!

• Edit 1: Bugfix -- original code not working with pagination or if the availability-dropdown is changed
• Edit 2: Bugfix -- wasn't working if navigating from another page onto `/order`
• Edit 3: Enhancement -- autoselect "All items" rather than the default "Available items" (I WANT TO SELL THIS STUFF, WHY MAKE IT SO HARD!?)
  • Note after Edit 3, we need to start minifying this. This tool is useful: https://www.digitalocean.com/community/tools/minify

[sqez]

So here it is Friday at 9:08 am my time, the time-based category is set up as Mon, Wed, Fri 9am - 6pm and all the Cleanses are marked as "Available later". I suspect this is because I have a 1-calendar-day prep time on them, which puts them outside of the "order window". In which case, no one will ever be able to order them unless we add pick-up times or remove the prep time (neither of which make sense for us). This reiterates why ordering time doesn't really matter, and only pickup time matters.

We'll stick with our hack I guess, but would love to put in a feature request. I'd be willing to work on it too 😅 (I'm a software engineer). I really don't want to move to another platform over this, but we need this functionality and it feels like it's so close.