fluidfusionneoscmsafx

Neos CMS script in afx doesn't work for some reason


i'm kinda new in Neos CMS. I'm trying to animate some HTML containers in my file.fusion, exactly in afx. JavaScript code is correct, but in file.fusion doesn't work. It looks like afx is ignoring my .

I will share with you my code, thanks for any help:

    renderer = afx`
    <div id="serviceFour" class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-left mt-5">
                    <h6 class="subtitle">About</h6>
                    <h2 class="title">Trusted Services</h2>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nisi ante, luctus eu elit sit amet, venenatis sagittis urna. Morbi eget laoreet dui. Nulla sed nulla congue, feugiat tor</div>
                </div>

                <div class="row mt-4">
                    <div class="col">

                        <div class="box-number">
                            <div class="box">
                                <div class="num">9</div>
                            </div>
                            <div class="box-desc">A</div>
                        </div>

                        <div class="box-number">
                            <div class="box pt-3">
                                <div class="num">1000</div>
                            </div>
                            <div class="box-desc">B</div>
                        </div>


                    </div>

                    <div class="col">

                        <div class="box-number">
                            <div class="box">
                                <div class="num">200</div>
                            </div>
                            <div class="box-desc">D</div>
                        </div>

                        <div class="box-number pt-3">
                            <div class="box">
                                <div class="num">110</div>
                            </div>
                            <div class="box-desc">C</div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js'></script>
    <script src='/_Resources/Static/Packages/Example/ExampleTwo/ExampleThree/function.js'></script>
    
`

}


Solution

  • I assume your function.js file is not loaded correctly. Have you checked your Browser Network tab if your function.js is loaded correctly?

    Also you should not use this hardcoded path for Neos static files. Use something like:

    <script src={StaticResource.uri('My.Package', 'Public/Scripts/Main.js')}></script>
    

    Also make sure your resources are published:

    ./flow resource:publish