Compatibility issue with Snipcart

ioalex commented 3 years ago

I am using Pill and Snipcart together in a project. Snipcart is a "simple shopping cart solution that allows you to turn any website into a fully customizable e-commerce platform". This is done by including Snipcart's assets into the project's HTML code. Like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<!-- Snipcart's preconnect hints -->
<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">

<!-- Snipcart's Stylesheet -->
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.18/default/snipcart.css" />
</head>
<body>
<!-- Snipcart's buttons -->
      <div>
        <button class="snipcart-customer-signin">Account</button>
        <button class="snipcart-checkout">
          Cart
          <span class="snipcart-total-price">$0.00</span>
          (<span class="snipcart-items-count">0</span>)
        </button>
      </div>
<!-- Snipcart itself -->
    <div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.18/default/snipcart.js"></script>
</body>
</html>

Issue: Pill works fine when I try to fetch content from other HTML pages, however, when I click on Snipcart's buttons (Account and Cart) and from there click on 'Register', the URL changes from /#/register to /register or from /#/cart/register to /cart/register. The web page will be blank as /register and /cart/register does not exist. The same error occurs when I click on 'Forgot your password?', the URL will change from /#/forgot-password to /forgot-password and the web page will display as blank. The Pill error page from the default Error Handler does not display either.

Furthermore, I have noticed that when I do click on Snipcart's buttons, this error will show up in the JavaScript console:

pill.min.js:1 Uncaught TypeError: Cannot read property 'scroll' of null
    at pill.min.js:1

I understand that I should probably use Pill's shouldServe option to exclude route from Snipcart as Pill must not make any change to the URL or try to load content for any Snipcart URL, however I cannot seem to get this to work.

I have tried the following shouldServe logic without any luck:

pill('#app', {
 shouldServe(url) {
   return url.pathname !== '/#/register'
 }
})

You can pass more URLs and use switch statement or you can skip all the links with particular classname:

pill('#app', {
 shouldServe(url, link) {
   return ! link.className.includes('snipcart-customer-signin')
 }
})

I've built a dummy website to highlight this issue: Pill Snipcart test site You can take a look at the source code here: pill-snipcart-test

Thank you so much for reading!

rumkin commented 3 years ago

It seems like it's a bug in Pill. When it tries to handle history of the URLs which shouldn't be served.

rumkin commented 3 years ago

I've fixed scroll issue which thrown an undefined property issue when history.state was empty. Now it shows Snipcart's error

The #snipcart div was removed from the document. This may happen when a frontend library is used to render the div. You should only render it once, or it might prevent the cart from working.

But if you open URL https://reverent-cori-bbfb1c.netlify.app/index.html (link), it works and the cart opens. I'm not sure what causes the error here. Need time to think over it.

ioalex commented 3 years ago

Thanks for your work so far!

rumkin commented 3 years ago

Try to wrap content with snipcart div, and put snipcart script out of content. probably it should help.

<div id="snipcart">
  <div id="content">
  </div>
</div>
<script src="https://cdn.snipcart.com/themes/v3.0.19/default/snipcart.js"></script>

ioalex commented 3 years ago

I will try doing this and let you know the outcome!

ioalex commented 3 years ago

Looks like this didn't work for me in my local development server. Really appreciate your help!

rumkin / pill

Compatibility issue with Snipcart #33