How to include parsys or responsive grid in a row endlessly? | Community
Skip to main content
A
Ameen_Dev
Level 4
July 6, 2022

How to include parsys or responsive grid in a row endlessly?

  • July 6, 2022
  • 3 replies
  • 1437 views

Actually, I am trying to include the parsys or responsive grid in a component, where I can include a component multiple times in a row. I have attached the example scenario image.

 

 

Kindly help me to achieve this. I really appreciate the help.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
July 6, 2022

Hi @ameen_dev ,

I believe you can achieve that using Layout Container Component (Responsive Grid). Tried it on We-retail, please refer below snap.

 Regards,

Santosh

Santosh Sai
    B_Sravan
    Community Advisor
    B_SravanCommunity Advisor
    Community Advisor
    July 6, 2022

    Hi @ameen_dev ,

     

    The ideal way for your use case is to make use of the out-of-the-box container component and make use of layout options to align it for three columns just like @santoshsai  said. Adobe suggests re-using the available components as much as possible and that's always the best practice.

    But, in case, if you would like to have the Parsys inside any of your custom components, you can include it with data-sly-resource.

    example:

    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>

    Once you resource the parsys onto your component.html, you can use it as per your requirement.

     

    In order to make more responsive, please go through this doc: https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configuring-responsive-layout.html?lang=en 

    Thank you,

    Sravan 

      A
      Ameen_DevAuthor
      Level 4
      July 6, 2022

      Thanks for your reply @b_sravan.

      Here I have two questions

      1. How do I make the responsive grid appear multiple times? Because when I use the above htl code. It shows the responsive grid only one time but I need it multiple times. Let's say 15 times.

      2. How do I make the responsive grid appear in a row instead of a column?

        B_Sravan
        Community Advisor
        B_SravanCommunity Advisor
        Community Advisor
        July 8, 2022

        Hi @ameen_dev, 

        I wonder why you need parses 15 times! May I know the use case? if it is the one mentioned in your question, I believe that you can add the list/text component multiple times on to your parses.

        However, to answer to your question, do the following.
        1. Add a field to your dialog, which may ask the no. of times you want to include parses.

        2. Loop in the data-sly-resource under the data-sly-list where the iteration stops with the list index(which would be the number that is authored in the above field).



         

          Manu_Mathew_
          Community Advisor
          Manu_Mathew_Community Advisor
          Community Advisor
          July 7, 2022

          @ameen_dev The ideal way would be out-of-the-box container component and make use of layout options. however if can be customized via html/css code by using parsys resources within different div layouts. 

          Another approah would be to do a containr component - like card container that injects multiple cards based on authroing the container component. 

            Terms & ConditionsAccessibility statement

            Loading footer...