Page

Overview

A page holds the contents of a storefront site. Each storefront site has multiple pages such as PDP, PLP, checkout page, order details page, user profile page, etc. A page contains many layout cells.

For example, a newly created page is shown below:


Note: You can configure the properties of the newly added page using the properties panel on the right-side panel. For more details, see Properties of a Page.

You can make a page to a dynamic page to receive the inputs via the dynamic parameters during run time. This helps to link two different pages (for example, to link PLP and PDP pages). Here, after an action, the PLP page sends the product ID to the PDP page. For more details on actions, refer to the section Actions Tab.

Properties of a Page

The page properties allow you to add extra information to a page. When you create a page, the page ID is auto-generated.

Properties of a page are available under these tabs:

  • Settings – Holds properties related to the settings of the page.
  • Style – Holds properties to set the page style.
  • Actions – Holds the options to configure the actions of the page.
  • SEO – Holds the properties to configure the SEO details of the page.
  • Analytics – Holds the properties to configure the analytics details of the page.

Settings Tab

Below are the properties used in the settings of a page:

Property Description
Page Name Indicates the name of a page.
Page ID Holds the autogenerated ID of a page.
Dynamic Page Specifies whether a page is dynamic or not.
Note: For more details, see Enabling a Page as a Dynamic Page.
Cache Page Indicates whether the contents of the page are cached or not. Enable this toggle to cache the contents.
URL Handle Holds the page URL handle or route of the page.
Note: For more information, see URL Routing.

Style Tab

Below are the properties of the page to set the style:

Group Property Description
Breakpoints  — Helps to create responsive page views.

Note: For more details on breakpoints, see the Breakpoint section.
General Settings Width Specifies the width of a page. The value can be set as a % or pixel value.
Height Specifies the height of a page. The value can be set as a % or pixel value.
Padding Specifies the padding of a page. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Direction Represents the direction of the contents of a page. The contents can be arranged either in a vertical or horizontal direction.
Alignment Represents the alignment of the contents of a page. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch.
Wrap Items Specifies whether the page content can be wrapped or not.
Background Fill Type Holds the fill type of the page background. The value can be Solid Colour, Gradient Colour, or Background Image
Color Holds the color of the page background. The value can be a color name, hex code, or color variable.
Note: For more details on color variables, see Creating Reusable Color Styles.
Opacity Holds the opacity of the page background. The value is set as a %.

Actions Tab

For the details on the Actions tab, see the Actions section.

SEO Tab

Below are the properties of the page to set the SEO:

Group Property Description
General Title Holds the meta title of the page.
Description Holds the meta description of the page.
Keywords Holds a list of meta keywords related to the page.
SEO URL Handle Holds the SEO URL handle of the page. The value should be unique for each page.
Canonical URL Holds the canonical URL of the page. This URL is auto-populated with the full URL.
Preview Specifies whether you can preview the search result or not. When enabled, the user can see the search result while editing the SEO content.
Structured Data Scheme Holds the schemas needed for SEO. For more details, see Adding an SEO Schema for a Page.
Social Share og:title Holds the title of the page. It appears when displayed on the applicable social media.
  og:description Holds the description of the page. It appears when displayed on the applicable social media.
og:image Holds the image of the page. It appears when displayed on the applicable social media.
twitter:title Holds the title of the page. It appears when displayed on Twitter.
twitter:description Holds the description of the page. It appears when displayed on Twitter.
twitter:image Holds the image of the page. It appears when displayed on Twitter.
Robots noindex Indicates whether the indexing is enabled for this page or not. If indexed, the page is available in the search result.
nofollow Indicates whether the links on the page should be followed by Google or not. If enabled, Google will not use the links on the page to discover those linked pages.
nosnippet Indicates whether to show a text snippet or video preview in the search results for the page or not.
noarchive Indicates whether to show a cached link in search results for the page or not.
noimageindex Indicates whether to index images on the page or not.
notranslate Indicates whether to translate the contents of the page in the search result or not.
Additional Tags — Holds the additional tags for SEO. You can add any number of unique links and meta tags other than the above-listed tags.

Analytics Tab

Below are the properties of the page to set the Google Analytics:

