Hello,
Caching is causing me a problem as follow:
I currently build a website containing blog-like pages. Those pages present lists of "blocks", each corresponding to a document ressource. Using the principles explained in the god’s sent "Creating a Blog in MODx Revolution" tutorial by Shaun McCormick. So far so good.
Where things start to hurt is that I would like to have the number of displayed "blocks" corresponding to the visitor’s available screen space. So the "&limit" parameter of the "getResourcesTag" call must be dynamically generated at page load, it has to be achieved using javascript as the window size has to be captured and computed.
I built a solution that I though would work which is as follow:
I have a general template for the "blog" pages:
[[$pageHeader]]
<div id="content_header">
<div class="left">
<h1>[[*longtitle]]</h1>
<p>[[*introtext]]</p>
</div>
<div class="right corners shadow">
[[tagsHighlighter]]
[[!tagLister? &tv=`tags` &limit=`1000` &sortBy=`tag` &target=`1` &tpl=`tagsLink` &outputSeparator=`, `]]
</div>
<br class="clear" />
</div>
<div id="boxes">
[[*content]]
<br class="clear" />
</div>
[[$pageFooter]]
Then each "blog category" has the following content:
[[!listSizeCookie]]
[[!+list_size]] <!-- for debugging purpose only -->
<ul>
[[!getResourcesTag?
&element=`getResources`
&elementClass=`modSnippet`
&tpl=`listBlock`
&hideContainers=`1`
&parents=`[[*id]]`
&limit=`[[!+list_size]]`
&includeTVs=`1`
&includeContent=`1`
&pageVarKey=`page`
]]
</ul>
In the "listSizeCookie" snippet I have the following code (still very rhough but functionnal):
<?php
// inject js script in head
$modx->regClientStartupScript('assets/libs/browser_size.js');
// get default value
$default = $modx->getOption('default',$scriptProperties,1);
// recover cookie stored value or default
$output = isset($_COOKIE['list_size']) ? $_COOKIE['list_size'] : $default;
// define placeholder
$modx->setPlaceholder('list_size', $output);
Finally the JS code (using jQuery) that resides in the "browser_size.js" file (truncated here to only show the relevant operations):
/**
* get list area dimensions
* calculate the optimum list size
* store the value in the list_size cookie
* reload the page if necessary
*/
$(document).ready( manageListSize );
$(window).resize( manageListSize );
// list_size cookie management
function manageListSize() {
var list_size = $.cookie( 'list_size' );
var size = getAreaSize();
var total = size.columns * size.rows;
if ( total == 0 ) {
if ( size.columns > 0 ) {
total = size.columns;
}
else if ( size.rows > 0 ) {
total = size.rows;
}
else {
total = 1;
}
}
if ( list_size != total ) {
$.cookie( 'list_size', total );
self.location.reload();
}
console.log(total);
}
// boxes area size calculation function
function getAreaSize() {
...
}
With all that in place, I got the caching parameter of all my "categories" documents set with:
Cacheable: UNCHECKED
Empty Cache: CHECKED
All seems good as the "debug" placeholder shows the expected value and is updated as necessary, the list_size cookie’s value also gets correctly update BUT the number of "blocks" returned by the "getResourcesTag" snippet is never updated... until I manually empty the site’s cache in the manager !?
I must say that I’m stuck as I can’t understand why, calling all snippets uncached and disabling the "category" document’s caching, the system always throws back the same number of items regardless of the ulterior cookie value.
Any help would be appreciated, sincerely.
Regards
