Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compatibility issue with Snipcart #33

Open
ioalex opened this issue Aug 1, 2020 · 6 comments
Open

Compatibility issue with Snipcart #33

ioalex opened this issue Aug 1, 2020 · 6 comments
Assignees
@rumkin
Labels
question Further information is requested

Comments

@ioalex
Copy link

ioalex commented Aug 1, 2020 •
edited by rumkin
Loading

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
Copy link
Owner

rumkin commented Aug 8, 2020

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

@rumkin rumkin self-assigned this Aug 8, 2020
@rumkin rumkin added the bug Something isn't working label Aug 8, 2020
@rumkin
Copy link
Owner

rumkin commented Aug 8, 2020 •
edited
Loading

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
Copy link
Author

ioalex commented Aug 8, 2020

Thanks for your work so far!

@rumkin
Copy link
Owner

rumkin commented Aug 8, 2020

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>

@rumkin rumkin added question Further information is requested and removed bug Something isn't working labels Aug 8, 2020
@ioalex
Copy link
Author

ioalex commented Aug 9, 2020

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

@ioalex
Copy link
Author

ioalex commented Aug 9, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rumkin rumkin

Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rumkin @ioalex