HAPI Sample - Blog Page

Build a custom page for your blog and viewing your blog to emphasize and highlight your brand.


Did you know you can replace /blog with your own custom page running HAPI?  Yep, by simply creating a new page and then setting the marketing keyword to blog it will automatically switch to your template. 

Here's a sample blog that takes all your main categories, shows the articles in sliders and then puts the sub category links below it.

<div class="ui-update" data-pv-component="text" data-pv-conditional="{@q:category_no@} !=">
  <section class="tier tier_topOffset hidden-print">
    <div class="wrapper">
      <section class="component">
        <div class="component-content">
          <div class="box">
            <div class="box-bd box-bd_inflated mix-box_outlined_success">
              <div class="split split_basisRight split_collapseOnMobile">
                <div class="vr">
                  <h3 class="hdg hdg_6 mix-hdg_success">Check Out More Articles</h3>
                  <p class="txt">You're in a specific category at the moment, when you're done, there are more articles to view.</p>
                </div>
                <div>
                  <a class="btn" href="/blog">Browse Articles</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </section>
</div>
<div>
  <section data-pv-component="content" data-pv-parameters="{flag: 'featured', render: true, returnTotal: 1}" data-pv-type="list" id="features_image-left_white">
    <picture><!-- small -->
     <source srcset=""> <!-- medium -->
     <source srcset=""> <!-- large -->
     <source srcset=""> <!-- default -->
     <img alt="HAPI Sample - Blog Page Blog Image" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png"></picture>
    <div class="text-container">
      <h3 data-pv-element="page_title">Blog Title...</h3>
      <p data-pv-element="text_preview">Blog Article...</p><a href="/blog/30678">Read Article</a>
    </div>
  </section>
</div>
<div class="pv-tier" data-pv-snippet="container">
  <div class="pv-wrapper" data-pv-component="content" data-pv-snippet="row" data-pv-type="page">
    <div class="pv-grid-col pv-grid-col_12of12" data-pv-snippet="column">
      <section class="heading_3-card-rotator" data-pv-component="categories" data-pv-parameters="{reference_type: 'page', onlyshowMain: true, onlyshowPublic: true, sort_by: 'order_no'}" id="category-3321">
        <header>
          <h2><span data-pv-element="category_name">Help Tutorials</span> Articles</h2>
          <p data-pv-element="category_description">Find more ways to grow on PeopleVine.</p>
        </header>
        <div class="slider slider-3321">
          <div class="card" data-pv-component="content" data-pv-noresultshide="#category-3321" data-pv-parameters="{page_type:'blog',returnTotal:'15',category_no:3321, sortby: 'posted_on', includeSubCategories: true}" data-pv-type="list">
            <a href="/blog/30678"><img alt="HAPI Sample - Blog Page" onerror="imgError(this, 'https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png');" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png"></a>
            <div class="tags">
              <ul class="">
                <li>
                  <a href="/blog?category_no=3321">CMS</a>
                </li>
              </ul>
            </div><a href="/blog/30678">
            <h4 class="title" data-pv-element="page_title">Blog Title</h4></a>
            <p data-pv-element="text_preview">text...</p>
            <h6 class="j-date">Posted <span data-pv-element="posted_on" data-pv-formatter="date(MMMM d, yyyy)">Month 00, 0000</span></h6>
          </div>
        </div><!--Slider Stuff-->
        <script>
                $(document).ready(function() {
                $('section.heading_3-card-rotator > .slider.slider-3321').slick({
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    dots: true,
                    autoplay: true,
                    autoplaySpeed: 5000,
                    arrows: false,
                    responsive: [{
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3
                        }
                    },{
                        breakpoint: 900,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    }, {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }]
                });
                });
        </script>
        <div class="ui-update" data-pv-component="text" data-pv-conditional="{@q:category_no@} =" id="additionalTopics-3321" style="padding-top: 20px;">
          <section class="component vr vr_centered vr_x10">
            <h2 class="hdg hdg_5">Additional Topics</h2>
            <ul class="blocks blocks_3to2to1 vr vr_centered">
              <li data-pv-component="categories" data-pv-noresultshide="#additionalTopics-3321" data-pv-parameters="{category_above: 3321}">
                <a class="btn mix-btn_stretch" href="/blog?category_no=3321">CMS</a>
              </li>
            </ul>
          </section>
        </div>
      </section>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js">
      </script>
      <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript">
      </script>
      <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" type="text/css">
      <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet" type="text/css">
    </div>
  </div>
