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!
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:
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:
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:
You can pass more URLs and use switch statement or you can skip all the links with particular classname:
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!