Coder Social home page Coder Social logo

Comments (13)

luruke avatar luruke commented on May 2, 2024

Hello @na86!
Thank you for trying Barba.js

I've used barba with WordPress in few project and there are no problems with it.

From the error I can assume you are trying to load a page that doesn't contain .barba-container. (Or another class if you changed it)

Are you sure yours template are using the correct Dom structure?

Are you logged as admin in WordPress and clicking (or hovering if the prefetch is active) on the admin bar?

Usually I disable barba.js when the user is logged as administrator in order to avoid this problems.

from barba.

luruke avatar luruke commented on May 2, 2024

I changed the title to be more appropriate

from barba.

na86 avatar na86 commented on May 2, 2024

Thank you Luigi,
it works!!!

(i'm used to develop wordpress site in the ordinary way, this is a kind of adventure for me.)

p.s.: sorry for the title, thankyou for replacing it.

from barba.

paulzz3000 avatar paulzz3000 commented on May 2, 2024

Hi Nan, do you have any tips for adding this to Wordpress?
Thanks

from barba.

luruke avatar luruke commented on May 2, 2024

Hi @paulzz3000 , do you have any specific problem?

Usually for the DOM structure, in the header file I add something like:

<head>...</head>
<body>
    <main id="barba-wrapper">
        <div data-namespace="<?php echo get_current_template() ?>" <?php body_class('barba-container') ?>

where get_template_file() is something like

function get_current_template() {
  global $template;
  return basename($template, '.php');
}

and then in the footer I just close my barba-container and barba-wrapper.

from barba.

na86 avatar na86 commented on May 2, 2024

Thanks @luruke for your answer!

from barba.

dblodorn avatar dblodorn commented on May 2, 2024

This is awesome @luruke - and works great with Wordpress (almost to easy). I run into an issue though with using the wordpress menu outside of the barba-wrapper, the active state on links does not get updated accordingly. I'm using a css navwalker function in functions.php to update the active state on each link after it gets clicked, but this function only gets called once if it is outside of the barba wrapper, any ideas regarding this, is it safe to call a php function with javascript? Or would that even be the right direction to go in? Thanks!

from barba.

luruke avatar luruke commented on May 2, 2024

Hi @dblodorn .

You can:

  • Get all the HTML of the new page, and detect which is the active link, then via js update accordingly: #49
  • Add a data parameter on the .barba-container with the current menu id, then via js update accordingly reading the data attribute newPageReady event

from barba.

KushnerMikalai avatar KushnerMikalai commented on May 2, 2024

If I want not all pages to be without reboot, how can I do this? Now, when I turn to a page without a container, does it give me this error (Uncaught (in promise) Error: Barba.js: no container found.....) ???

from barba.

luruke avatar luruke commented on May 2, 2024

@KushnerMikalai ,
ideally all the pages of your website should use barba-container.

If you can't, you should add a check with initStateChange and force the page reload to the newer URL that do not have barba-container

from barba.

ganesanshivam avatar ganesanshivam commented on May 2, 2024

Please provide a code example...

from barba.

romeltech avatar romeltech commented on May 2, 2024

Hi @luruke I like this plugin! too bad for me I just discovered it. I'd like to ask, have you tried this to a wodpress page builder? (which they tend to throw classes on body tag to work). If you do, can you share your experience....

from barba.

avatar commented on May 2, 2024

I know this is an old thread; just wanted to let you know (for the sake of others maybe) I ran into the same problem and fixed it by using the enqueue script for the footer instead.
The issue is has a simple cause: BarbaJS doesn't know the container exists because at that point, it doesn't (before DOM load).

tl;dr; set the last parameter in your enqueue_script function (where barba functions are loaded) to true.

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

from barba.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.