Property Description
Libraries Holds the libraries to support Google Analytics of the page. For more details, see Adding a Library for Analytics of a Page.
Scripts Holds the Google Analytics script of the page. For more details, see Adding Script for Analytics of a Page.

Script Tab

Below are page properties to set the Google Analytics:

Property Description
Libraries Holds the libraries to support Google Analytics of the page. For more details, see Adding a Library for Analytics of a Page.
Scripts Holds the Google Analytics script of the page. For more details, see Adding Script for Analytics of a Page.

How To

A user can:

Creating a New Page

You can create a new page under a project. A project can hold any number of pages.

To create a page:

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available at the top-left corner:
  4. Click the Add Page button to create a new page:

    The page is added to the selected project:
    ***

Enabling a Page as a Dynamic Page

You can enable a page as a dynamic page and set dynamic parameters to it.

To configure a page as a dynamic page:

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available at the top-left corner:
  4. Click on the required page.
    The page opens:
  5. Click on the page name.
    The right properties panel appears:
  6. Enable the toggle Dynamic Page to make the page dynamic.
    A new tab DYNAMIC PARAMETERS is added.
  7. Click the DYNAMIC PARAMETERS tab to set the dynamic parameters:

    Note:

    • By default, a dynamic parameter has been added with the name dynamicparam1. You can rename a dynamic parameter.
    • You can set a default value for each dynamic parameter.
  8. Click the Add Parameter button to add a dynamic parameter.
    A new dynamic parameter has been added:

    Note:

    • You can use the dynamic parameters in the datapoints. For more details, refer to the section Creating a Datapoint.
    • While configuring actions, you can use the dynamic parameters. For more details, refer to the section Actions.
    • You can delete a dynamic parameter by clicking available next to the dynamic parameter:

Viewing a Page

A page has the following modes:

  • Build – Use this mode to build and configure the page and its contents. Elements/blocks can be dragged and dropped into the canvas and configured in this mode. Any datapoints on the page are rendered using the sample response in the Build mode.
  • Simulate – Use this mode to preview how the page will be displayed before publishing it live. The datapoints are triggered and the actual API response is used in the Preview mode.
  • History – Use this mode to display the pages as it is in the project irrespective of what is published.

To view a page,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available at the top-left corner:
  4. Click on a page to be viewed:

    The page is viewed:

    Note:

    • To go to another page, click and select a page.
    • To view all the pages available, select the All option.

Updating a Page

You can update a page with a new element(s)/block(s) and/or shared element(s)/shared block(s) from a basket.

Updating a Page with a New Element/Block

To update a new element or block onto a page,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available at the top-left corner:
  4. Click on a page to be updated:
  5. Expand the page:
  6. Select available at the top-left corner.
  7. Drag and drop the BLOCK/any element from the ELEMENTS section of the add-panel to the desired layout cell:

    The element/block is added to the page:

Updating a Page with a Shared Element/Block

To update a shared element or block onto a page,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available at the top-left corner:
  4. Select a page to be updated:
  5. Select the required layout cell. For example,
  6. Select available at the top-left corner.
  7. Select PUBLIC BLOCKS or the desired bucket:

    Note: For more details on PUBLIC BLOCKS, see Managing Public Blocks in Agora Workplace.
    The shared element(s)/block(s) in the bucket is shown:
  8. Drag and drop a block or element from the ELEMENTS section of the add-panel to the desired layout cell.
    The shared element/block is added to the page:

Deleting a Page

You can delete a page available in a project if it is no longer required.

Note: At least, one page is required in a project.

When you delete a page:

  • The standard (local) elements on that page will be deleted.
  • When there are shared element(s)/block(s) on the page with only one instance, that instance will be deleted. But the shared block(s)/element(s) will be available in the bucket for future use.
  • For shared element(s)/block(s) with more than one instance, that instance will be deleted, and all the other instances will remain as is.

To delete a page,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available at the top-left corner:
  4. Select the page to be deleted:
  5. Click on the selected page.
    The details of the page appear:
  6. Click available at the top of the right-side panel.
  7. Select Delete from the dropdown list.
    The page is deleted from the project:

    Note: Alternatively, you can also delete a page by using available next to the page name in the pages list:

 

Revision History

Date   Description  Created By  Peer-Reviewed By  Approved By 
2023-06-22  Page created and content added.  AN JP Suganya