Hi, I want to create plugin for shortcode, i'm trying first jquery toggle. I built component "toggle": public function componentDetails()

{
    return [
        'name'        => 'toggle',
        'description' => 'jquery toggle implementation'
    ];
}

public function defineProperties()
{
    return [
         'title' => [
            'description'       => 'The title of toggle',
            'title'             => 'Title',
            'type'              => 'string',
        ],
         'content' => [
            'description'       => 'The content of toggle',
            'title'             => 'Content',
            'type'              => 'string',
        ]
        ];
}
public function toggles(){

    return [
        '1' => [
        'title' => $this->property('title'),
        'content' => $this->property('content')]
        ];
}

The default.htm is:

{% set toggles = __SELF__.toggles %}
div class="toggles">
    {% for toggles in toggles %}
    
    div class="toggle">
        div class="toggle-title">{{ toggles.title }} /div>
        div class="toggle-content">{{ toggles.content }} /div>
    /div>
    {% endfor %}
/div>

I'm looking for a way to pass an array of content and title and not only one toggle in a component.

Last updated 9 years ago

Did you see this: http://octobercms.com/blog/post/mastering-components

Half of that video talks about just that :).

@that0n3guy, Yes, but I don't want to pass array from ComponentName.php. I want user could do this like this way: {% component "toggle" title=example content=example title=example2 content=example 2 %} After this the for loop in the above code would make two toggles inside the toggles div.

public function toggles(){
return [
    '1' => [
    'title' => $this->property('title'),
    'content' => $this->property('content')]
    ];
 }

in this function i will make a for loop that all title and content will go to array. Thanks, Ben

Last updated 9 years ago

Oh I gotcha... The http://octobercms.com/plugin/flynsarmy-menu plugin does this (source: https://github.com/Flynsarmy/oc-menu-plugin). Take a look at it. Its kind of a complicated example, but some other plugins might have this as well..

Take a look through a couple plugin docs to see if any do this then checkout there source.

@that0n3guy, Could you direct me where this menu plugin does this? just to make sure you understand me, I want to pass the title and content via the CMS (where you edit a page). Thanks

Looks like I was wrong. It does only pass a single property.

Why don't you pass the array as something you can

Why don't you pass it like {% component "toggle" title-1=example content-2=example title-2=example2 content-2=example 2 %} and loop through $this->property('title-'.$i),

Or do it with json: {% component "toggle" titles='["this is my title","this is my title2"]' contents='["this is my content","this is my content2"]' %}

or split the content/title with a pipe | and explode by the pipe...

thanks, it seems to work good! now i need to find a way to know how much title and content has been pass. maybe i add this in defineProperties.

thanks for your the help

Last updated 9 years ago

Another question, assume my code is

{% component "toggle" title1="example" content1="<strong>example1</strong>" title2="example2" content2="example 2" %}

how can i parse html tags, because now it show

<strong>example1</strong>    

and doesn't bold the "example1" ?

EDIT: found a way to do this easily

{{__SELF__.content | raw}}

Last updated 9 years ago

Awesome, glad you figured this out.