New Liquid Engine - changes to referencing Parameters in Custom Layouts

Advanced Development
1

I was testing the New Liquid Engine, currently in Beta, and found that Pages using Custom Modules with Custom Parameters no longer rendered correctly.

When I checked I found that the way parameters were referenced in the layout changed, enforcing &/or tightening scope.

In the current Liquid Engine:

 },
  "params": {
    "ajaxcheckplace": "Cottage~Rock",
    "ajaxchecklat": "-34.004535",
    "ajaxchecklong": "150.129394"
  },

In the New Liquid Engine:

   ],
  "Params": {
    "ajaxCheckPlace": "Cottage~Rock",
    "ajaxCheckLat": "-34.004535",
    "ajaxCheckLong": "150.129394"
  },

params could be referenced this way with the current Liquid Engine:

{% assign checkPlace = params.ajaxCheckPlace | replace: '~' , ' ' %}
{% assign checkLat = params.ajaxCheckLat %}
{% assign checkLong = params.ajaxCheckLong %}

Reference Params this way with the New Liquid Engine:

{% assign checkPlace = this.Params.ajaxCheckPlace | replace: '~' , ' ' %}
{% assign checkLat = this.Params.ajaxCheckLat %}
{% assign checkLong = this.Params.ajaxCheckLong %}

Note: The code that works with the New Liquid Engine also works with the current Liquid Engine.

2 Likes
2

That is a good heads up. I used a bunch of custom params on my current project. I’ll make that change to future proof.

3

@peter.medbury I tried to add this.Params.customParam to make it compatible with the new liquid engine and I noticed that when using custom parameters within object type “Collection” adding “this” made the custom parameter stop working. Is it an exception when using it in this situation?

4

@Alex_B_Centrifuge, in my test the this is required when using the collection method, but either way will work when using item.

Examples:

Using the below as the list layout, testing both ways:

( {{this.params.myparam}} - {{params.myparam}} )

Component as a collection:

{% component source: "Test", layout: "List", myParam: "foo", object: "collection", type: "module" %}

renders:
( foo - )

Component as an item:

{% component source: "Test", layout: "List", myParam: "foo", object: "item", type: "module" %}

renders:
( foo - foo )

5

@Adam.Wilson Did you run those tests with the new liquid engine enabled?

6

@Alex_B_Centrifuge yes, I believe so. Are you seeing something different?

7

Sorry for the slow reply Alex.

The instance I encountered was passing custom parameters to a collection like this:

{% component source: "places", layout: "lazyListNearby", limit: "1000", object: "collection", collectionVariable: "nearbyPlacesList", type: "module", ajaxCheckPlace: "{{checkPlace}}", ajaxCheckLat: "{{checkLat}}", ajaxCheckLong: "{{checkLong}}" %}

And in the layout, parsing the custom parameters like this:

{% assign checkPlace = this.Params.ajaxCheckPlace | replace: '~' , ' ' %}
{% assign checkLat = this.Params.ajaxCheckLat %}
{% assign checkLong = this.Params.ajaxCheckLong %}

The code is in production using the new liquid engine. It works with the new liquid engine and the old engine.

I have only tested this with a collection.

Hope this helps.