Anatomy Of A Web Page

A basic builder web page is not any different from the pages that you are used to build. In a standard HTML page you will need to include the jQuery and Bootstrap libraries. Additionally, you may want to include FontAwesome icon library if you wish to take advantage of hundreds of free icons that accessible from the Builder interface.

Basic Page Anatomy

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page</title>
        <!-- style -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="{{resources}}/css/my-page.css" rel="stylesheet">
    </head>
    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        <!-- scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script type="text/javascript" src="{{resources}}/js/my-page.js"></script>
    </body>
</html>

 

In the previous example I chose to include jQuery and Bootstrap from their CDN respective location. Also notice that I am including a CSS and Javascript files name my-page.css and my-page.js respectively. This assumes that you have such files in your project resources files.  The example below, is the complete code generated by the builder:

 

Default Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{wp_title}}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {{wp_head}}
        <!-- style -->
        <link href="{{builder_resources}}/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="{{builder_resources}}/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="{{resources}}/css/{{$post.post_name}}.css{{random before='?rand='}}" rel="stylesheet">
    </head>

    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        <!-- scripts -->
        <script type="text/javascript" src="{{builder_resources}}/vendors/jquery/jquery-1.10.2.min.js"></script>
        {{wp_footer}}
        <script src="{{builder_resources}}/vendors/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="{{resources}}/js/{{$post.post_name}}.js{{random before='?rand='}}"></script>
    </body>
</html>

 

Super Simple

You can let the builder create all the necessary page code and include Javascript and CSS dependancies by using this code:

<!DOCTYPE html>
<html lang="en">
    <head>
        {{header}}{{/header}}
    </head>
    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        {{footer}}{{/footer}}
    </body>
</html>

 

Binders: privacy

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>

 

How To Get A List Of Woocommerce Product Categories

It is very easy to get a list of all Woocommerce Product Categories. To add this list to your project, try:

 

{{products show="categories" assign_to="categories"}}
 
<h3 class="sidebar-title">Product Categories </h3>
<ul class="product-categories">
    {{foreach $categories.data as $cat}}
    <li class="cat-item cat-item-{{$cat.term_id}} cat-item-{{$cat.slug}}">
        <a href="{{$cat.permalink}}">{{$cat.name}}</a>
    </li>
    {{/foreach}}  
</ul>

 

How To Get A List Of Woocommerce Featured Products

If you are using Woocommerce to promote and sell products, you can easily mark some of the products as featured, directly from the product list (All Products page). To display a list of featured products in your project just try:

 

<ul class="products">
    {{products show="featured" size="4" assign_to="featured_products"}}

    {{foreach $featured_products.data as $product}}
    <li class="col-md-3">
        <article class="product">
            <a href="{{$product.post_permalink}}">
                <!-- add "on sale" badge -->
                {{if $product.on_sale}}<span class="onsale">Sale!</span>{{/if}}
                <img src="{{$product.post_thumbnail}}" class="" alt="{{$product.post_title}}" />
				<h4 class="" >
                    <span class="product_name">
                    {{$product.post_title}}
                    </span>
                    
                    <span class="price pull-right">
                        {{if $product.on_sale}}<i class="reg-price">${{$product.regular_price}} </i>{{/if}}
                        <span class="amount">${{$product.price}}</span>
                    </span> 
                </h4>
            </a>
        </article>
    </li>
    {{/foreach}}
</ul>

 

How To Get The Name Of A Category In A Category Page

Building a category page is very easy. All what you have to do is to create a page and name it “category”. When you access a category page URL, all posts data within that particular will be available without the need of using additional binders.  If you wish to know what is the name of the currently render category page, all what yo need to do is to type this code:

 

<li><strong>{{$wp_query.found_posts}}</strong> results found in the "<strong>{{$queried_object.cat_name}}</strong>" category.</li>

 

The $queried_object contains the current category name, slug, cat_ID, and more.

 

array(16) {
    ["term_id"]=>
    &int(87)
    ["name"]=>
    &string(8) "Business"
    ["slug"]=>
    &string(8) "business"
    ["term_group"]=>
    int(0)
    ["term_taxonomy_id"]=>
    int(91)
    ["taxonomy"]=>
    string(8) "category"
    ["description"]=>
    &string(0) ""
    ["parent"]=>
    &int(86)
    ["count"]=>
    &int(37)
    ["filter"]=>
    string(3) "raw"
    ["cat_ID"]=>
    &int(87)
    ["category_count"]=>
    &int(37)
    ["category_description"]=>
    &string(0) ""
    ["cat_name"]=>
    &string(8) "Business"
    ["category_nicename"]=>
    &string(8) "business"
    ["category_parent"]=>
    &int(86)
}

 

How To Get The Total Number Of Posts In A WordPress Search Results Page

As you probably know your search result page already has a list of posts that were found. That means that you do not need to include any additional binder to the posts data. If you wish to know what is the total number of post that were found for a particular search term, in you search page you can include the following code:

 

<p><strong>{{$wp_query.found_posts}}</strong> results found for "<strong>{{$smarty.get.s}}</strong>"</p>

 

The previous code shows how to access the $wp_query object to get the total number of posts found. You can also access the last search term directly from the global $smarty object ($smarty.get.s).