Alpinejs issue in Custom Module

SOLVE
tmcmillan99
Participant | Platinum Partner

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

0 Upvotes
1 Accepted solution

Accepted Solutions
tmcmillan99
Solution
Participant | Platinum Partner

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

View solution in original post

4 Replies 4
Kevin-C
Recognized Expert | Partner
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.
tmcmillan99
Participant | Platinum Partner

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

Thanks,

Terry

 

0 Upvotes
Kevin-C
Recognized Expert | Partner
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.
tmcmillan99
Solution
Participant | Platinum Partner

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

View solution in original post