Using FECL

FECL stands for Frontastic 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.

️ Experimental feature

Using 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.

pageMatchingPayload

To use FECL in the Frontastic 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 Frontastic studio, we can use category.categoryId = "2074".

FECL on dynamic pages

Within Dynamic pages in the Frontastic 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 Frontastic studio.

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

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

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.

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

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

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

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.


Did this page help you?