CMS Development

tmcmillan99
投稿者 | Elite Partner
投稿者 | Elite Partner

Alpinejs issue in Custom Module

解決

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 いいね!
1件の承認済みベストアンサー
tmcmillan99
解決策
投稿者 | Elite Partner
投稿者 | Elite Partner

Alpinejs issue in Custom Module

解決

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

元の投稿で解決策を見る

4件の返信
tmcmillan99
解決策
投稿者 | Elite Partner
投稿者 | Elite Partner

Alpinejs issue in Custom Module

解決

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

tmcmillan99
投稿者 | Elite Partner
投稿者 | Elite Partner

Alpinejs issue in Custom Module

解決

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 いいね!
Kevin-C
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Alpinejs issue in Custom Module

解決
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.
Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Kevin-C
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Alpinejs issue in Custom Module

解決
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.
Kevin Cornett - Sr. Solutions Architect @ BridgeRev