Shopletzy

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).

Navigate Action with New Tab

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.
Confirm Location