Not an issue but a desperate plea for help!

[billiemead]

Greetings,

I used your repos for both the tabs and collapse JavaScript as a starting point, to try and create my own Breeze compatibility modules for the Magezon Slider/Carousel elements (that uses Owl Carousel) and after two weeks of starting and stopping, I figured I would at least ask to see if you might be able to spot why these will not work:

https://github.com/billiemead/module-page-builder-slider

https://github.com/billiemead/module-builder-carousel

Even with these loaded, I am still getting the same JS errors and in Network tab I see the new slider.js & carousel.js with the new components are not even loading.

Uncaught TypeError: $(...).carousel is not a function
    at mishi-home-us:1410:36
    at window.require (define.js:105:30)
    at mishi-home-us:298:46
    at Array.map (<anonymous>)
    at mishi-home-us:298:32

I totally understand if you are too busy as I went back and forth a few times about even asking and figured what the hell! I didn't see a way to throw up a bounty your way, but all I need is a Venmo account ;)

Cheers~ Billie

[vovayatsyuk]

Hi,

Could you please show the code that contains the $(...).carousel call? Depending on how this code is written, we might need to add more information to the breeze_default.xml

[billiemead]

Of course!

I think its pretty standard with all of the Magezon Page Builder elements to make the call in the respective .phtml file as a script tag. So for $(...).carousel:

app/code/Magezon/PageBuilder/view/frontend/templates/element/image_carousel.phtml

around line 102

        <script>
        require(['jquery', 'Magezon_Builder/js/carousel'], function($) {
        $('#<?= $id ?>').carousel(<?= $coreHelper->serialize($carouselOptions) ?>);
        });
    </script>

And then for $(...).sliders:

app/code/Magezon/PageBuilder/view/frontend/templates/element/slider.phtml

around line 172

       <script>
        require(['jquery', 'Magezon_PageBuilder/js/slider'], function($) {
            $('#<?= $id ?>').sliders(<?= $coreHelper->serialize($carouselOptions) ?>);
        })
      </script>

Both .phtml files attached and, thank you @vovayatsyuk for taking a look!

image_carousel.phtml.zip slider.phtml.zip

[vovayatsyuk]

For me, everything looks correct. Can you please provide a URL to your site?

[billiemead]

Yes of course Vova...

We use Breeze Theme for our Mishimoto store and Hyva Theme for our Borne storefront, so you can see both working and not working examples. I just created a simple page with:

• Image slider
• Product Slider
• Testimonials (uses Owl carousel)

Here is the carousel/slider test page (on Staging server) to Mishimoto store running Breeze theme: https://mcstaging.mishimoto.com/sliders-carousels-test

And here is the same carousel/slider test page (on Staging server) to Borne store running Hyva theme: https://mcstaging.borne.com/sliders-carousels-test

I installed both of your two modules module-breeze-magezon-builder and module-breeze-magezon-pagebuilder and used them for reference to create the two new compatibility modules. Using the console, I was able to find both loaded nicely:

But I couldn't seem to find the two I created; slider.js and carousel.js.. but maybe I just missed them!

Once I get through this I was planning on creating compat modules for all of the Magezon PB elements... I'm not sure if you still get any requests, but will certainly make them available :)

My thoughts and prayers are with you Vova and I hope your country returns to normal soon, as we stand with Ukraine!

Billie

[vovayatsyuk]

Oh, you forgot to place breeze_default.xml in the layout subdirectory. That's the main issue.

Thank you for your kind words and support!

[billiemead]

Good morning/day Vova,

I hate to bother you but I believe I am so close. After fixing the correct folder location for breeze_default, both slider.js and carousel.js are indeed loading, but I am getting a few Console errors that look related to the dependency not loading owl.carousel.min.js

carousel.js:122 Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
    at carousel.js:122:11
    at carousel.js:124:7
    at carousel.js:244:3
(anonymous) @ carousel.js:122
(anonymous) @ carousel.js:124
(anonymous) @ carousel.js:244

slider.js:124 Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
    at slider.js:124:11
    at slider.js:126:7
    at window.require (define.js:105:30)
    at slider.js:1:1
(anonymous) @ slider.js:124
(anonymous) @ slider.js:126
window.require @ define.js:105
(anonymous) @ slider.js:1

No matter what I tried, I could not get Breeze to load owl.carousel.min.js. In the file app/code/BreezeMagezon/BuilderCarousel/view/frontend/layout/breeze_default.xml I tried:

 <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breeze.js">
            <arguments>
                <argument name="bundles" xsi:type="array">
                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <item name="Magezon_Builder/js/carousel" xsi:type="string">
                                BreezeMagezon_BuilderCarousel/js/carousel
                            </item>
                        </item>
                        <item name="owl-carousel" xsi:type="array">
                            <item name="path" xsi:type="string">BreezeMagezon_BuilderCarousel/js/owl-carousel</item>
                            <item name="autload" xsi:type="boolean">true</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

But it did not load.

So on the last try, I did get it to load using default.xml but as it was not loaded as Breeze requires, I now get this error as well:

owl-carousel.js:1718 Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
    at owl-carousel.js:1718:4
    at owl-carousel.js:1755:3
(anonymous) @ owl-carousel.js:1718
(anonymous) @ owl-carousel.js:1755Understand this error 

Do you see anything I can try? Im getting desperate as this was due last week and most on our team haven't any more suggestions. Cheers and stay safe!

[vovayatsyuk]

Sorry, I don't think using the owl carousel in Breeze is possible. It depends on jQuery and it will not work without it. Breeze comes without jQuery and it's not currently possible to add jQuery.

The proper way to integrate these sliders is to use our pagebuilderSlider instead.