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.

Adding a Card on File with Square for Dining

If you're using Square, we've updated our flow/experience for registering a card with Square for a card on file experience when dining.

Posted April 23, 2021

1 Hour Outage Due to Azure Downtime

We encountered an outage for an hour when Azure became unavailable. We contacted their support on Twitter to get them looking into it. Details inside.

Posted April 2, 2021

Add Your Member to Sevenrooms as a Walk-In if They Don't have a Reservation

Looking to ensure your hostess knows when a member entered the building? Enable this feature with Sevenrooms to add a member as a walk-in in Sevenrooms when scanned in.

Posted April 2, 2021

Peoplevine For Your Accounting Team - Learn the Tools, Predict Your Revenue and Follow Your Cash

This article highlights the latest components available to your accounting team to understand how they can find transactions, research transactions, review accounts receivables and more.

Posted March 19, 2021

Updated Monthly Statement to Print for Your Members

You can now generate quick monthly statements breaking down recent charges along with past due.

Posted March 12, 2021

We Support Fees on SevenRooms Reservations

Are you looking to charge a fee for upcoming reservations? You can add this in Sevenrooms and Peoplevine will ensure to capture this fee before confirming the reservation.

Posted March 10, 2021

Setup Your Mews Account to Work with PeopleVine

We are integrated with the PMS Mews to enable you to sync member data into Mews (along with changes), get reservation data and spend along with process payments into the members' account in Mews.

Posted March 4, 2021

Hide Birthday on the Member Registration

You can easily hide the birthday fields when people enroll by adding one line to your layout css.

Posted March 2, 2021

Replace Your Contact Us with a HAPIform

You can replace your contact us page with a new contact us form, designed to match your brand.

Posted February 26, 2021

When They Arrive in Sevenrooms We'll Check Them in PeopleVine too

To ensure your data is in sync, as soon as someone is marked as arrived in Sevenrooms, we'll ensure you can see this check-in on the membership activity and leveraged for automation.

Posted February 17, 2021

Screen Update to Aloha Payment on File Screens

Our Aloha integration partner, Omnivore, pushed an update to the payment on file experience. Here are some things you should know.

Posted February 12, 2021

Generate Account Statements and E-mail them to Your Members

You can quickly generate a monthly statement highlighting your customer spend and transactions during that time frame.

Posted February 11, 2021

We added Additional Transaction Meta Data for Your Reports and Tracking

We expanded our transaction data and exports to now share with you when it was originally created (not just when it was charged) along with when it was paid on.

Posted February 11, 2021

Adjust the Billing Date of Your Members with Two Clicks

With an ever-changing world and continuous lockdowns/business closures, we create a tool so you can easily push out the next billing date.

Posted February 10, 2021

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