Theme Template Container with jQuery plugin

37 views
Skip to first unread message

Giacomo Petillo

unread,
Nov 21, 2018, 5:50:52 AM11/21/18
to dotCMS User Group
Hi all,
i have a Container with a "carousel" (owl.carousel.js) but i have no idea how design my theme/template/container vtl code. In particular how include and execute jQuery plugin in a template without unnecessary include (for example js lib of other plugins).

My project is

  • application/
    • themes/
      • myTheme
        • template.vtl
        • header.vtl
        • footer.vtl
        • html_head.vtl
        • assets/
          • js/
            • scripts.js ($document.ready(function ..... )
            • owl.carousel.js
            • ... other js files
          • css/ (some stuff)
          • img/ (some imgs)
    • vtl/
      • containers
        • carousel
          • pre-loop.vtl
          • post-loop.vtl
          • body.vtl
I created a Template "Home Template" with 1 Column and a "Carousel" Container within it, applied this template to my "mySite.com/index" page.

template.vtl like this code

<!doctype html>
<html>
<head>
#dotParse("${dotTheme.path}html_head.vtl")
</head>

<body>
#dotParse("${dotTheme.path}header.vtl")


$render.eval($column.draw())   <!-- BODY RENDER SECTION -->



#dotParse("${dotTheme.path}footer.vtl")



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>

<script> ... </script>

<script src="${dotTheme.path}assets/js/bootstrap.bundle.min.js"></script>
<script src="${dotTheme.path}assets/js/owl.carousel.min.js"></script>

<script src="${dotTheme.path}assets/js/scripts.js"></script>

</body>
</html>



"scripts.js" contain carousel init code but it isn't a code code solution, i prefer split in two or more files, to include only if necessary ("Carousel Container" is added to the page).


You have any solutions/idea? This is one of my worst doubt about theme/template/container design, how to divide and place each component in the right place. Async js include?

Thanks,
Giacomo

Giacomo Petillo

unread,
Dec 2, 2018, 3:43:43 PM12/2/18
to dotCMS User Group
 


nobody worked with dynamic templates, with jQuery plugin?

Falzone, Chris

unread,
Dec 3, 2018, 9:31:10 AM12/3/18
to dot...@googlegroups.com
Not sure I 100% follow.  However, I think what you want to do is set a variable at the top of your template like:
#set($hasCarousel = false)

Then in your container where you add the carousel:
#set($hasCarousel = true)

Then back in your template code where you output the script tag, check if it is set and include the script for it.
#if($hasCarousel)

    <script src="${dotTheme.path}assets/js/owl.carousel.min.js"></script>
#end

Does that answer your question?

--
http://dotcms.com - Open Source Java Content Management
---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com.
To post to this group, send email to dot...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/f1bd1814-5311-4787-a528-f718bccae931%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

Christopher Falzone

Interactive Developer


A Q U E N T

Digital, Creative, and Marketing Talent


aquent.com

cfal...@aquent.com

Reply all
Reply to author
Forward
0 new messages