SXA 1.8 Custom Component With Placeholder

Question

I have created a custom component by cloning the Page Content rendering with a copy of the cshtml file. I have tried inserting a placeholder into my cshtml so that I can make use of out of the box sxa renderings in a specific area of my html.

In my published markup it appears that where the placeholder is - it is wrapping that area with a div with class of row.

<div class="member-hub">
    <div class="row">
      <div class="component link member-hub col-12">
         <div class="component-content">
            <a href="/Articles" data-variantfieldname="Link" data-variantitemid="{B7229055-B046-47D3-AAC4-6EA4815F2696}">Login</a>    
         </div>
      </div>
    </div>
</div>

When I'm trying to achieve closer to this markup:

<div class="member-hub">
   <a class="btn login-button" href="#member-hub" title="Log in to member hub">
       Login
   </a>
</div>

So I don't want either the row or the col-12 classes that are in the image.

Is there a way of easily overcoming the additional markup being inserted for the placeholder and component cols?

I'm also finding that in experience editor when I have two placeholders in my cshtml like:

<div class="utility-links">
     @Html.Sitecore().Placeholder("utility-links")
</div>

<div class="member-hub">
    @Html.Sitecore().Placeholder("login-link")
</div>

in the experience editor they are being labelled as "fallback" instead of something more useful. Can I override this fallback labelling?

Answer 1

Background

Placeholder is wrapped with additional things here:

Sitecore.XA.Foundation.Grid.Pipelines.RenderPlaceholder.AddPlaceholderWrapper

The goal of this class is to provide consistent placeholder behavior depending on a current grid.

How to get rid of additional markup

You can exclude your custom placeholders from processing by adding an additional node to this configuration section: experienceAccelerator/grid/placeholderWrapper/excludedPlaceholders/placeholder

Fallback placeholder

Fallback placeholder is a placeholder setting item stored here:

/sitecore/layout/Placeholder Settings/Foundation/Experience Accelerator/Placeholder Settings/fallback.

It will be used when during rendering, a matching placeholder setting item for particular placeholder cannot be found.

You can solve it by adding somewhere placeholder settings items for keys:

• login-link
• utility-links

I would recommend doing it under your site (/sitecore/content/Tenant/Site/Presentation/Placeholder Settings/utility-links, /sitecore/content/Tenant/Site/Presentation/Placeholder Settings/login-link)

Don't forget to set Placeholder Key field for both. Once you create them you can set display name to whatever you want.

You should be also able to overcome labeling when you explicitly assign placeholder settings item to your placeholders on a page (bear in mind that if you use it more than 1 time you will have to assign it each time unless you are setting it on partial design and reuse it on pages).