2

I have JSS Next.JS based component, I want to have 2 placeholders with the same key, but with a dynamic suffix. e.g. I need 2 equal columns.

<div>
  <Placeholder name='jss-6' rendering={rendering}/>
</div>
<div>
  <Placeholder name='jss-6' rendering={rendering}/>
</div>

My expectation is that that I will get 2 placeholders:

jss-6-{UID}-0
jss-6-{UID}-1

however, I get 2 placeholders with the same keys:

jss-6-{UID}-0
jss-6-{UID}-0

Is it expected behavior? How to overcome it and get different suffixes?

Edited: Back to Sitecore MVC approach, it was possible to render few dynamic placeholders at once and suffixes were different. Also, it was possible to pass seed parameter, and suffix was started from that value. Is there something similar with JSS?

Improve this question
8
  • See my answer below to help you understand your situation. My question would be why you need same placeholder name within one rendering? What is use case?
    – Peter Procházka
    Commented Apr 11, 2022 at 11:39
  • @PeterProcházka The use case is 2 columns layout with the same width.
    – Anton
    Commented Apr 11, 2022 at 12:25
  • Then you can elegantly solve this by introducing 2 placeholders - jss-right-column and jss-left-column
    – Peter Procházka
    Commented Apr 11, 2022 at 12:53
  • 1
    Yes, it is possible, it is my fallback plan. I don't go with it initially, because it will double/triple/etc count of placeholders, which I don't want. That is why I am looking for a similar solution that was available with the MVC approach: pass placeholders count or pass seed.
    – Anton
    Commented Apr 11, 2022 at 13:01
  • This URL may help you for using dynamic placeholder with Sitecore JSS doc.sitecore.com/xp/en/developers/hd/190/…
    – Rishiraj Shekhawat
    Commented May 11, 2022 at 14:24

1 Answer 1

Reset to default
0

This is standard behaviour of dynamic placeholders.

Key that is generated jss-6-{UID}-0 is not a key of placeholder. That is key of component within layout. Sitecore will know to which placeholder and component to put that rendering based on this.

Let's split the key:

  • jss-6 - placeholder name
  • UID - Unique ID of rendering that contains placeholder
  • 0 - index suffix

If you add another component to your first placeholder, it will get expected jss-6-{UID}-1 with 1 as suffix.

Index suffix always starts from 0 as default seed value.

Each independent call of Placeholder knows nothing about each other. That's why if you insert two dynamic placeholders with the same name into the same rendering, you will get a collision.

Take a look in official Sitecore documentation about more information on dynamic placeholders: https://doc.sitecore.com/xp/en/developers/92/sitecore-experience-manager/dynamic-placeholders.html

Improve this answer
1
  • My question is how to pass something like a seed in JSS+Next.JS As there is no seed prop in Placeholder.
    – Anton
    Commented Apr 11, 2022 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.