Learning Liquid Specific to Treepl CMS

Advanced Development
1

Hello Treepl folks! I hope everyone if having a great week so far.

I’m continuing to work on Adobe to Treepl migrations. I’m trying to keep this as affordable for my clients as possible by taking on any non-migration tool issues myself, but it’s not going well. Treepl’s support team has offered extremely reasonable pricing to help finish up the 20% of issues that the migration tool will not complete such as menu styling, site search results, form styling, etc. However, not only would I like to take this on myself to help save my clients some costs (especially those who launched right before EOL), but I also need to learn this platform as it will be my platform of choice for future new projects.

My question is: does anyone have a good resource for learning Liquid, specifically to how it applies to Treepl CMS? For example, with Adobe BC I was used to just putting the tag {module_searchresults} to display search results on a page. From what I can tell, it’s not quite that easy with Treepl CMS. Maybe it is if you know Liquid, so I’m hoping someone has a resource to help me get more knowledgeable with Liquid coding? I even looked over this article: https://docs.treepl.co/documentation_group/component-types/site_search I tried a few of the examples to no avail. I’m sure it’s something I’m doing wrong, but I’d love to get some more education on Liquid so I can maximize the use of the Treepl CMS platform. Any help and/or recommendations is greatly appreciated. I can assure you that I will share anything I can as I start to learn more about Liquid logic and the Treepl CMS platform. I’d love to be a contributor as soon as I have something in my tool kit to contribute.

Thank you all in advance - have a great week!

2

Quick update here (I’m not sure if this is where this belongs - thoughts? Should I go about asking to get this added to the docs, and if so, how?):

I asked support to help with getting search results to display on a search results page and this is how (tested and works!):

Add this code to the search results page:

{% component source: “Page”, layout: “Site Search List”, displayPagination: “true”, emptyMessage: “No items found by keyword: {{request.request_url.params.SearchKeyword}}” , type: “site_search”, limit:10, object:“collection” %}

<script>
$(document).ready(function()
    {
        initSearchKeyword();
    });
    
    /***************Search*******************/
    function initSearchKeyword() {
    
        var params = window
            .location
            .search
            .replace('?', '')
            .split('&')
            .reduce(
                function (p, e) {
                    var a = e.split('=');
                    p[decodeURIComponent(a[0])] = decodeURIComponent(a[1]);
                    return p;
                },
                {}
            );
    
        var string = params['searchkeyword'];
    
        var highlightWord = function(text){
            var searchHtmlCollection = document.getElementsByClassName('searchElem');
            var arr = searchHtmlCollection.length;
    
            for (i = 0; i < arr; i++) {
                var html = searchHtmlCollection[i].innerHTML;
    
                var word  = "( " + text + " )";
                var match = new RegExp(word, "gi");
    
                html = html.replace(match, "<span style='font-weight: bold;'>$1</span>");
    
                searchHtmlCollection[i].innerHTML = html;
            }
        };
    
        highlightWord(string);
    
    }
    /***************End Search*******************/
    </script>

Create a new Page Layout (https://prnt.sc/ov80pl) called Site Search List (or call it whatever you want, just be sure the name of the new Layout matches the layout identified in the liquid tag). And then once you have the layout created (https://prnt.sc/ov80tl), code/style the list layout however you like.

I hope this proves helpful for someone out there!

Thank you,

  • Ryan
1 Like
3

Hi @StudioRTP. Great to see you jumping into this and eager to learn :slight_smile:
Firstly, once you get your head around it, Liquid is actually one of the easier “languages” to learn and really only has a few core concepts to understand. So stick with it and it’ll ‘click’ for you very soon.
Much of Treepl, although using Liquid directly, isn’t too dissimilar from using BC with tags.

A good resource for knowing what’s available in treepl in terms of Liquid is here:

And in the Treepl Docs, under the 2 categories of “Liquid Components” and “Liquid Objects & Usage” hopefully outline all the data available and how to access it with Liquid.

Regarding your search issue; it seems the only missing link you had was that you didn’t have a ‘Site Search List’ layout (which is usually there by default) so I think that was throwing you off.
The JS code provided looks like it just highlights in bold the search term used. It’s not required for the search functionality.

More Liquid training resources will hopefully come available soon. In the meantime don’t hesitate to post here in the forum for help :slight_smile:

1 Like
4

Oh, and the Docs Demo Site might help too:
https://docs.treepl.co/demo-cs/

2 Likes
5

This is all great info Adam - thank you so much. I will tear into the resources you outlined here and try to get on top of things ASAP.

Thanks so much for this and all your contributions to the Treepl CMS Community!

  • Ryan
1 Like
6

One more resource which might help, particularly when converting BC methods to Treepl:
https://docs.treepl.co/documentation_group/bc-migration-guides/bc-liquid-comparisons

1 Like