Stream URL handling concept

Frontastic provides URL schemes for different standard entities (product, category, and so on.). You can change the URL pattern as you want to (as described in this article).

It's important to note that we support URLs at the product level, we don't provide them on the product variant level. That means that even if a product URL contains an identifier for the variant level, this isn't guaranteed and can't be relied on. Especially, changing such an identifier on the frontend to a different variant of the same product will result in a data re-fetch but will fetch the very same data (including all variants).

In this article, we'll go through a bit more information on URLs.

In general

  • URLs for items (product, category, and so on) will be generated on the server exclusively
  • A handler concept is implemented in the backend-for-frontend to generate and parse back this information from a URL
  • This handler concept allows you to change how URLs for different entities look like
  • In order to link to an item in the frontend (also known as its 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 item needs to be available in the frontend and a JS component will simply use the _url property of it
  • Generated URLs will still have a predefined format (for example, /.+/p/{sku}) so that the JS router can handle it at least to some degree
  • URLs that have URL parameters (?) will be excluded from SEO indexing by appending a _nocrawl parameter and forbidding this from the robots.txt
  • Changing the URL in the browser will trigger a server roundtrip to load the data for the new URL
  • You can prevent this behavior (for example, for frontend-only state behavior) by prefixing a URL parameter name with an _
  • In case only _-parameters changed, a server-roundtrip will be prevented

Requirements for URLs

End-User:

  • URLs should be speaking (nice to read and remember)
  • A URL can be sent to someone else producing the same screen (for example, showing a page with the same products)

SEO:

  • URLs shouldn't only contain an ID but also keywords
    For example:
    - A good URL: /sonnenbrille/schwarz/armani/fancy-model
    - An OK URL: /sonnenbrille/armani/fancy-model/p/2744756573473
    - A bad URL: /p/2744rf438-gu34r8374rfhe5485tgu
  • Ideally, URLs should be adjustable in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.

Technical:

  • URL must identify a view uniquely
  • Parameters for underlying streams must be encoded in the URL
  • There might be multiple data sourcesdata sources - 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. in one view so parameters must be distinguished between data sourcesdata sources - 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..

Base URLs

A URL in Frontastic addresses is one of these items:

  • a) page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. in the site buildersite builder - An interface that you work with to build your commerce site. Previously known as `stage`.
  • b) Dedicated 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 example, cart)
  • c) 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`. of a generic item (for example, product or category)

Each of these requires a speaking URL. For a) and b) the URL is defined in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. as a configuration value when creating the corresponding page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code..

👍

Tip

A history for URL changes to perform proper redirects may be a good idea.

For c) the situation is more complex because the URLs need to be generated and resolved automatically by Frontastic on basis of the data of the item. In order to allow full flexibility for the implementer when generating the URLs we will implement the following mechanism:

  • 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`. controllers for items match on a specific route that allows slashes in parts of the URL
    • For example, /.+/p/{sku} for a product (allows /5th-avenue/brillen/damen/schwarz/p/6921103620169)
    • For example, /.+/c/{identifier} for a category (allows /brillen/kinder/c/12334332)
  • Per item, a mechanism on the backend site is registered which performs 2 tasks:
    • Generates a URL for an item
    • Parses a corresponding API query object from a given URL
  • For each item that's fetched through our APIs, the URL generation is called then the URL is injected into the response data that is sent to the frontend
  • JS components can then simply realize a link by using the link that's already available in the item data (for example, product._url or category._url or in future content._url)
  • The JS router will still be able to reverse parse the route to instruct a corresponding dynamic-page fetch
  • When an API call to fetch an item from the frontend reaches the backend-for-frontend, the URL parsing is called to factor the query for fetching the item from the API
  • On the basis of this item, the corresponding 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 then selected and returned

Example implementation

For example, the mechanisms to generate and parse URLs could be very simple. Your SIM (PIM) will provide each product/category with a meaningful slug in the format some_thing_fancy and our handling will translate that to /some/thing/fancy/p/<sku> (for a product). The reverse will then create a corresponding ProductAPI query for the SKU.

URL parameters

URL parameters in Frontastic are used to carry around different information:

  • a) Stream configuration additions
  • b) Page state indicators (prefixed with _ to not cause a server roundtrip on change)

By default, Frontastic will append the parameter _nocrawl to all URLs with parameters and have URLs with _nocrawl excluded from being crawled by robots.txt. This avoids filter URLs appearing in search indexes.

By using the _ parameter, it will also stop reloads of a page as it will not be resent to the server.

You can find out more information about using the URL Handler for variants in the Facets, filters, and attributes article.


Did this page help you?