</div>


What you'll find in this code are a few sections.  First, at the top, we will display a link to the main blog, if you are looking at a category.  Then we'll show you the most recent featured blog post, followed by looping through the categories with each article inside.  Lastly, the sub categories are also listed below.

Blog Page
The following code is a sample HAPI page for display a blog page.  You can replace the blog page by setting the marketing keyword to blog_view.

<div class="pv-tier" data-pv-snippet="container">
  <div class="pv-wrapper" data-pv-component="content" data-pv-snippet="row" data-pv-type="page">
    <div class="pv-grid-col pv-grid-col_12of12" data-pv-snippet="column">
      <div>
        <section class="image-left_text-right ui-update">
          <img class="blogimage" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png">
          <div class="text-container">
            <h2 data-pv-element="page_title">blog title...</h2>
            <p data-pv-element="text_preview">preview text...</p>
          </div>
        </section>
        <section>
          <div class="wrapper">
           

Did you know you can replace /blog with your own custom page running HAPI?  Yep, by simply creating a new page and then setting the marketing keyword to blog it will automatically switch to your template. 

Here's a sample blog that takes all your main categories, shows the articles in sliders and then puts the sub category links below it.

<div class="ui-update" data-pv-component="text" data-pv-conditional="{@q:category_no@} !=">
  <section class="tier tier_topOffset hidden-print">
    <div class="wrapper">
      <section class="component">
        <div class="component-content">
          <div class="box">
            <div class="box-bd box-bd_inflated mix-box_outlined_success">
              <div class="split split_basisRight split_collapseOnMobile">
                <div class="vr">
                  <h3 class="hdg hdg_6 mix-hdg_success">Check Out More Articles</h3>
                  <p class="txt">You're in a specific category at the moment, when you're done, there are more articles to view.</p>
                </div>
                <div>
                  <a class="btn" href="/blog">Browse Articles</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </section>
</div>
<div>
  <section data-pv-component="content" data-pv-parameters="{flag: 'featured', render: true, returnTotal: 1}" data-pv-type="list" id="features_image-left_white">
    <picture><!-- small -->
     <source srcset=""> <!-- medium -->
     <source srcset=""> <!-- large -->
     <source srcset=""> <!-- default -->
     <img alt="{@page_title@} Blog Image" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png"></picture>
    <div class="text-container">
      <h3 data-pv-element="page_title">Blog Title...</h3>
      <p data-pv-element="text_preview">Blog Article...</p><a href="/blog/30678">Read Article</a>
    </div>
  </section>
</div>
<div class="pv-tier" data-pv-snippet="container">
  <div class="pv-wrapper" data-pv-component="content" data-pv-snippet="row" data-pv-type="page">
    <div class="pv-grid-col pv-grid-col_12of12" data-pv-snippet="column">
      <section class="heading_3-card-rotator" data-pv-component="categories" data-pv-parameters="{reference_type: 'page', onlyshowMain: true, onlyshowPublic: true, sort_by: 'order_no'}" id="category-3321">
        <header>
          <h2><span data-pv-element="category_name">Help Tutorials</span> Articles</h2>
          <p data-pv-element="category_description">Find more ways to grow on PeopleVine.</p>
        </header>
        <div class="slider slider-3321">
          <div class="card" data-pv-component="content" data-pv-noresultshide="#category-3321" data-pv-parameters="{page_type:'blog',returnTotal:'15',category_no:3321, sortby: 'posted_on', includeSubCategories: true}" data-pv-type="list">
            <a href="/blog/30678"><img alt="{@page_title@}" onerror="imgError(this, 'https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png');" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png"></a>
            <div class="tags">
              <ul class="">
                <li>
                  <a href="/blog?category_no=3321">CMS</a>
                </li>
              </ul>
            </div><a href="/blog/30678">
            <h4 class="title" data-pv-element="page_title">Blog Title</h4></a>
            <p data-pv-element="text_preview">text...</p>
            <h6 class="j-date">Posted <span data-pv-element="posted_on" data-pv-formatter="date(MMMM d, yyyy)">Month 00, 0000</span></h6>
          </div>
        </div><!--Slider Stuff-->
        <script>
                $(document).ready(function() {
                $('section.heading_3-card-rotator > .slider.slider-3321').slick({
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    dots: true,
                    autoplay: true,
                    autoplaySpeed: 5000,
                    arrows: false,
                    responsive: [{
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3
                        }
                    },{
                        breakpoint: 900,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    }, {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }]
                });
                });
        </script>
        <div class="ui-update" data-pv-component="text" data-pv-conditional="{@q:category_no@} =" id="additionalTopics-3321" style="padding-top: 20px;">
          <section class="component vr vr_centered vr_x10">
            <h2 class="hdg hdg_5">Additional Topics</h2>
            <ul class="blocks blocks_3to2to1 vr vr_centered">
              <li data-pv-component="categories" data-pv-noresultshide="#additionalTopics-3321" data-pv-parameters="{category_above: 3321}">
                <a class="btn mix-btn_stretch" href="/blog?category_no=3321">CMS</a>
              </li>
            </ul>
          </section>
        </div>
      </section>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js">
      </script>
      <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript">
      </script>
      <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" type="text/css">
      <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet" type="text/css">
    </div>
  </div>
