Use Tagger in Newspublisher?

Support Extras
1

Has anyone here successfully married Tagger and Newspublisher, so that one can use the Tagger-input-fields in the Newspublisher-frontend? Especially the autotag field?

2

There are some complicating factors here:

  • Tagger doesn’t use a TV to store the data
  • Newspublisher has no hooks and is not easily extendable
  • The autotag field is written in Ext.js (and you probably don’t want to use that in your frontend)

In summary, if you don’t want to change the code of the Newspublisher extra, you probably have to add some kind of “autotag” field yourself with javascript.

Here is some (ugly) code as a proof of concept. (Not yet a marriage between Tagger and Newspublisher, but maybe a first date):

  • Add jQuery to your template
  • Add this snippet call [[!npTagger? &group=`1` &tpl=`tplNpTagger`]] for example to your &outertpl chunk. (&group is the group-id of your tagger group)
  • Add the snippet npTagger
    This snippet queries all tags of the tagger group and the tags of the current resource, creates checkboxes for the tags and loads a chunk.
<?php
$group_id = $modx->getOption('group', $scriptProperties, 1);
$tpl = $modx->getOption('tpl', $scriptProperties, 'tplNpTagger');

//Get the ID of the resource that's edited
$resource_id = isset($_POST['np_doc_id']) ? $_POST['np_doc_id'] : 0;

$current_tags = '';
//Query current tags of resource
if ($resource_id > 0){
    $current_tags = $modx->runSnippet("TaggerGetTags",array('resources' => $resource_id, 'groups' => $group_id, 'rowTpl' => '@INLINE [[+tag]]', 'separator' => ',' , 'showUnpublished' => true));
}
$current_tags_arr = explode(",", $current_tags);
$current_tags_arr = array_map('trim', $current_tags_arr);

//Query all the tags of the group
$all_tags = $modx->runSnippet("TaggerGetTags",array('groups' => $group_id, 'rowTpl' => '@INLINE [[+tag]]', 'separator' => ',' , 'showUnused' => true , 'showUnpublished' => true));
$all_tags_arr = explode(",", $all_tags);
$all_tags_arr = array_map('trim', $all_tags_arr);

//Create the html-code for the checkboxes
$checkboxes = '';
foreach($all_tags_arr as $tag){
    $checked='';
    if (in_array($tag,$current_tags_arr)){
        $checked=' checked';
    }
    $checkboxes .= "<label><input type='checkbox' value='{$tag}'{$checked}>{$tag}</label>";
}

//Get the chunk with the Javascript code
$chunk_params = array('checkboxes' => $checkboxes, 'tags' => implode(',', $current_tags_arr), 'group' => $group_id);
$output = $modx->getChunk($tpl, $chunk_params);
return $output;
  • Add the chunk tplNpTagger
    This chunk contains a <script> tag with some jQuery-code to add the checkboxes and a hidden input field to the form.
    Important: The input field must have the name “tagger-” + group-id (for example “tagger-1” for the tagger group with ID=1), so that the Tagger plugin (on the event “OnDocFormSave”) can do its jobs.
<script>
    $(document).ready(function() {
        //Add the checkboxes
        $("<div id='cb-[[+group]]'>[[+checkboxes]]</div>").appendTo("#newspublisherForm");
        //Add a hidden input field
        $("<input type='hidden' value='[[+tags]]' />")
             .attr("id", "tagger-[[+group]]")
             .attr("name", "tagger-[[+group]]")
             .appendTo("#newspublisherForm");
        
        //Click-handler for checkboxes -> change value in hidden input-field   
        $("#cb-[[+group]] input:checkbox").click(function(e){
            var tags = [];
            $("#cb-[[+group]] input:checkbox").each(function() {
                if ($(this).prop('checked')){
                    tags.push($(this).val());
                }
            });
            $("#tagger-[[+group]]").val(tags.join(","));
        });
    });
</script>
1 Like
3

Wow, thanks! In any case more to it than I expected. Will see, if I cant get it to work somehow. Thanks again for the example code!

4

I didn’t consider the case, when the form validation fails on the server. With the implementation above, changes you made to the selected tags are lost.

So the snippet code needs to be changed, to read the current tag-value from $_POST if available.

...
$current_tags = '';
$input_field_name = 'tagger-' . $group_id;
if (isset($_POST[$input_field_name])){
    //current value from $_POST
    $current_tags = $_POST[$input_field_name];
} elseif ($resource_id > 0){
    //Query current tags of resource
    $current_tags = $modx->runSnippet("TaggerGetTags",array('resources' => $resource_id, 'groups' => $group_id, 'rowTpl' => '@INLINE [[+tag]]', 'separator' => ',' , 'showUnpublished' => true));
}
...
2 Likes
5

I am working on a project where I plan to use NewsPublisher. And I need users to add tags…

Is this still a option?
In a perfect world I would allow users on the front end to add items, with TV’s and Tagger tags.
The tagger dropdown would support type to quickly select availabe tags that match the text.