Code to determine if a specific component is already on page

Question

Issue: I want to add two accordion components to one page. The IDs are the same so both of the components will not work.

My Proposed Solution: Using MVC, add code to the component that will check if there is already an existing component of the same (accordion) type on the page. If so, start the incrementing of IDs at a different number. I would think that should solve the issue.

Is there an MVC way to check if a component has already been added to a page in Experience Editor?

Any help would be greatly appreciated!

Answer 1

Rather than dealing with the Layout via Sitecore, we can generate an ID string that will be unique for each instance of the component.

The Model can have a property that returns a unique ID string which can be bound to the view. Perhaps a standard prefix + Unique ID will work.

e.g.: id="accordion-CE675E37357D47C1853B81A90F93BE12", where the suffix is a sitecore shortid.

public class AccordionComponent
{
    public string ComponentId { get; private set; }

    public AccordionComponent()
    {
        var shortId = ID.NewID.ToShortID();
        ComponentId = $"accordion-{shortId}";
    }
}

And use the ComponentId property in the View like this:

<div id="@Model.ComponentId" class="accordion_selector_class">
    ...
</div>

Each accordion container element will have a common class that can be used to select all of them with javascript. This array of elements can then be used to apply the accordion behavior as needed.