Barba.js and liquify

ffergie77

Hey, I'm looking to give Liquify a go and was wondering if you offer a free trial? I'm currently using Udesly for all projects but it does seem like Liquify will give me more customisation, especially with regards to movable sections in the customiser. Would love to give it a go, but it is more expensive so looking to make sure it's worthwhile for our use cases!

98 comments

JJan

Hey @fergie77, for now Liquify is still in Beta and therefore free, so you can register and try it out :)

jjonas.halbstark

Hi @fergie77, nice to see you here 🙂 Yes liquify is still in Open Beta and can be used for free without any limits

ffergie77

Amazing, thank you!

ffergie77

I have to say it looks like you've done a fantastic job of this, it's exactly what I've been looking for from Udesly for years!

ffergie77

You haven't happened to have tried out how it works with barba.js have you? I'd experienced issues before with the way Udesly handles the conversion of webflow ecommerce to shopify. So if going page to page using barba, the ecommerce javascript wouldn't load in so add to carts etc wouldn't work.

jjonas.halbstark

Thanks @fergie77 🙂

jjonas.halbstark

We havent tried yet. But i think there shouldnt be a problem 🙂 If you are facing any issues please contact.

ffergie77

Great! I'll give it a go and let you know either way

ffergie77

Are component slots able to be converted?

ffergie77

Hey @jonas.halbstark, I've been playing around and I've come into a bit of an issue I think may be caused by Barba not playing nicely. When I load in to the product page from the home page, if I use the add to cart form from the template, it doesn't load in. However if I then reload the product page, it works fine. Do you have any advice? I've noticed in the console a lot of errors that seem to indicate that it's struggling to load in the form element.

ffergie77

I've recorded a Loom here https://www.loom.com/share/2a088a865f7b4966b5749a18b3ab7bc5?sid=71680a3d-f24d-4312-8b58-606e0095008e

jjonas.halbstark

do you have the shopify link for me?

ffergie77

Sure! https://testparallel.myshopify.com/

ffergie77

Two seconds sorry forgot I have to push some code

ffergie77

Okay it's working now, password is guibro

jjonas.halbstark

the webflow export would also be very helpful 🙂

ffergie77

Of course!

jjonas.halbstark

so the problem is, that barba js is not loading the dom an a page transition. Thats why the form does not get reloaded. We just need to reinitialize the alpine code

ffergie77

Perfect! How do I go about doing that? My barba code is hosted on netlify rather than on Webflow so it won't be inside that export zip. I'll have to put any reinitialization inside that code on barba page enter I think?

jjonas.halbstark

https://barba.js.org/docs/getstarted/custom-code/

jjonas.halbstark

this is the function we want to use. i just need to play around

ffergie77

No worries, really appreciate the help!

ffergie77

Hey @jonas.halbstark, did you have any luck with this?

jjonas.halbstark

Yes sorry. Can you try this inside the head of your project?

barba.init({
  views: [{
    namespace: 'product',
    beforeEnter() {
      document.dispatchEvent(new Event('alpine:init'));
      Alpine.start();
    },
    afterEnter() {
      parallax.refresh();
    }
  }]
});

jjonas.halbstark

Barba.js and liquify

jjonas.halbstark

also define the namespace: data-barba-namespace="product"

ffergie77

I've been trying to get this to work but annoyingly it's not been playing nice. Is parallax from parallax-js? I'm having to import that and alpinejs to my project as it's not liking them being undeclared

jjonas.halbstark

ah parallax that was just from the example from barba js. i think you can remove it. alpinejs is already part of the project

ffergie77

Hmmm I don't seem to be able to get it working, could you take another look please? It seems like it duplicates the alpine instance if you refresh the product page but doesn't load it when going from home page to product, I think?

ffergie77

I've got it in like this

Attachment

jjonas.halbstark

the namespace is also set?

ffergie77

Is is yes, I'd been using that for transitions already

jjonas.halbstark

Can you send me the link?

ffergie77

https://testparallel.myshopify.com/

ffergie77

