Category: Binders

If your websites features products, a great way to improve the user experience is to provide visitors with a quick way to go back to products that they have recently viewed. As your visitors navigate your e-commerce website, they will probably see many of the products that are featured in the website. If you track the product page, you should be able to display a list of the recently viewed products. The {{woocommerce_recently_viewed_products}} binder allows you to track products and display a list of recently viewed products that will help visitors jump back to a product int the list.

 

/**
 * This binder displays recently viewed products using WooCommerce default cookie.
 *
 * @param {array} $params 
 *            $params['size'] Maximum number of products to be displayed (default: 5)
 *            $params['count'] --Alias for $params['size']
 *            $params['action'] Intended action. Valid values are "track" which will track the product pages or 
 *						"show" which will render a list of recently viewed products.
 *            $params['show_last_first'] Whether or not to show the most recently viewed item at the beginning of the array returned. 
 *            $params['error_message'] HTML string with a message to be display if no items have been viewed yet. 
 *            $params['assign_to'] Variable within the template engine to which the content has to be assigned. 
*/

 

Track

{{woocommerce_recently_viewed_products action="track"}}

 

Display

<section class="container-fluid text-center hot-text hidden-print">
    {{woocommerce_recently_viewed_products size="5" assign_to="recently_viewed"}} 
    {{if count($recently_viewed) > 0}}
    <div class="text-center">
        <p>Recently viewed products</p>
    </div>
    
    <div class="text-center">
        
        {{foreach $recently_viewed as $recent}}
            <a title="{{$recent.post_title}}" class="recent" href="{{$recent.post_permalink}}">  
                <img class="img-responsive" src="{{$recent.post_thumbnail}}" /> 
            </a>
        {{/foreach}}
    </div>
    {{/if}}
</section> 

 

Returns the tags assigned to a post_id. If no ID is provided, this will return all the tags that are not empty.

 

<!--ALL TAGS (NOT EMPTY)-->
{{tags assign_to="tags"}}
<aside class="widget widget_tag_cloud">
    <h3 class="sidebar-title">Tags</h3>
    <div class="tagcloud">
    {{foreach $tags.data as $tag}}
    	<a href="{{$tag.permalink}}" class="tag-{{$tag.slug}}" title="{{$tag.name}}">{{$tag.name}}</a>
    {{/foreach}}
    </div>
</aside>

 

 <!--TAGS FOR AN SINGLE POST-->
 {{tags assign_to="tags" post_id="234"}}
<aside class="widget widget_tag_cloud">
    <h3 class="sidebar-title">Tags</h3>
    <div class="tagcloud">
    {{foreach $tags.data as $tag}}
    	<a href="{{$tag.permalink}}" class="tag-{{$tag.slug}}" title="{{$tag.name}}">{{$tag.name}}</a>
    {{/foreach}}
    </div>
</aside>

 

TODO:

 

/**
 * Outputs a generic privacy policy based on parameters
 *
 * @param {object} $params
 *					$params.company
 *					$params.website
 *					$params.email
 *					$params.dart
 *					$params.cookie
 *					$params.ads
 *					$params.revised
 *					$params.assign_to
 * 
 * @example
 *
 * # Output the default privacy policy (includes cookies support).
 * 
 * {{privacy updated="May 5, 2016"}}
 *
 * 
 * {{privacy company="ACME, LLC" website="http://acme.com" email="info@acme.com" dart="true" cookie="true" ads="true" assign_to="priv" updated="May 5, 2016"}}
 *
 *
 *
 */

 

 

<section>
    <div class="container">
       <div class="row">
            <div class="col-md-12 privacy">
                {{privacy revised="Sept 5, 2016"}}
            </div>
        </div>
    </div> 
</section>

 

TODO:

/**
 * Outputs social media button
 *
 * @param $params
 * 			$params['assign_to']
 * 			$params['networks'] (valid values: twitter, facebook, google, linkedin)... default: 'twitter,facebook,google'
 * 			$params['url']
 * 			$params['class']
 * 			$params['style'] (e.g. default, arbenta, metal, pagepeel, plain, retro, ribbons, simple, somacro)
 *
 * @example 
 *
 * {{share networks="facebook,twitter" class="btn-group" url="http://domain.com/my-page/" style="retro"}}
 */

 

The above code will generate HTML code similar to:

 

<ul class="appc-share btn-group">
    <li class="appc-share-item">
        <a href="http://www.facebook.com/sharer.php?u=http://domain.com/my-page/" title="Share on facebook" target="_blank">
          <img src="http://builder.appcropolis.com/resources/images/share/buttons/simple/facebook.png" alt="Share on facebook" class="appc-share-image"></a>
    </li>
    <li class="appc-share-item">
        <a href="http://twitter.com/share?url=http://domain.com/my-page/" title="Share on twitter" target="_blank">
          <img src="http://builder.appcropolis.com/resources/images/share/buttons/simple/twitter.png" alt="Share on twitter" class="appc-share-image"></a>
    </li>
    <li class="appc-share-item">
        <a href="https://plus.google.com/share?url=http://domain.com/my-page/" title="Share on google" target="_blank">
          <img src="http://builder.appcropolis.com/resources/images/share/buttons/simple/google.png" alt="Share on google" class="appc-share-image"></a>
    </li>
    <li class="appc-share-item">
        <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://domain.com/my-page/" title="Share on linkedin" target="_blank">
          <img src="http://builder.appcropolis.com/resources/images/share/buttons/simple/linkedin.png" alt="Share on linkedin" class="appc-share-image"></a>
    </li>
