Updates on Fluid, Antebellum, a new site using Orchard Core - This week in Orchard (16/12/2021)

Gábor Domonkos's avatar
This week in Orchard, Workflows

This time we will do a deep dive and will check out some important updates on Fluid. But before doing that, let's see some important changes of Orchard Core like preserving contained content items IDs or using async write/read of the Request.Body. Oh, and did we mention the brand new Orchard Core site, Antebellum?

Orchard Core updates

Preserve contained content items IDs

Orchard Core has a feature to have content item IDs on Bag Parts be persistent (i.e., not change), which was implemented in this pull request. However, there was a bug. The "Bag Part Content Item ID" isn't persisted. And it was easy to reproduce. You just need to make a parent content type with a child content type like so:

The attached parts of the parent content type

Then you just need to add in a Parent with a couple of children and publish it to get this result (it is outputting the child content item IDs):

A parent with the child content item IDs

But every time you published the Parent Content Item, the child content item IDs changed:

The parent content item now has changed child content item IDs

The fix was to use a dedicated Content Items array to hold the IDs. It prevents conflicts when removing (or moving to another container), and then adding an item, by computing indexes differently when adding an item, was based on the number of items + 1, now based on the existing max value + 1. And Jean-Thierry Kéchichian also fixes other little issues when dragging between containers more than one level up/down.

Async write/read of the Request.Body is mandatory

There was an issue in Orchard Core when you are using ReadToEnd() in the Request.Body. Using an async method is mandatory even if we use it synchronously by using GetAwaiter(). This is a behavior from ASP.NET which is toggleable, but we use the default in this case.

Async write/read of the Request.Body is mandatory

Updates on Fluid

Let's say you have an array and you would like to do a reverse. The following code is not a valid Liquid, that's just to present the given logic. Doing reverse in an array like: [1,2,3] | reverse => [3,2,1] will reverse the array. If you use reverse with a string like "1,2,3" you would expect to get "3,2,1". But what it was giving you is a string, but it should give you an array with ["3", "2", "1"]. So, the reverse has been fixed in two ways. First, fixing the behavior on strings and then also returning an array instead of a string. So, it's not obvious, not expected from that.

If you want to suggest Liquid features, you can use LiquidJS.com, and then you can try something like that. The retuning value here 3,2,1 is an array actually (the site serializes it and displays it as a string).

Using the reverse Liquid filter

Another good tool is .NET Fiddle, where you can reference a NuGet package and can work with Liquid. It requires some more work, so using LiquidJS to try out Liquid is an easier way.

Another improvement is there is a new render tag. Usually, you can use the input tag to load an external Liquid file. This input tag has been obsoleted by the Shopify team because it has security issues in a way that when you run a partial template from this input tag, it can access all the variables from the calling templates. The new render tag in Fluid now doesn't have this issue. It works exactly the same as input with the same parameters, but you can only access the properties, that have been set on the tag itself, or the variables that are defined in the global scope. There are actually some interesting ways to use that. You can write {% include 'foo' %}, and it will try to render the foo.liquid file. And when you do that, inside the foo.liquid, the foo property is the global scope. You can also do {% include 'foo' a:1, b:2 %} and than in this case foo.a, foo.b will have the values. You can also write {% include 'foo' as model %} and then the properties will be available under the modal property.

Fluid v.2.2.4 is fixing first, last, and size. It means you can do the following that can be seen on the screen below. In Fluid, these properties were implemented specifically in all the values, but you can also use pipes to do the same thing. The issue is there were two different invertations ,but the standard says this should be the same thing. So, calling | first now is equivalent to do .first. This means any of your objects can implement these filters by just intercepting the property name.

Using the first, last, size and first Liquid filters

Fluid v2.2.5 contains the new liquid and echo tags. The echo tag can be used in this way: {% echo "foo" %}. The idea of the echo tag is that it's equivalent to the injection tag like this: {{ "foo" }}.

The liquid tag is just to execute liquid. What you can do with that is you can run liquid like:

{%
   liquid
      for x in 1..10
         echo x
      endfor
%}

which is equivalent to

{% for x in 1..10 %}
   {{ x }}
{% endfor %}

but as you can see, the first one is less verbose, you don't have to add all the curly braces and the percentage sign everywhere. It's just one block, and you can also nest them.

Demos

A new website using Orchard Core: Antebellum

Antebellum provides a way for the everyday person to mine crypto, without the need of buying expensive hardware, consuming high electricity, high cost in cooling, maintenance of hardware, and sudden downtime.

The site contains several custom pages, like the Sign Up page, which is actually using a workflow to do the user registration that also has an integration with Stripe.js. Stripe.js is a JavaScript library that you can wire into your checkout form to handle the credit card information. When a user signs up using the checkout form, it sends the credit card information directly from the user's browser to Stripe's servers.

The customer registration workflow in Antebellum

Just head to YouTube to see how the Sign Up page was built or how can you make a nice custom admin UI like that you can see in the video one in Orchard Core!

If you are interested in more websites using Orchard and Orchard Core, don't forget to visit Show Orchard. Show Orchard is a website for showing representative Orchard CMS (and now Orchard Core) websites all around the internet. It was started by Ryan Drew Burnett, but since he doesn't work with Orchard anymore, as announced earlier it is now maintained by our team at Lombiq Technologies.

News from the community

Orchard Dojo Newsletter

Lombiq's Orchard Dojo Newsletter has 234 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course.

Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!

If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

No Comments

Add a Comment