Using FECL

FECL stands for Frontend Entity Criterion Language. It's a way to create specific pages that will be shown to customers if that page meets the criteria given.

For example, you can create a Product Details Page (PDP) that will only show if a product is from a certain category. If the category ID was 2074, you could use query.category.categoryId = "2074". If the query matches, the assigned page will be used instead of the default one.

FECL is still experimental so use at your own risk. There's no error handling so you'll need to check your live sites to know that it's working as expected.

Understanding pageMatchingPayload

To use FECL in the studio, you need to add the criteria to the dynamic page handler for a particular extension.

Continuing with our earlier example, we'd add the the category ID of 2074 to our index.ts:

...
if (ProductRouter.identifyFrom(request)) {
console.log('Identify Product');
return ProductRouter.loadFor(request, context.frontasticContext).then((product: Product) => {
if (product) {
return {
dynamicPageType: 'frontastic/product-detail-page',
dataSourcePayload: {
product: product,
},
pageMatchingPayload: {
product: product,
category: {
categoryId: 2074
}
},
};
}
return null;
});
}
...

Then in the studio, we can use category.categoryId = "2074".

FECL on dynamic pages

Within Dynamic pages in the studio, you can set up rules for your dynamic pages.

You need to add the payload to the pageMatchingPayload in your extension dynamic page handler to use FECL in the studio.

You'll see below in the Dynamic page rules header you can add a new rule.

b25f3e1 ed46d20 10 06 2022 at 14 23 122x

In the Entity section, you can add a criterion based on FECL:

de35c4e b341e70 13 06 2022 at 13 41 052x

Some examples could be:

  • product.price > 500 and product.label = "sale"
  • article.type = "makeup"
  • in_array("<category-id>", product.categories)
  • categoriescontain(product.categories, "<category-id>")
  • article.contentTypeId = "Partner"
️ If something matches more than 1 rule, there's no way to select which rule the page version will follow (usually it's in order that the rules are created). Try to avoid creating too many rules that could be matched multiple times.

FECL for user personalization

You can use the FECL feature to personalize the dynamic pages based on the logged-in user's information. For example, you can show a special discount banner to users from a particular postal code.

export default {
'dynamic-page-handler': async (
request: Request,
context: DynamicPageContext
): Promise<DynamicPageSuccessResult | DynamicPageRedirectResult | null> => {
// Identify Product
if (ProductRouter.identifyFrom(request)) {
return ProductRouter.loadFor(request, context.frontasticContext).then(
(product: Product) => {
if (product) {
return {
dynamicPageType: 'frontastic/product-detail-page',
dataSourcePayload: {
product: product,
},
pageMatchingPayload: {
product: product,
user: {
postalCode:
request?.sessionData?.account?.addresses[0].postalCode,
},
},
};
}
return null;
}
);
}
// more code...
},
};

Now, you can create a new rule in the dynamic page section to present personalized information.

af87339 db10cea users from gurgaon

In the page version for this rule, add the personalization. For example, adding a special text.

449cab7 diff product page

A logged-in user from postal code 122001 will see the following Product Details Page

8b32d10 logged in user

But, a logged-out user or someone not from the postal code 122001 see the following page for the same product.

fe1c350 logged out

FECL syntax

FECL accesses the pageMatchingPayload returned by the developing a dynamic page extension. The payload can have nested structures that can be traversed by separating levels using a ..

There must be a space between the operator and operands in a FECL expression.

FECL supports simple conditions that the logical operators can combine:
  • and
  • or
  • not
  • xor

To achieve more complex conditions. Supported operators are:

  • =
  • != (not equal)
  • >, <
  • <=, >=

You can and should use braces to indicate the precedence of evaluation.

A complete example of a complex rule could be:

(category.categoryId = "2074" or category.categoryId = "3392")

There's currently no way to express “any element of a list” or “all elements of a list” expressions. So it's not possible to work with arrays of values in FECL. The workaround for such conditions is to pre-calculate a resulting property in the matching payload to make it available directly in FECL.

FECL on locales

You can also use the FECL criteria to schedule different page versions to be live simultaneously.

Say you have 1 project, and you have multiple locales within that project. You don't always want the same page version live for each locale. So you can set up a different page version and input a criterion, so it displays 2 different live versions.

See the scheduling page versions for different locales article for more information.