Tags

Tags are keywords or phrases that characterize an entity (object). They are often used to search for specific records from a list. Examples can be hashtags in a post, skills in a user profile, or job listings.

To work correctly with the tags component, we will need tables with a specific structure. Let's take a closer look at them.

Tag Tables

The table where the tags are stored will be called bff_test_tags, and the table structure looks like this:

CREATE TABLE `bff_test_tags` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT, -- Tag ID
  `tag` varchar(255) NOT NULL DEFAULT '',        -- Tag (name)
  `moderated` tinyint(1) unsigned NOT NULL DEFAULT '0', -- Tag state (moderated / not moderated)
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

The table that associates tags with an object, in our example, posts, is called bff_test_posts_tags, and the table structure is:

CREATE TABLE `bff_test_posts_tags` (
  `post_id` int(11) unsigned NOT NULL, -- Object ID
  `tag_id` int(11) unsigned NOT NULL,  -- Tag ID
  PRIMARY KEY (`post_id`,`tag_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Initializing the Tags Component

To work with the Tags component, you need to:

  • Create a tag handler class.
  • Set the settings.
  • Initialize the component. Create the tag handler class TestTags, where the parent class should be the core component \bff\db\Tags, implementing the necessary functions. Set the component settings and connect TestTags to the module or add-on being developed.
class TestTags extends \bff\db\Tags
{
    protected function initSettings()
    {
        # Specify the table for tags
        $this->tblTags = `bff_test_tags`;
        
        # Use tag moderation
        $this->postModeration = true;
        
        # Specify the table for linking tags to object
        $this->tblTagsIn = `bff_test_posts_tags`;
        # Specify the field name in the linking table where the object ID is stored
        $this->tblTagsIn_ItemID = 'post_id';
        
        # Set the link for the admin panel to the menu item of the tag list
        # In the myblog module, the admin controller should have a method called listing,
        # which is responsible for displaying the tag list
        $this->urlItemsListing = $this->adminLink('listing&tag=', 'myblog');
    }
}

Create a method to access the tag component in the base module or extension controller:

/**
 * Initialize the tags component
 * @return TestTags
 */
public function postTags()
{
    static $tagsComponent;
    if (!isset($tagsComponent)) {
        $tagsComponent = new TestTags();
    }
    return $tagsComponent;
}

Using the Object in the Admin Panel

You can find detailed information about how to use this component in lists and forms in this article.

Using the Object on the Frontend

To get the list of tags for an object, use the tagsGet(object_id) method of the Tags component, where the parameter is the object Id to which the tags are attached.

$tagsComponent = $this->postTags();
$tags = $tagsComponent->tagsGet($postID);

The tags obtained in this way can be displayed on the object page or in a form for adding/editing by the user. In the form, in addition to retrieving previously saved tags, it is necessary to provide the ability to select, delete, and save selected tags. Tag selection is done by autocomplete:

  • Include the existing bff.autocomplete.js library by adding tpl::includeJS(['autocomplete'], true); to your backend endpoint.
  • In the backend endpoint's ajax request handler method, for the input field of the tags, get the tags by using the tagsAutocomplete() method of the Tags component.
$query = $this->input->post('q', TYPE_NOTAGS);
$tagsComponent->tagsAutocomplete($query);

Saving tags in the database is done by using the tagsSave(object_id) method of the tags component.

$tagsComponent->tagsSave($postID); # The parameter is the object Id to which the tags are attached