Weglot doesn't translate the collapsible content in Replo's accordion Block (added as a section in Shopify), Just the collapsible header. Is this to be manually updated in Weglot?

This post is now synced! Check it out here: Weglot Translation Issue with Replo's Accordion Block in Shopify ⤵️ Any future comments will be automatically posted to the thread

Oh that's a bummer @Adebayo A. (Replo Expert). Can you send us a link to the page? Live page or preview link? We'll take a closer look! I suspect Weglot runs JS on existing HTML elements on the page and potentially the hidden ones aren't getting translated or the contents of the collapsible is getting injected when the collapsible is opened and so the JS translator from Weglot isn't running on that content.

Thanks @Steve (Replo Team) Sent to your DM. I guess that's the case here

@Adebayo A. (Replo Expert) I assume this never got figured out? Do you mind if I share the link you shared with me for the public? Also, can you explain a bit more about which countries/languages you're worried about? I can travel to those countries (via VPN) to take a closer look.

@Steve (Replo Team) Figured I’d have to manually translate the FAQ content in Weglot (easiest option). Yes please. Spanish, Arabic, German, French etc. Content isn’t translated on VPN as well

hi @Adebayo A. (Replo Expert)! did you find a solution here? i think steve's initial hunch is right — weglot doesnt run on elements that are hidden upon initial page load and this seems to be a problem with other page builders (ie framer). i played around with some workarounds here and i think there are two ways around this: 1. use the theme's faq section (like you mentioned): i know this isnt ideal, but this method is probably the most manageable and easy to maintain in the long term. however, if you're really keen on making something custom with replo, you can try this: 2. building a custom accordion using containers, states, and interactions: basically, instead of using our accordion component, the question and answer are stored in a container. in its "collapsed" state, you set a fixed height on the container to hide the answer. when its "expanded", set the height to hug contents. and then use interactions to trigger these states. again, not very easy to manage but you'll be able to get a custom design in replo and weglot will run on all the content. a. some limitations with this method: 1) other collapsibles won't collapse when you open another one and 2) the collapsible will open up and downward instead of just downward, like a traditional accordion. i've set up a test one in your workspace here so you can take a look at how its set up. or you can take a look at the live page to see how weglot works there is another change we might be able to do on our side to the base component that would render it server-side, but will wait on our product team to review this first. i submitted a feature request here to track the progress of it: https://feedback.replo.app/p/update-accordioncollapsible-component-to-render-server-side

Hi @Carissa Cui Thank you for the feedback. Yeah that sounds right. At the moment, we are exploring using the theme's FAQ section and configuring the design with code since it's compatible with Weglot. I was also thinking using html to build the accordion might work but I haven't explored the option yet. Thank you for the help, the container option looks good too