Password is guibro

jjonas.halbstark

i think its currently not in the project.. or where can i find the code?

ffergie77

I'll get you the github sorry, two seconds

ffergie77

https://github.com/Fergie77/Parallel/blob/main/src/main.js

ffergie77

Just realised there's been an issue with the github code not loading in, only was showing up on my side so yours will be looking different to mine, will update just now

ffergie77

Okay you should be able to see it as I do on your side now!

jjonas.halbstark

can you try adding this:

{
      namespace: 'product',
      beforeEnter() {
        // Avoid initializing Alpine.js twice by checking if it has already been initialized
        if (!window.Alpine.initialized) {
          document.dispatchEvent(new Event('alpine:init'));
          Alpine.start();
          window.Alpine.initialized = true; // Flag that Alpine has started
        }

        // Dynamically reload the liquify_custom.js script on each transition
        loadExternalScript('//testparallel.myshopify.com/cdn/shop/t/38/assets/liquify_custom.js?v=99708878005376017301728214743');
      }
    }

jjonas.halbstark

i think we are on the right path

jjonas.halbstark

scripts also doe not get load on page transition

ffergie77

is LoadExternalScript part of alpine?

jjonas.halbstark

sorry there was a part missing: function

loadExternalScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.type = 'text/javascript';
  script.async = true;
  document.body.appendChild(script);
}

jjonas.halbstark

currently also trying to guide chatGPT because i have not worked with barba.js before

ffergie77

No worries, publishing now!

ffergie77

Ah okay, if you have any questions about it please let me know, I've used it a good bit now

ffergie77

That should be it published now

jjonas.halbstark

cant see any changes 😄

ffergie77

I've got it coming through I think?

Attachment

jjonas.halbstark

can you load the external script befor init alpine?

jjonas.halbstark

{
namespace: 'product',
beforeEnter() {
// Dynamically reload the liquify_custom.js script on each transition
loadExternalScript('//testparallel.myshopify.com/cdn/shop/t/38/assets/liquify_custom.js?v=99708878005376017301728214743');

// Avoid initializing Alpine.js twice by checking if it has already been initialized
if (!window.Alpine.initialized) {
document.dispatchEvent(new Event('alpine:init'));
Alpine.start();
window.Alpine.initialized = true; // Flag that Alpine has started
}

}
}

ffergie77

Published now!

ffergie77

Just remembered I've had to put the barba code before the end of body, will this make a difference?

ffergie77

Otherwise Barba doesn't find the wrapper in the dom

ffergie77

Rather than having it in the head

jjonas.halbstark

yes lets try

jjonas.halbstark

can you also just add Alpine.start();
without: document.dispatchEvent(new Event('alpine:init'));

ffergie77

No I mean I won't be able to put it in the head, or Barba won't work at all

ffergie77

I'll try removing dispatchEvent though

jjonas.halbstark

ah no i got it.. i dont think so.

jjonas.halbstark

for testing.. can you try adding this on the index page: <script src="//testparallel.myshopify.com/cdn/shop/t/38/assets/liquify_custom.js?v=99708878005376017301728214743" type="text/javascript"></script>

Sure, in the head?

yes

or doesn't matter

Is it just the theme.liquid?

ffergie77

The index file is a settings json

jjonas.halbstark

yes the theme.liquid

ffergie77

Ohhhh shiiiiiitttt

ffergie77

I think we have liftoff

ffergie77

Definitely on the right track, it's just adding a bit too much and the cart is a wee bit buggy I think?

jjonas.halbstark

one more try... can you remove Alpine.start(); also

jjonas.halbstark

i think the only problem is to load the script correctly. the easiest why would be to add it in the head of every page (project settings) so its already loaded when you get on a product page.. or somewhere else

ffergie77

Ahh I get you

ffergie77

It's publishing now, will be a couple seconds

ffergie77

Should I remove the loadexternalscript also?

jjonas.halbstark

yes.

ffergie77

Amazing, it's working!!

jjonas.halbstark

very nice 🙂 long way 😄