Category: How-to

Using Bootstrap 4 With Simplify 0.2.8

The official release of Bootstrap 4 finally arrived last January 2018. While we get ready to make all our content compatible with the new release, we want to make sure that you do not have to wait. Below, there is an example of the page template source that you should use to allow bootstrap in your Simplify projects.

 

<!doctype html>
<html lang="en">
  <head>
    {{header use_bootstrap="false"}}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    {{/header}}
  </head>
  <body>
    <!-- .appc-page -->
    <div class="appc-page">
        {{blocks}}
    </div><!-- /.appc-page -->
    {{footer use_jquery="false" use_bootstrap="false"}}
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    {{/footer}}
  </body>
</html>

 

Submitting Form As Email

TODO:

HTML Code (full)

real-sender-full

 

<form class="widget-contact-form" action="" role="form" enctype="text/plain" method="get" target="_blank">
    <input type="hidden" name="subject" value="">
    <input type="hidden" name="body" value="">
    <input type="hidden" name="action" value="mailto:beth@interfaithquest.org">
    <div class="row">
        <div class="form-group col-sm-4">
            <label for="name">Name *</label>
            <input type="text" aria-required="true" name="name" class="form-control required name" placeholder="Enter your Name" required>
        </div>
        <div class="form-group col-sm-4">
            <label for="email">Email *</label>
            <input type="email" aria-required="true" name="email" class="form-control required email" placeholder="Enter your Email" required>
        </div>
        <div class="form-group col-sm-4">
            <label for="phone">Phone *</label>
            <input type="text" aria-required="true" name="phone" class="form-control required email" placeholder="Enter your phone number" required>
        </div>
    </div>
    <div class="form-group">
        <label for="message">Message *</label>
        <textarea type="text" name="message" rows="9" class="form-control required" placeholder="Enter your Message" aria-required="true" required></textarea>
    </div>
    <div class="form-group">
        <input type="text" class="hidden" id="widget-contact-form-antispam" name="widget-contact-form-antispam" value="">
        <button class="btn btn-lg btn-interfaith" type="submit" id="form-submit"><i class="fa fa-paper-plane"></i> Send message</button>
    </div>
</form>

 

Small Form

real-sender-small

 

 

<form class="real-sender-email" action="" role="form" enctype="text/plain" method="get" target="_blank">
    <div class="input-group input-group-newsletter">
        <!-- REQUIRED USER INPUT -->
        <input type="email" name="email" class="form-control" placeholder="Enter email..." aria-label="Search for...">
        <!-- NOT NEEDED FOR THIS FORM -->
        <input type="hidden" name="name" value="">
        <input type="hidden" name="phone" value="">
        <input type="hidden" name="message" value="">
        <!-- SET BY SCRIPT -->
        <input type="hidden" name="subject" value="">
        <input type="hidden" name="body" value="">
        <input type="hidden" name="action" value="mailto:support@appcropolis.com">
        <!-- SUBMIT BUTTON -->
        <span class="input-group-btn">
            <button class="btn btn-secondary" type="submit">Notify Me!</button>
        </span>
    </div>
</form>

 

Javascript Code

!(function($, undefined) {
    "use strict";
    var $form = $('.real-sender-email');
    $form.on('submit', function(e) {
        var action  = $form.find('*[name="action"]').val();
        var name  = $form.find('*[name="name"]').val();
        var phone = $form.find('*[name="phone"]').val();
        var messgae  = $form.find('*[name="message"]').val();
        //
        var labelSubject = !!name  && name.length  > 0? 'Message from ' : '';
        var labelPhone   = !!phone && phone.length > 0? 'Phone ' : '';
        var newline = "\r\n";
        // Compose message
        var content =  messgae + newline + newline + labelPhone + phone
        //
        $form.attr('action', action);
        $form.find('*[name="subject"]').val(labelSubject + name);
        $form.find('*[name="body"]').val(content);
        
        setTimeout(function() {
            $form.find('*[name="name"]').val('');
            $form.find('*[name="phone"]').val('');
            $form.find('*[name="email"]').val('');
            $form.find('*[name="message"]').val('');
        }, 1000);
    });
    
})(jQuery, undefined);

 

Loading External Script

TODO:

 

  window.liveSiteAsyncInit = function() {
    LiveSite.init({
      id : 'WI-EWV1BRSX2QXKDMAKEUKO'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0],
        p = (('https:' == d.location.protocol) ? 'https://' : 'http://'),
        r = Math.floor(new Date().getTime() / 1000000);
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = p + "www.vcita.com/assets/livesite.js?" + r;
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'livesite-jssdk'));

 

How To Get The First Post Category In Post List

TODO:

 

Pulling Post Category Data:

{{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>

 

 

Full Example:

<!--appc-related-->
<ul class="primary-bg appc-dynamic" id="appc-related">
    {{posts show="all" size="4" assign_to="rel_posts"}}
    {{foreach $rel_posts.data as $item}}
        <li>
            <div class="popular-post-img">
                <a href="#"> <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}}">{{$item.post_title}}</a></h4>
                <span>{{date when="{{$post.post_date}}" format="F j, Y"}}</span>
            </div>
        </li>
    {{foreachelse}}
     	<p>No posts.</p>
    {{/foreach}}
</ul><!--./appc-related-->

 

How to Get A List Of Related Posts

TODO:

 

<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>