Children Tags Component for Smartphone

The template part to show the list of tags which is a child of this tag. This part is used in the Tag page.

The desktop browser version is Children Tags.

Appearance

The appearance of children tags part is below.

smart phone child tags

This template part shows the child tags of the current page's tag. In order to calculate the child tags, it uses Keyword Tag's tree structure.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The Html to show the Child Tags is below.


<div id="children-tags" alns:if="{BOOL($size > 0)}">
  <h2>Child Tags</h2>
  <div class="sidetag" alns:iterate="@cms_tag" alns:variable="oneRecord">
    <img src="/tmplp/sp-tags/sp-children-tags/tag_red.png" />
    	<a alns:if="{BOOL($oneRecord.url != null)}" href="{$oneRecord.url}">{$oneRecord.tag_name}</a>
		<span alns:if="{BOOL($oneRecord.url == null)}">{$oneRecord.tag_name}</span>
  </div>
  
  <br style="clear:both;" />
</div>

This Html extracts "@cms_tag" array variable. This html is similar to Smartphone Tag of the Page.

Edit Style Sheet

The Style Sheet for the Html is below.


#children-tags {
  width: 100%;
  margin: 30px 0 30px 0;
}

#children-tags h2 {
  border-bottom: 1px solid #ddd;
  font-family: Georgia,"Times New Roman",Times,serif;
  font-size: 24px;
  width: 100%;
}

#children-tags .sidetag {
  margin: 5px 5px 5px 5px;
  padding: 5px;
  float: left;
  
  background: -moz-linear-gradient(center top , #ffffff 1px, #f3f3f3 1px, #e6e6e6) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  border: 1px solid #b6b6b6 !important;
  box-shadow: 0 1px #efefef !important;
  
  border-radius: 5px; /* CSS3 */
  -webkit-border-radius: 5px; /* Safari,Google Chrome */
  -moz-border-radius: 5px; /* Firefox */
}

#children-tags a{
  color: #21759b;
  font-family: "Open Sans",Helvetica,Arial,"Liberation Sans",sans-serif;
}
#children-tags a:hover{
  color: #dadada; 
}

This style sheet is define the style for the div tag whose id is "#children-tags" and the inner Html elements.

Server Side Program

The server side program to get child tags object from the database is below.


SELECT * INTO cms_tag
FROM
	cms_tag LEFT JOIN tree_model
    ON
    	cms_tag.node_id = tree_model.node_id
WHERE
	tree_model.tree_id = 'tag' AND
	cms_tag.tag_cms_page_id = $IN.cms_page_id;

if($cms_tag[0].page_path != null){
	$likeStr = $cms_tag[0].page_path + "/%";
    $page_depth = $cms_tag[0].page_depth + 1;
}else{
	$likeStr = getSitePath($IN.node_id) + "/%";
    $page_depth = 2;
}

SELECT * INTO cms_tag
FROM
	cms_tag LEFT JOIN tree_model
    ON
    	cms_tag.node_id = tree_model.node_id
WHERE
	tree_model.tree_id = 'tag' AND
    tree_model.page_depth = $page_depth AND
    tree_model.page_path LIKE $likeStr
ORDER BY tree_model.page_path;

$size = Array.size(@cms_tag);
for($i = 0; $i < $size; $i++){
	if($cms_tag[$i].tag_cms_page_id == 0){
    	continue;
    }
	$cms_tag[$i].url = getUrl($cms_tag[$i].tag_cms_page_id);
}

return 0;

function getUrl($cms_page_id)
{
    SELECT tree_model.page_path, tree_model.page_children,
    	cms_page.cms_page_id, cms_page.force_folder
    INTO tree_model
    FROM
        tree_model LEFT JOIN cms_page
        ON
            tree_model.node_id = cms_page.node_id
    WHERE
        tree_model.tree_id = 'cms' AND
        cms_page.cms_page_id = $cms_page_id;
  	
    $idx = String.indexOf($tree_model[0].page_path, "/", 1);
    $len = String.length($tree_model[0].page_path);
    $path = String.subString($tree_model[0].page_path, $idx, $len);
    
    if($tree_model[0].force_folder == 1 || $tree_model[0].page_children > 0){
    	return $path + "/";
    }
    
    return $path + ".html";
}

function getSitePath($node_id)
{
	SELECT * INTO tree_model
    FROM
    	tree_model
    WHERE
    	tree_model.tree_id = 'cms' AND
    	tree_model.node_id = $node_id;
    $idx = String.indexOf($tree_model[0].page_path, "/", 1);
    
    return String.subString($tree_model[0].page_path, 0, $idx);
}

This program does following operations.

Get tag object of current page by SELECT SQL.
Get child tags from database by SELECT SQL.

This part is for pages representing a keyword tag's content. This part is not available in pages which is not Tag Page.