How to add HTML, CSS, JavaScript on the front-end using a template hook in a plugin?

Question

I'm trying to render my HTML, CSS, JavaScript with the use of template hooks from a plugin.

{% hook 'video.slider' %}

Is it possible? If it is, can you give some snippet?

Answer 1

In your plugin's main file init method setup your template hook. In this hook you can call a service method to return your rendered HTML.

public function init()
    {
        craft()->templates->hook('video.slider', function(&$context)
        {
            $response = craft()->pluginname_service->serviceMethod();
            return $response;
        });
    }

In your plugin's service file create a method to return your rendered HTML.

function serviceMethod() 
    {   

        $oldPath = craft()->path->getTemplatesPath();

        $newPath = craft()->path->getPluginsPath().'path/templates/folder';
        craft()->path->setTemplatesPath($newPath);

        $templateName = '_templatename';

        //If you need to get data from somewhere else to pass to the template
        $htmlData = craft()->plugin_service->serviceMethod();

        $htmlResponse = craft()->templates->render($templateName, array("variableName" => $htmlData));

        //reset path
        craft()->path->setTemplatesPath($oldPath);

        return $htmlResponse;
    }