Alpinejs issue in Custom Module

Develop, Build & Integrate CMS Development
1

Dealing with an issue and thought I would reach out here first just in case someone can help.

I have created a image slider as a custom module using Alpinejs for the functionality. Each image is group with a rich text field. The slider functions as it should, however, dumping the rich text field into my Alpinejs array is causing a syntax error. I am not sure how to resolve it.

Here is the code. As you can see, I am putting the rich text field contents into the caption object using the module hubl tag from the image group.

 <div class="w-full max-w-6xl mx-auto relative"
 x-data="{
 selected: 0,
 images: [
 {
 src: '{{ module.image1_group.image1.src }}',
 alt: '{{ module.image1_group.image1.alt }}',
 caption: '{{ module.image1_group.rich_text1 }}'
 },
 {
 src: '{{ module.image2_group.image2.src }}',
 alt: '{{ module.image2_group.image2.alt }}',
 caption: 'Sample text2 goes here'
 },
 {
 src: '{{ module.image3_group.image3.src }}',
 alt: '{{ module.image3_group.image3.alt }}',
 caption: 'Sample text3 goes here'
 },
 {
 src: '{{ module.image4_group.image4.src }}',
 alt: '{{ module.image4_group.image4.alt }}',
 caption: 'Sample text4 goes here'
 },
 {
 src: '{{ module.image5_group.image5.src }}',
 alt: '{{ module.image5_group.image5.alt }}',
 caption: 'Sample text5 goes here'
 },
 {
 src: '{{ module.image6_group.image6.src }}',
 alt: '{{ module.image6_group.image6.alt }}',
 caption: 'Sample text6 goes here'
 },
 ]
 }">

As is, it’s causing the Alpinejs syntax error. If I manually type the html in, it works fine. Hubspot must be including some syntax and/or characters that Alpine doesn’t like and that I can’t see.

Any ideas on how I might be able to resolve this?

Thanks,

Terry McMillan

2

What’s the output look like and what’s error you’re getting?
I’m guessing that the values being printed might include quote or something and that would break the object you’re creating.

3

Based on testing, if I just have basic paragraph text in the rich text module, it works without any errors. However, as soon as I add a heading or link, it causes the syntax error. I have attached a screeshot of my dev tools console showing the errors as well as the output in the array from the module. You can see in my highlighted area, I added the H2 heading. It appears that Alpinejs doesn’t like the line break that Hubspot is adding after the H2. If I manually type the same H2 & p code in the array with no line break, it works correctly. Not sure how to resolve this, if that’s possible. Obviously, the goal is for the end-user to be able to use the rich text module as intended. If I can’t get this resolved soon, I will explore the option of using some sort of JQuery slider with the same type of functionality.

console-error.png
console-error.png1357×1106 265 KB

Thanks,

Terry

4

Ah yeah to avoid this you could try using regex_replace to replace all of the new
line characters with an empty string.
{{ value|regex_replace(“/(\r\n)+|\r+|\n+/”, “”) }}
FYI I grabbed that regex from SO and haven’t tested it but it should match all types of new line and returns.

5

Update - After some additional testing, I was not able to resolve the above issue. As a result, came up with another option that still uses Alpinejs and has the same functionality. The new option eliminates the need for an array.

Kevin - I appreciate the suggestions you taking the time answer my post.

Thanks,

Terry