Nested Component giving 500 server error

[designerken]

I have a section that is a component, it contains an image, text, and color picker. there are params for image, text, color, button text, button url.

I have another component that is a button element. it has params for text and url

I have placed the button component into the section component. and for the parameter fields I reference the sections parameters {{dc:p:buttonText}}. But s soon as I add in the url parameter {{dc:p:url}} and save the component, when I refresh the page I get a 500 internal server error. If I leave the url blank the page loads with the text in the button.

[tristup]

Hi @designerken,

Thanks for reaching out.
I have checked the components but was unable to recognize the problem you described. Can you please make a screen casting video and share it to understand what exactly you are trying to point out here?

Thanks

[designerken]

Video link is in the secure note due to needing to hide some server details.

[tristup]

Hi @designerken,

It seems that you are getting it incorrectly. If it uses the {{dc:p:url}} it should be used in the Link attribute of the Button element used as a component. When you add any valid URL to the Link of the component it will replace the Dynamic Content set in the Button.

Here, I have set the URL in the Link which will be set to the parameter of that component and replace the Link attribute of the Button through the {{dc:p:url}}.

Thanks

[designerken]

Let’s see if I can break this down…I created a test page and a new section, I have the same issue.

I have created two components and exported them out.

One is a button (using the button element) with params for text and url.

The other component is a section and it has a few params for bgcolor, text, title, button text and button url. I placed the BUTTON component in this SECTION component.

When I click the button component within the section, I can see its params to edit as expected. If I edit the params at this point the fields change as expected.

But If I place the SECTION component on a PAGE I cannot change the params for the button, because I cannot directly select the BUTTON component since its part of the larger SECTION component. This is why I added the params to the section for the button text and button url.

So I thought that back in the SECTION component on the BUTTON component I could add the {{dc:p:text } and {{dc:p:url}} to dynamically add the content on the page. Doing this is what takes down the site.

so how can I use this button component through out the website in various places…and placing it in this other component to have its own parameters?

[tristup]

Hi @designerken,

I think there is some confussion, while you have added parameter to the components definition it will be able to take the value of that parameter. Like when you add any function definition like the following, you are setting the parameter, but while you are calling it you are passing the value that will be set to that parameter.

Definition:

function fun(parameter)
{
    //you can use the parameter variable only inside this
    x = parameter; // that is what happens while you are passing some real URL / values it is set to the parameter and later set to the Link where {{dc:p:url}} used 
}

Calling:

fun(22); //correct
fun(44); //correct
fun(parameter) //wrong

So you can use the {{dc:p:url}} only where you define the component.

Hope I am able to clarify it.
Thanks

[designerken]

So how do I fix this? How do we nest components on a page to allow both to have parameters? Is this where drop zones come in? If I create a dropzone on the area the button is I can add a component and have its own param fields?

[tristup]

Hi @designerken,

You can’t take the parameter in that way, rather you can use a Looper Provider with the JSON and use the {{dc:looper:field key=“URL”}} into the URL attribute. For the JSON structure, you can go through the following thread.

Moder Slider Can't Edit

I am trying to make this. To explain by what i mean by different on different slides. As i dont want to use slider revolution anymore. [Screenshot 2023-02-15 at 12.43.57 AM]

Hope it helps.
Thanks

[designerken]

Hi @tristup

I am failing to see how the JSON can help achieve the nested component. If I am bringing in a section as a component then how can I make it a looper provider?

[tristup]

Hi @designerken,

You can add a Looper Provider to a Section and set the Looper Consumer to the Column and add the Button component into it. And then you set the Dynamic Content value to the Link of the component. I have created a Test by Themeco page and used the following JSON with the Green Button component.

[{
    "title": "Test 1",
    "url": "https://www.google.com"
},
{
    "title": "Test 2",
    "url": "https://www.yahoo.com"
}]

I have also added the {{dc:looper:field key=“title”}} to set the Title and the {{dc:looper:field key=“url”}} set the URL.

Thanks

[designerken]

Thanks for that @tristup but you are missing the whole point of it being nested components. The section is a component and the button is a component. My only solution as of right now was to make the column a SLOT and add the button in manually on the page. If there is a better way then please let me know.

[tristup]

Hi @designerken,

Unfortunately, there is no other way that I can suggest to you in this case.

Thanks