Using dynamic pages in the Frontastic studio

You can use Dynamic pages to build your dynamic pagesdynamic pages - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master pages`..

A dynamic pagedynamic page - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master page`. is a page you link to from your standard pages, but it also determines the template layout of global pages. For example, you'd use a dynamic pagedynamic page - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master page`. for your Product Details Pages, search, checkout, and so on.

Click Dynamic pages on the dashboard to open the dynamic page area.

When you first open Dynamic pages, it might be empty. A schema must be uploaded first to get a dynamic page. See the developing a dynamic page extension article for more information.

Once a schema has been added, you'll see a screen similar to the below with the list of dynamic pages on the left:

Then when you click on a dynamic pagedynamic page - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master page`., the middle and right sections open.

The middle section is where you can set up rules that your pages follow. For example, you can set up a rule on a product details dynamic page to show if a product is above a specific price, then have the default page for all products below that price. See the using FECL article for how to do this.

The section on the right is where you create the page versions like you would on a standard page. See the creating a page version, duplicating page versions, scheduling page versions, and using the page builder articles for more information.

Creating a dynamic page

We'll now go through creating a dynamic page if a schema has already been uploaded. Once you've opened the Dynamic pages area, follow the steps below:

  1. Select the folder where you want to add your new dynamic page

You can either edit an existing page rule, such as the Default page or create a new rule. For this example, we'll create a new rule.

🚧

You'll only see the + New rule button if the schema has isMultiple flag set to true. See the developing a dynamic page extension article for more information.

  1. Click + New rule in the Dynamic page rules section
  1. Update the Name, add the Entity criterion (see using FECL), click + Add data source, then select a data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site.

This opens the data source filter editor.

❗️

If you create 2 rules where, for example, a single product can match the criteria, you can't control which page version will be shown.

  1. Input a Name, then click Save

This closes the data source filter editor.

  1. Click Save
  1. Click + New page version at the top of the Page versions column
  1. Input a name and click Save

This opens the page builder.

  1. Add layout elements and Frontastic components to your dynamic page (see using the page builder for more information), then click Save

🚧

The preview won't work at this stage, you'll need to add a data source. We'll show you how to do this later in the article.

This closes the page builder.

  1. Hover on your page version, click the more icon, then select Make default

Editing a dynamic page

Once you've saved a dynamic pagedynamic page - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master page`., you can edit it at any time.

To edit the settings of your rule, click the settings icon in the middle section:

To edit the page version, click the edit icon on the name of your dynamic page version:

Deleting dynamic pages

You can delete dynamic page rules by clicking the trash can icon:

❗️

You won't be able to access the rule or the page versions attached to it again.

You can also delete the page versions attached to the rule by hovering on the name of the page version and clicking the trash can icon. You won't be able to access it again.

If you'd like to keep the page version for reference, you can hover on the page version, click the more icon, select Duplicate version, and then select Archive on the duplicated version. You'll then find your page version in the Archived section.

❗️

If you want your rule to show to your customers, you should always have a Live page version.

Previewing dynamic pages

To preview a dynamic page, you need to add a data source. To do this, select the dynamic page type and click Add data source

The data source filter editor will then open. You can either click Save directly or add filters to the data source, then click Save.

To change the data source, click Edit data source.

🚧

If you change the data source with the preview open, the preview won't update with the new data source until you open the page builder.

You can also delete the data source by clicking the trash can icon. But you won't be able to preview your dynamic pages until you add another one.


Did this page help you?