Cache settings for Arrays of content elements

Using Neos & Flow
1

Hi,

On my website project I use an dedicated Page for an list of Products with the following prototype.

prototype(Site:Product) < prototype(TYPO3.Neos:Content) {
    templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/Product.html'
    headline = ${q(node).property('headline')}
    style = ${q(node).property('style')}
    text = ${q(node).property('text')}
    image = ${q(node).property('image')}
}

To generate different views of those product elements i use this prototype to generate an array of product’s from the dedicated page.

prototype(Site:ProductList) < prototype(TYPO3.Neos:Content) {
    templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/ProductList.html'
    productsArray = ${q(site).children('[uriPathSegment="produkte"]').children('main').children('[instanceof Site:Product]')}
     @cache {
        mode = 'uncached'
        context {
            1 = 'site'
            2 = 'node'
            3 = 'documentNode'
        }
    }
}

However to reflect changes on the dedicated product page (reorder products, change element attributes), the only way I got it working is by disabling caching for the productList prototype completely.
How can i define caching so the productList element get’s cached and updated only if the order of products or the prodcts themselves change on the dedicated product page?

Thanks in advance,
Achim

2

Hi @achim71,

for Caching check the documentation here:
http://neos.readthedocs.org/en/stable/CreatingASite/ContentCache.html

What you should do is to not render all products in a single TS Object. Instead render a list of Type ContentCollection like this:

prototype(Site:ProductList) < prototype(TYPO3.TypoScript:Collection) {
    collection = ${q(site).children('[uriPathSegment="produkte"]').children('main').children('[instanceof Site:Product]')}
    itemRenderer = Site:ProductListItem
    itemName = 'node'
}

prototype(Site:ProductListItem) < prototype(TYPO3.TypoScript:Template) {
    templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/ProductListItem.html'
    
    headline = ${q(node).property('headline')}
    style = ${q(node).property('style')}
    text = ${q(node).property('text')}
    image = ${q(node).property('image')}

    @cache {
        mode = 'cached'
	entryIdentifier {
	    node = ${node}
	}
	entryTags {
	    1 = ${'Node_' + node.identifier}
        }
    }
}

This reads like the following:
Your Site:ProductList is a collection if products. The products itself are stored in the path collection. When you render your List on the template with each item in collection will be rendered in TS object of Type Site:ProductListItem. The Site:ProductListItem will be cahced for each node. So every item in your list has it’s own cache and will be flushed if the product is changed (entryIdentifier). So if just one product is changed only that list item will be flushed, not the full list.

Didn’t tested the code, just wrote it down but i hope you get the idea.

1 Like
3

Hello Johannes,

Thank you for the example, I 've been looking into the Carousel prototype from the demo site but did not understand how to implement the itemRenderer. Your example is easier to understand.

Update: I need three different views of the product list so i ended up with this:

prototype(Site:Product) < prototype(TYPO3.Neos:Content) {
    templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/Product.html'
    headline = ${q(node).property('headline')}
    style = ${q(node).property('style')}
    text = ${q(node).property('text')}
    image = ${q(node).property('image')}
}

prototype(Site:ProductItem) < prototype(Site:Product) {
    identifier = ${node.identifier}
    isFirst = ${productItemsIteration.isFirst}
    @cache {
        mode = 'cached'
    entryIdentifier {
        node = ${node}
    }
    entryTags {
        1 = ${'Node_' + node.identifier}
        }
    }
}

prototype(Site:ProductListItems) < prototype(TYPO3.TypoScript:Collection) {
    collection = ${q(site).children('[uriPathSegment="produkte"]').children('main').children('[instanceof Site:Product]')}
    itemRenderer = Site:ProductItem
    itemName = 'node'
    iterationName = 'productItemsIteration'
}

prototype(Site:ProductList) < prototype(TYPO3.Neos:Content) {
    templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/ProductList.html'
    productThumbnailListItems = Site:ProductListItems {
        itemRenderer.templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/ProductThumbnailListItem.html'
    }
    productAccordeonListItems = Site:ProductListItems {
        itemRenderer.templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/ProductAccordeonListItem.html'
    }
    productModalListItems = Site:ProductListItems {
        itemRenderer.templatePath = 'resource://Site/Private/Templates/TypoScriptObjects/ProductModalListItem.html'
    }
}
4

Why do you put @cache on Site:ProductListItem and not on Site:ProductList? Is it faster this way?