[Support request] Integrating Owl carousel into GP Theme

Home Forums Support [Support request] Integrating Owl carousel into GP Theme

Home Forums Support Integrating Owl carousel into GP Theme

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #2262723
    Jan

    Hi David,

    I followed this guide to integrate an owl carousel into the GP theme. This is what I have done:

    1. Downloaded the OwnCarousel2.ZIP from Github
    2. Created subfolder (generatepress_child/owlcarousel) and stored relevant css- and js-files from #3 and #4 therein
    3. Created a hook element and added these links to the wp_head:

    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

    4. Create another hook element and added this script to the wp_footer:

    <script src="jquery.min.js"></script>
    <script src="owlcarousel/owl.carousel.min.js"></script>

    5. Added the custom HTML to the relevant page (see URL link below)

    6. Added this function call to a custom HTML block with <script>…</script> on the same page

    $(document).ready(function(){
      $(".owl-carousel").owlCarousel();
    });

    What am I missing to make the basic-carousel work?

    Thanks,
    Jan

    PS: I found this threat from Mathieu but it was not much of help unfortunately.

    #2262758
    Ying
    Staff
    Customer Support

    Hi Jan,

    It looks like the CSS and JS are not loading, can you try updating the URLs in the hooks (step3 & step4) to the full URLs?

    #2262933
    Jan

    Hi Ying,

    thanks for getting back.

    I added the full path of the CSS and JS files to both Element hooks (see below) with no success unfortunately.

    Any ideas on what else may be blocking the files from being loaded?

    Best,
    Jan

    #2262946
    Fernando
    Customer Support

    Hi Jan,

    Can you try a format like?:

    https://www.yoursite.com/wp-content/themes/generatepress_child/owlcarousel/owl.carousel.min.js

    Kindly replace https://www.yoursite.com with your site’s URL.

    Kindly let us know how it goes.

    #2262955
    Jan

    Hi Fernando,

    we are making baby steps forward 😉 This had some effect indeed.

    The carousel now disappeared altogether ;-/

    Any thoughts?

    Best,
    Jan

    #2262971
    Fernando
    Customer Support

    jquery is not being loaded.

    Can you try loading it this way?:

    add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
    function tu_load_jquery() {
        wp_enqueue_script( 'jquery' );
    }

    Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

    It also says that owl.carousel.min.js is missing. Can you check if the file is in your directory?

    Kindly let us know how it goes.

    #2262986
    Jan

    Hi Fernando,

    thanks for getting back.

    I added the action to the function.php of the child theme.

    Does that make the Elements hook in the footer redundant?

    <script src="jquery.min.js"></script>
    <script src="http://site.de/wp-content/themes/generatepress_child/owlcarousel/owl.carousel.min.js"></script>
    
    <script> 
    	
    $(document).ready(function(){
      $(".owl-carousel").owlCarousel();
    });
    	
    </script> 

    I also checked the subfolder of the child theme for the js-file. It was indeed missing ;-( Added it back in.

    For your convenience I also added the screenshot of the HTML blocks for your review.

    What is your view?

    Jan

    #2262995
    Fernando
    Customer Support

    Yes, you can exclude this from your code if we’re enqueueing jquery:
    <script src="jquery.min.js"></script>

    Can you try turning this line

    $(document).ready(function()

    into:

    jQuery(document).ready(function($)

    Kindly let us know how it goes.

    #2263045
    Jan

    This did the trick ;-).

    Many thanks Fernando!

    PS: I’ll run some more tests and then give you a final thumbs up.

    #2265213
    Fernando
    Customer Support

    You’re welcome Jan! Glad that did the trick!

    #2266539
    Jan

    Hi Fernando,

    styling is next. You suggested me to modify the initializer function from…

    $(document).ready(function() to jQuery(document).ready(function($).

    I assume this is the reason why I cannot apply the suggested CSS.

    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })

    FYI: I added the CSS to the Customizer.

    How would you suggest me to modify this?

    Thanks,
    Jan

    #2266557
    Fernando
    Customer Support

    That’s not CSS code. It’s jQuery.

    Try adding it through a Hook Element. Adding that through the customizer wouldn’t work since it’s not CSS.

    The format might need to be modified to something like this: https://stackoverflow.com/questions/70770112/owl-carousel-auto-play-for-screen#:~:text=want%20diferent%20settings%20for

    This is out of our scope and expertise however. Kindly refer to this with regards to what our support includes: https://generatepress.com/what-support-includes/

    Hope this clarifies!

    #2266591
    Jan

    …it does, Fernando. I should have noticed this myself ;-/

    I’ll consult someone else regarding jQuery. No Problem.

    Final question: I’d like to rebuild this basic html structure…

    <div class="owl-carousel owl-theme">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
    </div>

    …using Generate Blocks (Containers and Blocks). Know how to assign a class to an Headline block. Can I apply the same logic to Container blocks also (see screenshot)?

    I guess what I am struggling with is that every Container comes with a predefined class <div class="gb-container gb-container-0809265e owl-carousel owl-theme" which is not being replaced with whatever I put into the Additional CSS classes field.

    Any advise is much appreciated.

    Regards,
    Jan

    #2266607
    Fernando
    Customer Support

    Not sure how the JS selects specific elements in that HTML structure.

    Since the Container Block automatically adds an inner gb-inside-container div, I’m not sure if having a slightly different structure would make the JS not work.

    Example of a possible structure: https://share.getcloudapp.com/9ZuoQN7b

    You could probably try. You may add classes through the Advanced section of a Block’s Block settings as such: https://share.getcloudapp.com/Jruox7rd

    Otherwise, if it doesn’t work, you’ll need to modify the JS of the Owl carousel, or use a HTML Block which you’re currently using.

    You could probably also try wrapping the Headline Blocks through PHP.

    For instance, if you. add class my-headline-block to the Headline Blocks you wish to insert within a div with a class of item, and then add this PHP:

    function db_rerender_headline( $block_content, $block ) {
    	if(!is_admin()){
        if ( ! empty( $block['attrs']['className'] ) && 'my-headline-block' === $block['attrs']['className']  ) {
    		$new_content = '<div class="item">' . $block_content . '</div>';
    		$block_content = $new_content;
        } 
    	}
        return $block_content;
    }
     
    add_filter( 'render_block', 'db_rerender_headline', 10, 2 ); 

    all Headline Blocks with that class should be outputted with a div that has a class of item.

    Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

    You can add the parent div owl-carousel owl-theme through two separate HTML blocks.

    That should work.

    Hope this clarifies!

    #2266635
    Jan

    Cool. I’ll give this a try and let you know accordingly Fernando

    Many thanks for sharing these options.

    Best,
    Jan

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.