</ul>

 

TODO

 

/**
 * Retrive a list of related posts. This binder requires the 
 * BAW Manual Related Posts plugin to be instaled in the blog.
 *
 * @param {object} $params
 * 				$params['post_id'] (optional, uses current post ID if nor post_id is provided)
 * 				$params['assign_to'] (optional, uses "related" as the name of the variable to which data is assigned).
 *
 * @example
 *
 * {{related post_id="23" assign_to="rel_posts"}}
 * 
 * <ul>
 * 	{{foreach $rel_posts.data as $item}}
 * 		<li>{{$item.post_title}}</li>
 * 	{{foreachelse}}
 * 		<p>No related posts.</p>
 * 	{{/foreach}}
 * </ul>
 *
 * @see https://wordpress.org/plugins/baw-manual-related-posts/
 *
 */

 

Example:

<ul class="appc-dynamic" id="appc-related">      
{{related post_id="{{$post.ID}}" assign_to="rel_posts"}}
{{foreach $rel_posts.data as $item}}
    <li>
        <div class="popular-post-img">
            <a href="{{$item.post_permalink}}"> <img src="{{$item.post_thumbnail}}" alt="{{$item.post_title}}"></a>
        </div>
        <div class="popular-post-content">
            {{post show="categories" assign_to="item_categories" post_id="{{$item.ID}}"}}
            <div class="post-category">
                
                {{if $item_categories.data[0]}} 
                <a href="{{$item_categories.data[0].cat_permalink}}" class="cat-item-{{$item_categories.data[0].cat_ID}}" rel="category tag" title="{{$cat.name}}">{{$item_categories.data[0].name}}</a>
                {{/if}}
            </div>
            <h4><a href="{{$item.post_permalink}}" rel="category tag">{{$item.post_title}}</a></h4>
            <span>{{date when="{{$post.post_date}}" format="F j, Y"}}</span>
        </div>
    </li>
{{foreachelse}}
 	<p>No related posts.</p>
{{/foreach}}
</ul>

 

If you are looking for a quick way to assign JSON data to your WordPress page or post, the {{JSON..}} binder is the way to go. This binder allows you to define an arbitrary data source that can be bounded to you page and utilizes when rendering your page.

Motivation

While building your page template, you may want to link your design to dynamic data that you might not have at the time that you are writing the code. The {{JSON.. }} binder acts as temporary data source that later on be replaced with the dynamic data that you truly want to use.

 

Parameters

source

(string) (required*) The name of the internal JSON source file.
Default: none

assign_to

(string) (required*) The name of the object to which you wish to bind the data output.
Default: none

 

Return

This binder returns the JSON string as an object.

 

Basic Usage

{{json assign_to="my_info"}}
    {"name": "Raul", "role": "CEO", "favorite_number": 60}
{{/json}}

<div>
    <h1>{{$my_info.name}}, <i>{{$my_info.role}}</i></h1>
    <small>{{$my_info.favorite_number}}</small>	
</div>

Examples

Consider a scenario where you wish to show a list of  “Projects“. You may choose to  create a custom post type in WordPress to manage your projects, or you might prefer to create a post category to achieve the same results. Thank to the {{JSON.. }} binder you can build your template with temporary data, and later on assign the data source that fits your needs.

{{json assign_to="projects"}}
{
    "data": [
        {"name": "Logo Design", "client": "ACME, LLC"},
        {"name": "Landing Page", "client": "Non Profit Organization"},
        {"name": "Analytics Integration", "client": "Internal"}
    ]
}
{{/json}}

<ul>
{{foreach $projects.data as $single_project}}
    <li>
        <h2>{{$single_project.name}}</h2>
        <p>{{$single_project.client}}</p>
    </li>
{{/foreach}}
</ul>

 

Later on, once you determine what is the best way to manage your projects in WordPress, you can replace the {{JSON… }} binder with a different one that uses dynamic data:

{{posts show="category" name="my-projects-category-slug" assign_to="projects"}}

<ul>
{{foreach $projects.data as $single_project}}
    <li>
        <h2>{{$single_project.name}}</h2>
        <p>{{$single_project.client}}</p>
    </li>
{{/foreach}}
</ul>

 

Using An Internal JSON File

You can also use internal JSON files to model your project. An internal JSON file is a predefined JSON file that can be include into your project, so you do not have to create content in WordPress while building your pages.

{{json source="me" assign_to="profile"}}{{/json}}
<!-- see: http://builder.simplifysites.com/resources/data/me.js -->

<div>
	<h1>{{$profile.first_name}} {{$profile.last_name}}</h1>
	<p>{{$profile.website}}<br/>
	   {{$profile.twitter}}</p>	
</div>