Slugs for Component Types

Questions and Answers
1
System Information
  • Strapi Version: 4.11.2
  • Operating System: Ubuntu 22.04.2 LTS
  • Database: MySQL
  • Node Version:
  • NPM Version:
  • Yarn Version:

I would like to know if it is possible to use auto-generated slugs for components. In v3 and v4 of Strapi, there were different ways to implement auto-generated slugs to collection types, the v4 tutorial can be found here: How to Create a Slug System in Strapi v4.

However, they only work for collection types. I need to use auto-generated slugs on components because the auto-generated slug of a component is supposed to be used as an anchor tag within the component. That way, users of our CMS can copy the auto-generated slug of a component and paste it into the ‘anchor’ field of another component, providing working anchor tags between components within a landing page. I have not found any way to solve this, though. Anyone got an idea?

2

To confirm, do you want to build a landing page for a separate website that uses anchor tags, and that the landing page integrates with Strapi?

3

No, landing pages are my collection types in the Content Type Builder of Strapi. A landing page can consist of multiple components. Those components should have individual ID/Slug that are generated when a user adds them to a landing page, so that their ID/Slug is used as an html id within the component and as a way to reference where to jump to when clicking on a possible other components.

4

So you want to jump to a component within a landing page that’s within the Strapi Admin tool?

5

Yes. I want to make it possible to jump from one component to another component within the same landing page via click.

6

Sorry for the clarification, you’re using terminology that you’ve created within Strapi so I wasn’t sure if you’re trying to jump to a component within Strapi or on an actual Landing Page. So since you’re wanting to jump to a component within Strapi, here are some thoughts:

  1. Strapi doesn’t provide useful IDs in the Content Manager that will assist you in this case
  2. I assume you’re going to write the jump logic yourself (link to anchors), again Strapi doesn’t do this for you
    1. Create a button component in the sidebar to jump to where you like
  3. If the components you’re creating are custom components, then this becomes really easy, simply use IDs from the data in the name of the IDs used in the HTML of the component
  4. If you’re using Strapi’s predefined components, this becomes a little tricky (this is least preferred)
    1. You could use JavaScript to look for specific HTML or text and jump to that element
    2. You could use an anchor link like https://domain-name.com/#:~:beginning_of_text,end_of_text which jumps to the highlighted text on the page
7

Thanks for your detailed response. Regarding your points:

  1. I am aware of that and that’s totally fine. I just need the logic to be able to reference between components within a collection type
  2. Could you specify what you mean by using IDs from the data in the name of the IDs used in the HTML? If I were to add a dynamically generated uuid for every component within the component, that would give me a unique ID for all of them but it wouldn’t give me the possibility to view this ID within the Strapi Dashboard when viewing a collection type that includes this component because the ID would only be generated during build, which is at a later point in time than the viewing of the ‘landing page’ in Strapi.
8

I may have misled you. Using a consistent name instead of a dynamic one would probably be best.

Also sorry, it’s still unclear what you’re trying to achieve. Pictures might help.

9

I am trying to achieve anchors between different components within the same collection type. I use this collection type to be able to build dynamic landing pages that can be filled with the custom components I built. Every instance of this component should have a unique ID in this collection type. If I have a component, let’s call it Carousel, that I add to my landing page together with another component, let’s call it a Headline, then I want users to be able to reference the Carousel component as an anchor within the Headline component on the same page. If the Carousel therefore has an ID of carousel-1, I want users to be able to insert ‘carousel-1’ as the anchor link in the Headline component. By doing that, I can create an automatic scrolling to the desired Carousel component when for example clicking on the Heading component.

Because I re-use components not only in different collection types but also use the same component multiple times within the same collection type, constant IDs would not suffice.