Landing Page

This is an advanced guide.

Dealing with Slide Out Cart Behavior

Since we accommodate a wide variety of merchants who utilize a wide variety of themes, our code does not directly make changes to general functionality of themes. For instance, some themes will automatically update the cart contents and the cart icon in real-time when a product is added to cart and some do not. At a base level, our add to cart button on the landing page will do the following:

  1. Add the membership to cart (if it's not already in cart)

  2. Update add to cart buttons on the page with a success state

  3. Refresh the page with ?cart-updated=true added to the URL

  4. Once the page reloads, it uses the URL param from step #3 to display a success message to the customer

Again, we have this functionality in place to make sure we can provide a great user experience for all merchant's customers.

In instances where the theme has slide out cart behavior and our above solution is interfering with that behavior, we provide the option to disable the steps #3 and #4 from above so that you can continue to maintain the user experience that's unique to your brand.

There are 2 ways to do this:

Add Script Tag in <head>

Add the following HTML script tag within the head of your theme.liquid file and this will disable steps #3 and #4 behavior on the landing page:

<script>
    window.inveterateLPSettings = { addToCartRedirect: false };
</script>

Our landing page will automatically pick up that object and disable the functionality.

Make Update in Your JavaScript

We've also added a utility function that's only on the landing page to allow you to update the addToCartRedirect setting after our code has already loaded on the page. To use this method, you'll want to first make sure that window.inveterate.landing.updateLPSettings exists by using something like a setInterval or a while loop and then from there you can use that to update settings:

let inveterateCounter = 0;
const inveterateInterval = setInterval(() => {
  if (window.inveterate && window.inveterate.landing && window.inveterate.landing.updateLPSettings) {
    window.inveterate.landing.updateLPSettings({ addToCartRedirect: false });
    clearInterval(inveterateInterval);
    return;
  }
  
  inveterateCounter += 1;
  if (inveterateCounter >= 100) {
    clearInterval(inveterateInterval);
  }
}, 500);

This will run 100 times and will run every 500ms. Once it either finds window.inveterate.landing.updateLPSettings or if the counter reaches 100, it will end the loop. The reason for the counter is to prevent this from running forever and having an impact on performance. If it doesn't find it after 100, it probably isn't loading on the page.

PreviousWebhooksNextStorefront

Last updated