How to Include a collections custom renderer file

Hello there,

I have two questions about to include a custom renderer:

  1. I tried to display a certain value from a tv-list* in a Collections view of a child resource. In this case it is the value of the capacity of a product. But instead of the value, the ID of the resource (911) that has the value in the pagetitle is displayed.

*The values of my tv-list are called as follows:
@SELECT "" AS pagetitle, 0 AS idUNION ALL SELECTpagetitle,idFROM[[+PREFIX]]site_contentWHEREparent= 34 ORDER BY pagetitle ASC

To display the value of the litre (FĂĽllmenge) in my ressource, I added a custom.render:

and I have modified the following file (just as a test).

assets/components/collections/js/mgr/extra/collections.renderers.js

In this file I added this:

// Ext.XTemplate for capacity
var capacity = new Ext.XTemplate('<tpl for="."><div class="collections-capacity-column parent_id_{parent.id}">'
    + '<span class="capacity">{tv_capacity}</span>'
    + '</div></tpl>', {
    compiled: true
});

// collections.renderer for capacity
collections.renderer.capacity = function(value, metaData, record, rowIndex, colIndex, store) {
    var data = JSON.parse(JSON.stringify(record.data));
    data.self = this;
    return capacity.apply(data);
};

// Backwards compatibility
Collections.renderer = {
	...
	capacity: collections.renderer.capacity
};

My question is now, how do I have to change my Ext.XTemplate that way that the selected value of the child ressource is displayed as pagetitle instead of the ID?


  1. Of course, I don’t really want to modify the original file mentioned above at the end. Therefore I tried to include two custom files in the system settings, but that does not work. I have specified two file paths in the system settings under Collections to include my files.
    a) A collections.user_css: custom.renderers.css
    b) a collections.user_js: custom.renderers.js.

Is the base path possibly wrong, or does the file need to be placed in a specific location and just tha name need to specify?

Many thanks in advance!

Although I’m not sure I understand the situation correctly (why is the “Füllmenge” stored in a pagetitle?),
I suspect you have to use a “Snippet Renderer” instead of “Renderer”.

A “Snippet Renderer” executes PHP and runs on the server, a “Renderer” is written in Javascript and runs on the client. As you probably have to query the “Füllmenge” value from another resource, you have to do this in PHP.

I believe you can use placeholders like {assets_url} in the system setting collections.user_js.

{assets_url}my_custom_renderer_file.js
1 Like

You are right. Those path placeholder are replaced in every system setting, that is retrieved with $modx->getOption. And almost every extra uses that method to retrieve system settings.

I list the different filling volume and other categories of the products with resources instead of MIGx. With MIGx the loading of the products was much slower as now. Sometimes it took up to 9 seconds for the page to load.
And to make it as easy as possible for my editor to maintain and sort the fill quantities himself, I use Collection, just like with the products.
It looks like this:

and in this way, he can select the value he wants to assign to his products from a list box.

My editor wished to be able to see the price and the filling quantity already in the overview.
With the TV for the prices it worked with the renderer, but not with the selectbox for the filling quantity (FĂĽllmenge: Liters and grams)
I guess I’ll have to figure out now how to do that with the “Snippet Renderer”.

Thank you for this hint!

I believe you can use placeholders like {assets_url} in the system setting collections.user_js.

You were right about this.

{assets_url}/plugins/collections/js/my_custom_renderer_file.js

or with *.css works great.

But when I tried this with the image path:

{assets_url}images/

I had two " // " in the url and the images were not loaded.

//assets/images/...

So I think that is because of that what @jako wrote before, right?

A resource just to store a filling volume seems like an overkill to me.
You could probably use Tagger for this purpose.


Something like this may work:

<?php
$value = (int) $modx->getOption('value', $scriptProperties, 0); //the value of the column -> resource-id
if ($value){
    //query the pagetitle of the resource
    $query = $modx->newQuery('modResource', ['id' => $value]);
    $query->select('pagetitle');
    return $modx->getValue($query->prepare());
}
return '';

You may certainly be right about that, but I also use this resource to get other information out of it - so not just the filling volume. With these and other data I generate the article number at the end. So I thought, that would be the best solution. But I will definitely look at your recommendation!

I thank you for your time and your effort
Ps.: I will try now your script. Thanx a lot!

@halftrainedharry
Something like this may work: …

… by the way, it works like a charm! :slight_smile: I got exactly what I needed

Thanks a lot !