Forum Discussion

keithkelly's avatar
keithkelly
Leader
10 months ago

Can I cache a component based on **parameter** ?

I have a component: 

 

<component id="example-component" category="foo"/>
<component id="example-component" category="bar"/>
<component id="example-component" category="baz"/>

 

 

and I'd like to cache it. 

 

<!-- Cache for 60 seconds -->
<@liaMarkupCache ttl="60000" variation="node" anonymousOnly="false" />

<!-- Display different HTML based on parameter.  Example: -->
<#assign category_val = env.context.component.getParameter("category")!"" />
<div>${category_val}</div>

 

 

But, this results in:

 

foo
foo
foo

 

 

But I'd like:

 

foo
bar
baz

 

 

It looks like Custom Variations may scratch the itch, but I'm having trouble wrapping my head around

${componentCacheSupport.setCacheVariation("user_id_var", user.id)}

 

Before I go splitting this component up into example_component_foo, example_component_bar, example_component_baz... is there an easier way to cache this?   I'd greatly appreciate any tips or pointers!

  • Claudius's avatar
    Claudius
    9 months ago

    Yes, the calls to setCacheVariations are at the wrong place as far as I understand the doc (Big caveat: I never used it myself, so just interpreting the docs). They state:

    When you create custom variations of the markup cache:

    • Create a wrapper component
    • Define all variations in the wrapper component using componentCacheSupport
    • Call the child component to be cached from within the wrapper component using the component directive

    So you actually need two components:

    1. The wrapper component which sets the cache variation context object by calling something like the following (if you only include this component on a category page as in that case the node's id is the category id. If you want to include the component elsewhere you first need to Get ID of current category )

     

     ${componentCacheSupport.setCacheVariation("category_var", coreNode.id)}​

     

    • Your actual component which gets cached and which just refers to that variation as you already have it shared in your

     

    <@liaMarkupCache​>

     

    🤞

  • Claudius's avatar
    Claudius
    Boss
    10 months ago

    I would try it using the Custom variations. Define your custom category variation variable in the component that will be including your to-be-cached component via

     

    ${componentCacheSupport.setCacheVariation("category_var", category_val)}

     

    ....then refer to that as variation variable in your cache directive like:

     

    <@liaMarkupCache ttl="60000" variation="category_var" anonymousOnly="false" />

     

    • keithkelly's avatar
      keithkelly
      Leader
      9 months ago

      Thanks for taking the time to reply.

      I tried that last night and this morning after your message, but I probably tried wrongly.  Perhaps I'm putting one of the bits in the wrong place?

      Additional context:

      <#if !user.anonymous>  
  <@liaMarkupCache ttl="30000" variation="category_var" anonymousOnly="false" />

  <#assign category_val = env.context.component.getParameter("category")!"" />

  <#-- If category was passed in via param -->
  <#if category_val != ""> 
    ${componentCacheSupport.setCacheVariation("category_var", category_val)}
    
    <div class="dc-cats-boards">
      (do stuff)
    </div>   

  </#if>
</#if>

       

      Are those two cache lines in the wrong places?

      • Claudius's avatar
        Claudius
        Boss
        9 months ago

        Yes, the calls to setCacheVariations are at the wrong place as far as I understand the doc (Big caveat: I never used it myself, so just interpreting the docs). They state:

        When you create custom variations of the markup cache:

        • Create a wrapper component
        • Define all variations in the wrapper component using componentCacheSupport
        • Call the child component to be cached from within the wrapper component using the component directive

        So you actually need two components:

        1. The wrapper component which sets the cache variation context object by calling something like the following (if you only include this component on a category page as in that case the node's id is the category id. If you want to include the component elsewhere you first need to Get ID of current category )

         

         ${componentCacheSupport.setCacheVariation("category_var", coreNode.id)}​

         

        • Your actual component which gets cached and which just refers to that variation as you already have it shared in your

         

        <@liaMarkupCache​>

         

        🤞

  • keithkelly's avatar
    keithkelly
    Leader
    9 months ago

    Ahh ok,

     

    So in the wrapper component, define all variations like:

    ${componentCacheSupport.setCacheVariation("category_var", "foo")}​
${componentCacheSupport.setCacheVariation("category_var", "bar")}​
${componentCacheSupport.setCacheVariation("category_var", "baz")}​

     

    Then in the inner component, effectively:

    Component 1: 
<@liaMarkupCache ttl="60000" variation="foo" anonymousOnly="false" />

Component 2:
<@liaMarkupCache ttl="60000" variation="bar" anonymousOnly="false" />

Component 3:
<@liaMarkupCache ttl="60000" variation="baz" anonymousOnly="false" />

     

    Am I on a better or worse train of thought?

    • Claudius's avatar
      Claudius
      Boss
      9 months ago

      Wrapper component is fine, but for the inner component: There doesn't need to be different components with adjusted caching code. Use the same component for all variations, but you will be passing the variation variable name (not the actual variation name) as a parameter for the markup cache function. E.g. use this for the inner component cache

       

       

      <@liaMarkupCache ttl="60000" variation="category_var" anonymousOnly="false" />