How to re-init swiper script

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 :)!

Are you using the actual react version?

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

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! :slight_smile:

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

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?

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

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

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:

1 Like

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.

1 Like

@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!

1 Like

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

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

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 :sunglasses:

1 Like

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

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;
3 Likes