Duplicate content when adding Wordpress + Timber

[Mario Sanchez Maselli]

Hey Man!

Me here again :D I've trying out to connect Wordpress and Biggie but is not completely working for me. First according to documentation, I should use this.

const id = slug(req, options)
const cn = id.replace('/', '-')
const page = create({ selector: 'div', id: `page-${cn}`, styles: `page page-${cn}` })

view.appendChild(page)

if(!cache[slug] || !options.cache) {

  ajax.get(`${config.BASE}${slug}`, {
    success: (object) => {
      const html = object.data.split(/(<main>|<\/main>)/ig)[2]
      page.innerHTML = html
      if(options.cache) cache[slug] = html
      done()
    }
  })

} else {

  setTimeout(() => {
    page.innerHTML = cache[slug]
    done()
  }, 1)
}

return page

But first if I use slug as an ajax call parameter I get an error, given that slug is import slug from './slug' So I changed it to id, and it seems to make the right ajax call. But then If I have const html = object.data.split(/(<main>|<\/main>)/ig)[2] It seems to not work properly, so I tried the same but with body. `const html = object.data.split(/(|</body>)/ig)[2]``

At this point everything seems to work, I get the content and I can navigate, no "errors", but I get duplicate content from the template and the view.appendChild(page)

Not sure if the documentation its updated according to the latest biggie

I will try to find a solution for this, but in case that you have one please let me know :D thanks!

[Mario Sanchez Maselli]

Ok, the <main>|<\/main> didn't have anything to do with my problem...

This time I will try to explain it better.

So basically, I'm getting duplicated content, one from the template view/home/home.twig and one from the page.js when I view.appendChild(page) (I think)

So not sure if I'm doing something wrong on the Wordpress side but I don't get how the "template" content is supposed to be removed.

On the WordPress side, I have a page named home with a "page template home". That makes reference to the twig file. Without biggie, this will show basically the content that I have on the home page. Now adding biggie will do the same but with an ajax call.

Takes the

and puts everything wrapped on a page div. But the previous content is not being removed, the one from Wordpress.

So now I get what I had before from the Wp template & the content from the WordPress wrapped in a page div.

<main>
    <div class="my-wordpress-content"></div>

   <div class="page page-home">
       <div class="my-wordpress-content"></div>
   </div>
</main>

I found a turnaround, but I feel that I'm cheating :D

So basically I'm wrapping the Wordpress content with a hidden class and if is an ajax call I remove it. So this becomes something like this.

<main>
    <div class="my-wordpress-content hidden"></div>

   <div class="page page-home">
       <div class="my-wordpress-content"></div>
   </div>
</main>

After this, I'm checking out on preloader.js if there is any class hidden and when preloader is being destroyed I also take out the div with hidden class. So this solves my problem, but still wondering if that's how you will do it or not.

Thanks a lot!!!

[Baptiste Briel]

Hello @mariosmaselli,

You're right, and almost there! One thing to do with WordPress is to check if this is the first route. Because the HTML of the first page (i.e. 'home') is already rendered by WordPress, you don't have to make an ajax call because you already have the content.

You can look in the whitelist project I did with WordPress. In the default.js section file:

init(req, done, options) {

  const opts = options || { sub: false }
  const view = this.view
  let page;
  
  if (req.previous === undefined) {
    page = this.view.querySelector('.page');
    classes.remove(page, 'is-hidden')
    this.dataAdded(done)
  } else {
    const ready = this.dataAdded.bind(this, done)
    page = utils.biggie.loadPage(req, view, ready, opts)
  }
  this.page = page;
}

Let me know if there's something you don't understand.

[Mario Sanchez Maselli]

@baptistebriel Thanks a lot!!!

It worked like a charm, I just used what you have on the latest biggie to define the page

page = biggie.page(req, view, opts, ready) instead ofpage = utils.biggie.loadPage(req, view, ready, opts)

[Baptiste Briel]

@mariosmaselli glad to know it's working! Indeed, with the latest updates the utils have been separated in different folders and files instead of having one single file.