</div>


What you'll find in this code are a few sections.  First, at the top, we will display a link to the main blog, if you are looking at a category.  Then we'll show you the most recent featured blog post, followed by looping through the categories with each article inside.  Lastly, the sub categories are also listed below.

Blog Page
The following code is a sample HAPI page for display a blog page.  You can replace the blog page by setting the marketing keyword to blog_view.

<div class="pv-tier" data-pv-snippet="container">
  <div class="pv-wrapper" data-pv-component="content" data-pv-snippet="row" data-pv-type="page">
    <div class="pv-grid-col pv-grid-col_12of12" data-pv-snippet="column">
      <div>
        <section class="image-left_text-right ui-update">
          <img class="blogimage" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png">
          <div class="text-container">
            <h2 data-pv-element="page_title">blog title...</h2>
            <p data-pv-element="text_preview">preview text...</p>
          </div>
        </section>
        <section>
          <div class="wrapper">
            {@page_content@}
          </div>
        </section>
      </div>
      <section class="heading_3-card-rotator">
        <header>
          <h2>Additional Help Tutorials</h2>
          <p>Find more ways to grow on PeopleVine.</p>
        </header>
        <div class="slider">
          <div class="card" data-pv-component="content" data-pv-parameters="{page_type:'blog',returnTotal:'15',category_no:3321, sortby: 'posted_on', includeSubCategories: true, includeParentCategory: true}" data-pv-type="list">
            <a href="/blog/30678"><img alt="" onerror="imgError(this, 'https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png');" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png"></a>
            <div class="tags">
              <ul class="">
                <li>
                  <a href="/blog?category_no=3321">CMS</a>
                </li>
              </ul>
            </div><a href="/blog/30678">
            <h4 class="title" data-pv-element="page_title">Blog Title</h4></a>
            <p data-pv-element="text_preview">text...</p>
            <h6 class="j-date">Posted <span data-pv-element="posted_on" data-pv-formatter="date(MMMM d, yyyy)">Month 00, 0000</span></h6>
          </div>
        </div><!--Slider Stuff-->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js">
        </script>
        <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript">
        </script>
        <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" type="text/css">
        <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet" type="text/css">
        <script>
        $(document).ready(function() {
        $('section.heading_3-card-rotator > .slider').slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        responsive: [{
            breakpoint: 1200,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },{
            breakpoint: 900,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }, {
            breakpoint: 600,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }]
        });
        });
        </script>
        <div class="ui-update">
          <div class="vr vr_centered vr_x6">
            <ul class="hList">
              <li>
                <a class="btn" href="/blog">View Recent Articles</a>
              </li>
              <li data-pv-component="text" data-pv-conditional="3321 &gt; 0">
                <a class="btn" href="/blog?category_no=3321">View Other Articles in CMS</a>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

