Create TV-Based Chunks

From MODx Wiki

Jump to: navigation, search

Contents

So you have this one section of your page - an advertisement for a party, let's say - that you want to be able to plug in anywhere else in the rest of your site. You'd use a chunk, right?

Now suppose you wanted that chunk outside of your content area, or you wanted a list of chunks to choose from and then output a variable number? You'd be in a pickle then, because you'd either have to create some sort of hack to make sure the chunk loads only when on certain pages, or create different templates for different sections...wait a minute, this sounds like a Template Variable issue!

TVs are the perfect solution, and this tutorial will show you how to incorporate TVs with your chunks to allow you to have the ability to "plug in" chunks anywhere on any page, at any time, as easy as checking checkboxes. Here's how to do it in 5 steps.

  1. Create the Chunks in question using the Manage Resources Section
  2. Copy these simple snippets to your MODx website
  3. Create a TV to manage your chunks
  4. Add the snippet to your desired templates
  5. Set the values of the TV in your document.

Create Some Chunks

Enlarge
Let's start by creating a few chunks, and puttting them into a category. Our demo has 2 chunks in a category called 'Leftchunks' as seen in the picture on the right. This is very open-ended as you can put anything you want in to these chunks.

Create The Snippets

Even though you may have thought this was a tutorial about Chunks and Template Variables, the key functionality here comes from PHP Snippets. Two snippets are the core of this tutorial. One snippet retrieves the names of the chunks for selection in the TV which will be defined later, and the other to output the selected chunks to the document.

Get Chunks Snippet

You'll first need a way of grabbing all the chunks within a certain category - a category which will basically be all the chunks you want to have "insertable" within a given spot. Go to the Resources->Snippets and create a new one. Call it 'getChunks', and insert this code:

  1. <?php
  2. $q_chunks = $modx->db->query('
  3. SELECT
  4. chunk.*
  5. FROM '.$modx->getFullTableName('site_htmlsnippets').' AS chunk
  6. INNER JOIN '.$modx->getFullTableName('categories').' AS category
  7. ON chunk.category = category.id
  8. WHERE
  9. category.category IN ("'.$category.'")
  10. ORDER BY
  11. name
  12. ');
  13.  
  14. $ar_chunks = array();
  15. while ($row = $modx->db->getRow($q_chunks)) {
  16. $ar_chunks[] = $row['name'];
  17. }
  18.  
  19. $l_chunks = implode("||",$ar_chunks);
  20. return $l_chunks;
  21. ?>

Chunk List Parser

Now you'll need to create a snippet that parses the chunk list and outputs them to the screen. Call it 'chunkListParser'. Insert the code:

  1. <?php
  2. $ar_chunks = split(',',$chunks);
  3. $ar_chunks = array_unique($ar_chunks);
  4.  
  5. $output = '';
  6.  
  7. foreach ($ar_chunks as $chunk) {
  8. if ($chunk != '') {
  9. $c = $modx->getChunk($chunk);
  10. if ($c) $output .= $c;
  11. }
  12. }
  13.  
  14. if ($output != '' && isset($wrapperdiv)) {
  15. $output = '<div id="'.$wrapperdiv.'">'.$output.'</div>';
  16. }
  17.  
  18. return $output;
  19. ?>

Create the Template Variable

Excellent! Now let's create the TV that will be accessible to each page. Create a TV of whatever name (we called it 'leftChunks') and then select the Check Box input type. (Alternately, you can do radio or other types if you only want one chunk at a time selectable.)

Next, in Input Option Values, put this: (this is crucial!)

@EVAL return $modx->runSnippet('getChunks',array('category'=>'LeftChunks'));

Change LeftChunks to whatever you name the Chunk category to, or you can also select from multiple chunk categories by separating their names with commas.

Next, select the Delimited List Widget, and make sure that a comma is the Delimiter. Also, make sure that your template has access to the TV. It should look somewhat like this:

Image:chunktv-step4.gif

Add the Snippet/TV into the Template

Next, add this code into your template, where you want the chunks to output to. There is also an optional parameter called wrapperdiv that will wrap all the chunks with a div with the specified ID. (i.e., our example wraps the chunks with a div with id left.

[!chunkListParser?chunks=`[*leftChunks*]` &wrapperdiv=`left`!]

Set the Values in Your Document

Enlarge
Now open any document that has access to that TV, and scroll down and check the chunks you'd like to have inserted, and viola! Dynamic chunks!

Credits

Personal tools