This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

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

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"
article.contentTypeId = "Partner"
4578723 in product.categoryIds

️ 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)
>, <
<=, >=
in to check if an element is present in a list. For example, 4578723 in product.categoryIds.

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 for locales

To display a page version based on user's locale, you can create a page version with a locale based FECL expression.