How to re-init swiper script

[matteo.lcd]

Hi, i want to pass a gutenberg block based on swiper.js. I pass the content in component and it’s work fine if block is in the first page loading, but if url change and after came back, the swiper script does not reinit swiper. Any suggestion?
Thanks :)!

[codemonkeynorth]

Are you using the actual react version?

Swiper React Components

Could you maybe use afterCSR/observe to check the link had changed

Add external javascript, like Google Analytics or Ad Servers

Oh, I see. You need to observe to either actions.router.set or state.router.link. We are going to add middleware to the state manager (@frontity/connect) to be able to do both of those things. It’s up in the roadmap, coming in the next 2-3 months Until then, you can use observe, like this: import { observe } from "frontity"; afterCSR: ({ state }) => { observe(() => { console.log(state.router.link); }) } That function should run each time state.router.link changes.

[matteo.lcd]

It’s my mistake, infact using the swiper react component working fine.
But is possible to get only the image url from “post.content.rendered” and not all the block’s Html? I want to get “post.content → image url” of block named “swiper block” and create a gallery with swiper, there’s any docs about this?
Thanks!

[codemonkeynorth]

Can you not use eg an ACF array of images ?

post.content.rendered I believe is just a string of html you’d have to extract yourself

[matteo.lcd]

Yes, i use ACF but as ACF “blocks”. I want to create a gutenberg wordpress backend, but for example if i use swiper js inside my acf slider block, frontity does not init my swiper. For this reason i want to extract data from “post.content.rendered”, and create a new swiper with react swiper js component. I think it’s not possible, probably the way is use acf as custom field and not like as block. Correct?

[codemonkeynorth]

As this is a very specific use case, in order to get an answer from anyone you are best either providing a repo or at least a codesandbox

Importing Sandboxes - CodeSandbox Documentation

This will let people examine the front end and API at least.

I have ACF pro if you want to share a demo database but ideally you’d want an example with a minimal set of extras installed so it’s easy to set up

Specifically I’ve never used ACF Slider or Blocks yet so can’t give you a direct answer currently

[codemonkeynorth]

Also if you can’t get to the raw acf data from the block you could try a custom processor for Html2React.

This will let you walk through the Dom nodes finding eg node.component === ‘img’

You can then get the node.src attribute (or walk through the children if your top level node has className eg wp-acf-slider)

See here https://community.frontity.org/t/integrating-frontity-with-gutenberg-using-processors/240

However maybe it’s preferable to define a separate ACF array of images and build the slider yourself

To add it in the correct location on the page as part of your page blocks, you could maybe create a dummy slot block and use the slot/fill pattern… see:

Slot and Fill

Description There’s a powerful pattern in React called Slot and Fill which allows the insertion of any React component in different places of the app. It is perfect when the application is extensible, like Frontity. In the case of Frontity, this will allow the theme developer to insert <Slot> components among the theme, and other package developers to add <Fill> components hooked to a particular Slot. User Stories As a Frontity theme consumer I want to add additional components to the theme …

[mburridge]

Hi @matteo.lcd

Welcome to the Frontity community.

Just to reinforce what @codemonkeynorth has said, I think a processor is what you need. This iterates through the DOM tree and a function processes any node that matches a condition that you specify.

See this repo for an example, and also this video in the Frontity Talks series. See also the html2react docs, especially the section on processors.

You might also find this blog post useful as it specifically addresses the processing of Gutenberg blocks.

[matteo.lcd]

@codemonkeynorth & @mburridge thank you for the precious advice, i try to resolve this issue with a processor. If I find the solution I will share it with the frontity community :).
Ps. ACF slider does not exist, it’s a custom block example, i only use ACF pro with block and create ACF block named slider ;).
Very helpful!

[codemonkeynorth]

@matteo.lcd oh I thought maybe you meant this since it uses slider js

ACF Slider

[matteo.lcd]

Ah Wow! I didn’t know about this, great!
Thanks!

[matteo.lcd]

I try the repo with quote processor and the js get an error, TypeError: Cannot read property '0' of undefined. Probably that’s a core block update in the latest wordpress version. To solve this need to change the const author = node.children[1].children[0].children[0].content in “mars-theme/src/processors/quote” with const author = node.children[1].children[0].content and everithyng working fine! That’s the way

[matteo.lcd]

@mburridge & @codemonkeynorth as promised i share the gallery processor code

import React from 'react'
import { Swiper, SwiperSlide } from "swiper/react";

const Gallery = ({ slides }) => {
  return (
      <>
      <Swiper slidesPerView={3} spaceBetween={30} className="mySwiper">
          {slides.map(function(item, i){
            const imgUrl = item.children[0].props.src;
            return (
              <SwiperSlide key={i}>
                <img src={imgUrl}/>
              </SwiperSlide>
            )
            })
          }
      </Swiper>
      </>
  )
}

const gallery = {
  name: 'gallery',
  priority: 20,
  test: ({ props }) => props.className === "swiper-wrapper",
  processor: ({ node }) => {
      const slides = node.children;
  
      return {
        component: Gallery,
        props: { slides },
      }

    },
}

export default gallery;