This will show you the blog post followed by additional posts in the same or similar category.


          </div>
        </section>
      </div>
      <section class="heading_3-card-rotator">
        <header>
          <h2>Additional Help Tutorials</h2>
          <p>Find more ways to grow on PeopleVine.</p>
        </header>
        <div class="slider">
          <div class="card" data-pv-component="content" data-pv-parameters="{page_type:'blog',returnTotal:'15',category_no:3321, sortby: 'posted_on', includeSubCategories: true, includeParentCategory: true}" data-pv-type="list">
            <a href="/blog/30678"><img alt="" onerror="imgError(this, 'https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png');" src="https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png"></a>
            <div class="tags">
              <ul class="">
                <li>
                  <a href="/blog?category_no=3321">CMS</a>
                </li>
              </ul>
            </div><a href="/blog/30678">
            <h4 class="title" data-pv-element="page_title">Blog Title</h4></a>
            <p data-pv-element="text_preview">text...</p>
            <h6 class="j-date">Posted <span data-pv-element="posted_on" data-pv-formatter="date(MMMM d, yyyy)">Month 00, 0000</span></h6>
          </div>
        </div><!--Slider Stuff-->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js">
        </script>
        <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript">
        </script>
        <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" type="text/css">
        <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet" type="text/css">
        <script>
        $(document).ready(function() {
        $('section.heading_3-card-rotator > .slider').slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        responsive: [{
            breakpoint: 1200,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },{
            breakpoint: 900,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }, {
            breakpoint: 600,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }]
        });
        });
        </script>
        <div class="ui-update">
          <div class="vr vr_centered vr_x6">
            <ul class="hList">
              <li>
                <a class="btn" href="/blog">View Recent Articles</a>
              </li>
              <li data-pv-component="text" data-pv-conditional="3321 &gt; 0">
                <a class="btn" href="/blog?category_no=3321">View Other Articles in CMS</a>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

This will show you the blog post followed by additional posts in the same or similar category.

Additional Help Tutorials

Find more ways to grow on PeopleVine.

Display the total items in your shopping cart in your website header

By using the HAPI variables 0 and $0.00, you can add an always updated value within your website layout.

Posted September 12, 2019

Customize the /login with a Guest Checkout button when they're shopping in eCommerce

If you've customized your login page and are a member focused organization, but want to sell ecommerce merchandise to the public, you can setup a Guest Checkout option by following these steps.

Posted September 12, 2019

PeopleVine Check-In Tools - Featuring Fully Customizable Self-Service Check-In

See the tools available to you when checking in your members and the different data/experiences we can capture. In addition, introducing our new fully customizable self-service check-in.

Posted September 11, 2019

PeopleVine Integrates

Posted September 9, 2019

The Ultimate Guide to Importing Data into PeopleVine

You can easily import your data to PeopleVine by placing it in a CSV file and mapping the data to the appropriate fields in PeopleVine. Check out this guide for some samples and the overall data model.

Posted September 6, 2019

Prompt Questions When Checking Someone In At Your Space

Now when your members are checked in using the Control Panel, /Checkin or when scanning their QR code you can prompt a form to capture information on their visit.

Posted August 10, 2019

Ready for a Real Billing Platform (for those not using PeopleVine Billing)

Migrate to PeopleVine Billing for Memberships and streamline your business with the ultimate in "lock-down" abilities for non-payers. Get paid on-time and all the time with PeopleVine Billing.

Posted August 9, 2019

PeopleVine + SevenRooms = Hospitality Perfected

We are proud to introduce our latest update to the platform that includes a tighter integration with SevenRooms to create the ultimate hospitality experience.

Posted August 9, 2019

PeopleVine Webhooks Sync Your Data in Real-Time with Any Other System (if you needed to)

With PeopleVine Webhooks, you can sync every touchpoint with your existing systems to keep your legacy platforms updated in real-time. This article will show you how to setup a webhook and dynamically populate the data into it.

Posted July 29, 2019

Leverage "Get Items" to Automatically Issue Perks to Members + Re-Issue Perks

You can leverage the "get items" feature in order to issue perks to your members after signing up and renewing annually.

Posted July 29, 2019

Process Payment on File API Call

Learn how to connect your POS to PeopleVine and leverage our payment on file API for enabling convenience to your customers.

Posted July 27, 2019

HAPI - Setup a custom page displaying available locations based on the user's location

This code sample provides a way to automatically sort your locations by the closest distance to the user.

Posted July 22, 2019

Add Facebook Pixel Tracking to Your Website - Step by Step Guide

See how to add a Facebook Tracking Pixel to your website and start to target specific actions.

Posted July 12, 2019

New Reports + Improved Reporting Engine

Check out the new reporting tools and grid view with sorting and filtering of the live data.

Posted July 9, 2019

© PeopleVine 2019. Powered by PeopleVine. Terms of use | Privacy & cookies