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.

The Ultimate Agency Tool - Import a Folder of Snippets Directly into the Drag and Drop Builder

Instead of taking the time to copy and paste the HTML, enter a title and take a screenshot, you can now drag and drop folders full of HTML snippets and we'll set them up, categorize them and add a screenshot of the rendered snippet.

Posted June 22, 2019

Improved Transaction Email with Option to Download as PDF

We have made it easier to send someone a transaction receipt by including an out-of-the-box template and a new option to download as a PDF.

Posted June 18, 2019

Make Your Order Receipts Member Friendly

You now have better control over the items that show up on an order receipt in your member portal.

Posted June 18, 2019

Sell Memberships with Credits that are Used When Booking an Appointment

You can setup a membership program that allows a member up to x amount of appointments per month. If they exceed that amount, we'll re-bill them for another month of x amount of appointments that lasts a full billing cycle.

Posted June 17, 2019

Use the PeopleVine Point of eXperience (POX) App to Check In Your Members

The PeopleVine POX app provides you with a front of the house tool to streamline the member check-in process.

Posted June 11, 2019

When Sending Email Newsletters You Can Include a Message Preview

Grab people’s attention by adding a text preview for your email newsletter.

Posted June 11, 2019

Reporting Dashboard - Quick Access to Top Used Reporting Tools

See a centralized view of all reports available across the various components in PeopleVine.

Posted June 10, 2019

Customer Demographics Dashboard - See Age and Gender Stats for Your People + Members

Get a breakdown of the gender and age group your people and members fall into.

Posted June 10, 2019

Event Registrations, Schedule Bookings and Accepting Offers Are Now 1-Click

When someone clicks on the call to action when booking a room, appointment, registering for an event or accepting an offer, the item will immediately be added to the user's account if they are logged in.

Posted June 6, 2019

Configuring Your Payment Processor's Thresholds

Your credit card processor may have additional controls to manage fraud. Follow these steps to ensure billing transactions aren't blocked.

Posted June 3, 2019

Void and Reverse a Transaction that was Held for Review but Declined

Did your payment processor hold a transaction for review that failed? Follow these steps to reverse the actions.

Posted June 3, 2019

POS Integration - Aloha Overview for Member Experience (Card on File, House Credits, Loyalty and more)

Check out this article for an overview (and links to other articles) on how to use your Aloha and PeopleVine integration.

Posted May 29, 2019

See When Your Members/Subscribers Update their Payment on File

In an effort to help ensure you're subscriptions/memberships are being paid for, you can sort and see data related to their payment on file.

Posted May 28, 2019

How to set up a drop ship notification

Learn how to set up an email notification to be sent to a drop ship fulfillment partner when a product order is placed.

Posted May 28, 2019

HAPI Sample - Account Subscription Page

You can customize the /account/subscription/# page with the following HAPI sample.

Posted May 24, 2019

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