Shop Navigation

General

With the navigation, you can create menus with multiple levels for your frontend. Individual menu items can be linked to individual links, shop categories, or pages. You can set each menu item as temporary. You can also add images for menu items and define navigation items as searchable, for them to be returned through our endpoints /v2/suggestions and /v2/resolve.

Typical use-cases for navigations managed by SCAYLE are:

• Top Navigation Menu
• Footer Menu

But you're not limited to this. SCAYLE can handle multiple menus for the same shop.

Time-Schedule visibility of navigation items

Navigation Items can be time-scheduled with a start- & end date time setting.
This makes it very comfortable to plan seasonal changes in advance for shop managers.

There are three options for setting the visibility of a menu item:

• Set the visibility upon the creation of the menu item.
• Adjust the visibility in the edit mode of the menu item.
• Adjust the visibility via the dashboard.

The procedure to set visibility via edit mode is as follows:

1. Click the pen icon on the right of the dashboard to enter edit mode of a menu item.
2. Click the clock icon to set the period in which the menu item shall be visible.
3. Enter a Start date and End date.
4. Click Save.

Assets for navigation items

If you want to show some media assets (such as teaser graphics or icons) for rendering your navigation you can upload assets in the SCAYLE Panel. Those assets are automatically put to the CDN and the links are responded via the Storefront API.

Manage navigation in SCAYLE Panel

Create a new navigation on the global-level as follows:

1. Navigate to Shops > Shop > Storefront > Navigation.
2. Click + New Navigation.
3. Assign a Menu Name.
4. Click + New Menu Item.
5. Fill in the mandatory fields: Name and Target URL for the landing page that the menu item is referencing to. As a target, you can set an Individual link, a Page, or a Category. The type individual link allows you to enter anything without validation.
6. Optionally, set the Visibility and Assets. For Visibility you can pick a start/end date. If you do so, the menu item will only be visible within this period. For Assets, you can upload an image in SVG format.
7. Click Add Item.

Use the + button below each menu item to add add submenus. You can change the order and the hierarchy level of your menu via drag and drop.

Storefront API

Use the Storefront API to receive your navigations in a fast & efficient way to render them on your mobile app or storefront application.

Get a single navigation tree

The Navigation is identified by the navigationTreeId which you can get from the SCAYLE Panel.

TypescriptPHP

Copy

// Get a single navigation tree
const navigationTree = await client.navigation.getById(1);

console.log(navigationTree)

Get all navigation trees

You can retrieve a list of all navigation trees by using this method.

TypescriptPHP

Copy

// Get all navigation trees
const navigations = await client.navigation.getAll();

console.log(navigations[0].name);

Response

json

Copy

[
  {
    "id": 1,
    "key": "94e321fa-898a-49f2-8",
    "name": "Storefront Navigation",
    "items": [
      {
        "id": 2994,
        "assets": {},
        "name": "Example",
        "visibleFrom": null,
        "visibleTo": null,
        "children": [],
        "type": "individual-link",
        "options": { "url": "https://www.example.com", "isOpenInNewWindow": false }
      },
      {
        "id": 4638,
        "assets": {},
        "name": "Women",
        "visibleFrom": null,
        "visibleTo": null,
        "children": [],
        "type": "category",
        "categoryId": 6
      },
      {
        "id": 1024,
        "assets": {},
        "name": "SPECIAL Time offer",
        "visibleFrom": "2023-10-25T00:00:00Z",
        "visibleTo": "2024-09-30T00:00:00Z",
        "children": [],
        "type": "individual-link",
        "options": { "url": "example.com/special", "isOpenInNewWindow": false }
      }
    ]
  }
]