Navigate Action

A reference page in my new Starlight docs site.


The navigateTo action allows you to redirect the user to a specific URL or page within your Shopletzy store.

Use this action when you want to guide users to a different section of your site based on their interactions (e.g., clicking a button).

Basic Usage

  • To use the navigateTo action, include it in your component configuration. For example:

    "action": "navigateTo",
    "actionParams": {
          "url": "'url path'" // eg:'/c/thickShakes'
    }
    
  • In this example, when the user clicks the button, they will be taken to the “'/c/thickShakes'" page.

  • Sample Use Cases:
    • Category Navigation

      • Use the navigateTo action on category buttons (like “Thick Shakes” in your example) to take users directly to specific product categories.

      • For instance, clicking “Thick Shakes” could lead to a page displaying all thick shake products.

        "type": "button",
        "text": "Thick Shakes",
        "action": "navigateTo",
        "actionParams": {
            "url": "'/c/thickShakes'"
        }
        
    • Custom Landing Pages

      • Create custom landing pages for promotions, seasonal events, or special collections.

      • Use the navigateTo action to guide users to these pages from banners, buttons, or links.

        "type": "button",
        "text": "Shop Now",
        "action": "navigateTo",
        "actionParams": {
            "url": "'/c/festivalOffer'"
        }
        
    • Checkout Process

      • During the checkout process, use navigateTo to guide users through different steps (e.g., cart review, shipping details, payment).

The navigateTo action allows you to redirect the user to a specific URL or page within your Shopletzy store.

When combined with the newTab parameter set to true, the URL will open in a new browser tab.

Basic Usage
  • To use the navigateTo action, include it in your component configuration. For example:

    {
      "type": "button",
      "text": "Visit Example Website",
      "action": "navigateTo",
      "actionParams": {
          "newTab": true,
          "url": "'https://example.com'"
      }
      }
    
  • In this example, when the user clicks the button, the example.com website will open in a new tab.

  • Sample Use Cases:
    • External Links
      • Use this feature for external links (e.g., linking to your social media profiles, partner websites, or helpful resources).
      • It ensures that users stay on your site while accessing additional content.
    • Terms of Service and Policies
      • When linking to legal documents (such as terms of service, privacy policy, or cookie policy), opening them in a new tab provides a better user experience.