Ecommerce Functionality and Interactions with Barba.js

Design help Custom code
1

hey everyone

trying to use Barba.js v2 to have seamless transitions between all my pages. Barba is a library that basically turns your website into a SPA, by only reloading content in a container, and keeping everything else static, like headers and footers that don’t need to be constantly reloaded.

But, I’ve found some of my interactions and eCommerce functionality doesn’t seem to work. For example, when I navigate to my store page and to one of the items in my shop, I can’t seem to add an item to my cart without getting a “Product is not available in this quantity.” error. If I refresh the page, the item will add to the cart, but when I navigate back to the store page to look at my cart, it shows as 0 items, unless I refresh the page.

Interactions also don’t load correctly. I have interactions to enable a custom cursor, and although it functions properly across pages because the div that contains the cursor is not in the dynamic container, the hover interactions I have on my links and buttons in the dynamic pages to animate the cursor don’t function correctly past the first full page load.

I believe this is something to do with the way Barba.js loads pages, as the scripts don’t reload, only the content changes.

I’m wondering if anyone has had these issues, or is aware of a way to refresh the scripts through JS to allow the eCom functionality to work properly without fully refreshing the page.

thanks,
Danny

Here is my site Read-Only: https://preview.webflow.com/preview/moonbase?utm_medium=preview_link&utm_source=designer&utm_content=moonbase&preview=c534acd8297c724bfe8dbd7c2f5ef891&mode=preview

2

From early testing, this seems to be working for both IX2 and Ecommerce:

function resetWebflow(data) {
  let parser = new DOMParser() 
  let dom = parser.parseFromString(data.next.html, "text/html") 
  let webflowPageId = $(dom).find("html").attr("data-wf-page") 
  $("html").attr("data-wf-page", webflowPageId) 
  window.Webflow && window.Webflow.destroy() 
  window.Webflow && window.Webflow.ready() 
  window.Webflow && Webflow.require('commerce').init({ siteId: "652d77e994afeeefc40b0217"}) 
  window.Webflow && window.Webflow.require("ix2").init()
}

barba.init({
    debug: true,
    preventRunning: true,
    transitions: [
        {
        leave(data) {

        },
        after(data) {
            resetWebflow(data) 
        },
    }
  ],
})