1

First time I'm going to use Ajax with Craft CMS therefore I'm still confused how it works.

What I need is this, when I click on a specified link in the front, I need the CMS to load some entry/entries and display the data in a popup on the same page of course.

The CSS for the popup is ready, the HTML too (static for now, not twig template) the backoffice also is ready. The only thing I need is how to get the entries (basic explanation if possible) with ajax (It seems to be the best solution) and load them into the page then show them in a popup.

Is there any link(s) to help in my task or someone to explain those first steps please ?

2
3

First: you need to create a Plugin, I suggest you to use Pluginfactory.io to create your boilerplate and read the docs about plugin development

You'll need an ajax Request that could look like

$('#a-button').click(function(){
    var data = {
        entryIds: [1,2,3,4], // <- insert the id(s) of the entries you want to render
        action: 'pluginName/controllerName/renderTemplate', // <-- route to your controller
        templatePath: 'path/to/template'
    };
    $.ajax({
        type: "post",
        url: '',
        data: data,
        success: function (response) {
            if(response.success === true){
                $('#a-container').html(response.html);
            }else{
                alert(response.message);
            }
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log("Status: " + textStatus);
        }
    });    
});

Then you'll insert this function in your controller

/**
 * @throws \Craft\Exception
 */
public function actionRenderTemplate()
{
    $success = false;
    $message = Craft::t('Could not find template path');
    $html = '';

    // check for a template path
    if ($templatePath = craft()->request->getParam('templatePath')) {
        // check for entry ids
        if($entryIds = craft()->request->getParam('ids')){
            // fetch all entries with the ids
            $criteria = craft()->elements->getCriteria(ElementType::Entry);
            $criteria->id = $entryIds;
            $elements = $criteria->find();

            // render the template
            $html = craft()->templates->render($templatePath, ['elements' => $elements]);    
            $success = true;
        }else{
            $message = Craft::t('Could not find required entry id parameter');
        }
    }

    // return as json
    $this->returnJson(
        [
            'success' => $success,
            'message' => $message,
            'html'    => $html
        ]
    );
}
9
  • I used Business Logic plugin template for Craft CMS since is a fast example i'm still new to plugins dev i don't know even how to create one i'm letting it for later, i followed your instruction and then ? i use the is Ajax request in the same template ? So the script will be like this – Abdelhafid AABID Apr 26 '18 at 8:43
  • <script type="text/javascript"> $('from-devis a').click(function(){ var data = { entryIds: {{entry.id}}, action: 'businesslogic/BusinessLogicController/renderTemplate', templatePath: 'index' }; – Abdelhafid AABID Apr 26 '18 at 8:50
  • $.ajax({ type: "post", url: '', data: data, success: function (response) { if(response.success === true){ $('#a-container').html(response.html); }else{ alert(response.message); } }, error: function (XMLHttpRequest, textStatus) { console.log("Status: " + textStatus); } }); }); </script> – Abdelhafid AABID Apr 26 '18 at 8:50
  • I'm not sure what else you want? When the request is triggered you'll get the html of the template with the given elements or an error – Robin Schambach Apr 26 '18 at 12:44
  • Yep, i've got a status : error on the console, I tried to corrected but failed ... u_u, and yes just like you said i'm trying to load and display a popup on click. – Abdelhafid AABID Apr 26 '18 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.