Sections

This page will introduce you to the usage of sections in your catalogue.

What are sections?

By using sections you can add additional entire sections of options to the Settings tab of a catalogue. Sections are displayed right under the Basic settings section, inside the Settings tab.

Structure

The basic structure of sections uses the options and builds upon it.

It is built from the following classes:

  • Sections - container for individual section

  • Section - container for individual option

  • Option - can take many forms; described in more detail on this page.

The classes will be described in more detail below.

Sections

The Sections class is a container of individual Section classes.

Available methods:

  • add(Section $section): Adds a section to the container.

Section

The Section class is a container of individual Option classes. It extends the UIOptions class and adds the following properties:

  • label - The label displayed in the UI.

  • key - The key used to store the option values selected by the customer (stored in the catalogue’s data.sections).

Available methods:

  • add(Option $option): Adds an option to the section.

  • registerOptions(): Used to register options in a Section class.

  • setLabel(string): Setter for the label.

  • setKey(string): Setter for the key.

  • getLabel():string: Getter for the label.

  • getKey():string: Getter for the key.

Sections can be standalone classes or can be instantiated inline and populated using the setters.

Option

Option classes can take multiple forms and types, for example they can be checkboxes, toggles, dropdown selects and more. Read more about Option classes on this page.

Examples

You can set up an entire Sections + Section + Option list inline or in its own class.

Setting up by instancing the classes inline

We will be setting up the classes inline in this example. However, keep in mind that you can use a combination of inline + standalone classes, depending on your particular case.

You can add multiple Option classes to the Section and multiple Section classes to the Sections class. They will be displayed in the UI in the same order you add them in their respective containers.

<?php

use Plenty\Modules\Catalog\Services\UI\Sections\Sections;
use Plenty\Modules\Catalog\Services\UI\Sections\Section\Section;
use Plenty\Modules\Catalog\Services\UI\Options\Elements\CheckboxUIOption;
...
public function getSections()
{
    // Prepare the Sections container
    $sections = pluginApp(Sections::class);


    // Prepare the Section
    $processesSection = pluginApp(Section::class);
    $processesSection
        ->setKey('processes')
        ->setLabel('Processes');

    // Prepare the Option
    $checkboxOption = pluginApp(CheckboxUIOption::class);
    $checkboxOption
        ->setKey('itemExport')
        ->setLabel('Item export')
        ->setDefaultValue(false);
    

    // Add the option to the section
    $processesSection->add($checkboxOption);
    
    // Add the section to the sections container
    $sections->add($processesSection);
    

    return $sections;
}

Setting up by using classes

You can pre-build the Section class and use it and reuse it as many times as you need.

<?php

use Plenty\Modules\You\Will\Never\Read\This\ItemExportProcessOption;
use Plenty\Modules\You\Will\Never\Read\This\StockUpdateProcessOption;

class ProcessesSection extends Section
{

    protected $key = "processes";

    public function getLabel():string
    {
        return trans("module_catalog::examples/section.processes");
    }

    protected function registerOptions()
    {
        $this->add( pluginApp(ItemExportProcessOption::class) );
        $this->add( pluginApp(StockUpdateProcessOption::class) );
    }
}

To learn how to create and use Options, check out the documentation.

You can then add this section to your Sections container like in this example:

<?php

public function getSections()
{
    // Prepare the Sections container
    $sections = pluginApp(Sections::class);
    
    // Add the sections to the sections container
    $sections->add( pluginApp(ProcessesSection::class) )
             ->add( pluginApp(AnotherSection::class) )
             ->add( pluginApp(YetAnotherSection::class) );
    
    return $sections;
}

You can now navigate to the UI and the sections will be visible under the Basic settings in the Settings tab.