October CMS - How to get properties of component (__SELF__)?

I'm having a little problem trying to pull out the values of the properties set within function defineProperties() in my component.

I have added some property values when including two instances of the plugin on a page. This is a short list of the properties to provide some context to my issue.

defineProperties() {
return [
    'title' => [ 'title' =>'Title' ],
    'type'  => [ 
        'title'     => 'Type',
        'type'      => 'dropdown',
        'default'   => 'standalone',
        'placeholder'   => 'Select type',
        'options' => [
            'standalone'    => 'Standalone',
            'networked' => 'Networked'
        ]
    ],
    'unitCost'  => [
        'title'     => 'Unit Cost',
        'default'   => '130.00'
    ]

...

The properties are set as:

Instance 1:

form Component

Alias: standalone

Title:

Type: Standalone

Unit Cost: 5.00

Instance 2:

form Component

Alias: network

Title:

Type: Network

Unit Cost: 10.00

The above have been appended to the /plans page

The plugins components/form/default.html contains the following (both instances use this directly i.e. not forked)

No. of Licenses
<input id="licenseQty" name="licenseQty" type="text" placeholder="1">

<label>Support Plans</label>
<select id="supportPlan" name="supportPlan">
    <option value="1">1 Year (included)</option>
    <option value="2">3 Years</option>
</select>
<label>Total:</label>
<p>&pound;{{ __SELF__ }}</p>
<button type="submit">Add to Basket</button>

The above statement {{ SELF }} produces the reference for both user entered Alias values. When I try to access other properties on SELF such as {{ SELF.alias }} and {{ SELF.id }} these hold the relevant details. It is only when I try to access the custom properties below I get nothing but blanks:

{{ SELF.type }} - blank

{{ SELF.unitCost }} - blank

Can anyone help?

__SELF__ get's you access to the Component object (class) for that component. So, when you access {{ __SELF__.alias }} or {{ __SELF__.id }} you are accessing object properties (i.e. it's basically equivalent to calling (new MyComponent)->alias.

Since you have not defined type and unitCost as PHP object properties for your component, you cannot access them through {{ __SELF__.type }} or {{ __SELF__.unitCost }}. In order to access them within Twig, you can either make a call to the component object method that returns their values (property()):

{{ __SELF__.property('type') }}

or you can have your Component class define those configuration level properties as PHP object / class level properties as follows:

public function init() {
    $this->type = $this->property('type');
    $this->unitCost = $this->property('unitCost');
}

and then you will be able to access the data in the form of {{ __SELF__.type }}

See http://octobercms.com/docs/plugin/components#component-properties for more information on the topic.