Using a commercetools staging data source

If you're using our commercetools integration, you might run into some issues when using your commercetools staging instance together with your Frontastic staging system. In general, we recommend using a single commercetools instance with all Frontastic environments to prevent these issues.

In commercetools, every entity has a unique ID. That ID is arbitrarily set by commercetools when you import the data. If you have 2 commercetools instances, you'll have 2 different IDs for the same thing, 1 in staging and 1 in production. Even if they have the same name and data, they'll each have a different ID.

Our commercetools integration references the ID from the Frontastic studio. So, for example, whenever a product is selected, we store the ID of the product.

Whenever you search from the Frontastic studio for commercetools data (for example, products), we always reference the production instance of your commercetools data. So, all stored IDs will also reference this instance.

As a result, such references won't work when looking at your site in the Frontastic staging environment.

To be able to see a working reference in your staging instance of your commercetools data, you'll need to input the ID manually into the data source filter. Remember to only apply these in the Frontastic staging environment.

Here's an example for a product landing page:

1. Open the Frontastic studio and select the Staging environment

2. Click the Site builder icon

3. Create a new page folder and a page version within it (name them so it's clear they're for testing only)

4. Add a layout element to the page and then add a Frontastic component that uses a Product data source in the page builder

5. Click + Add data source filter

6. Go to your commercetools staging instance and copy the product ID, then add it into to Product ID field in the Frontastic studio (note that the preview in the filter editor won't show anything because it references the production instance of commercetools)

8. Save the filter and check your page

🚧

Don't ever use the staging ID in your production environment as this will break the data source and your page.

If you want to do this for a category, follow steps 1-3 above, then follow the steps below:

4. Add a layout element to the page and then add a Frontastic component that uses a Product search data source in the page builder

5. Click + Add data source filter

6. Click + Add filter and then select Category

7. Go to your commercetools staging instance and copy the category ID, go back to the Frontastic studio and select Manual ID in the dropdown, and then paste your staging category ID into the the text field (note that the preview in the filter editor won't show anything because it references the production instance of commercetools)

8. Save the filter and check your page