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.

Configure Salto to Work with Peoplevine Check-In

Follow these steps to configure your Salto to auto Check-In members when they use a Salto keycard.

Posted January 12, 2024

Detailed Member Statements & Billing

Unveiling Peoplevine's Member Statements & Billing feature: a comprehensive tool ensuring utmost transparency, simplicity, and efficiency in every financial transaction for both members and operators.

Posted September 28, 2023

New and Improved Timeline View

Dive into Peoplevine's My Schedule Timeline View: a feature designed to bring unmatched convenience and clarity to members' and guests' schedules, centralizing everything from dining to events.

Posted September 28, 2023

Spa & Wellness Booking with Book4Time Integration

Experience the perfect synergy of Peoplevine and Book4Time: a collaboration that transforms spa and wellness bookings, merging front-end engagement with backend efficiency.

Posted September 28, 2023

Going Global

Discover how PeopleVine's "Global Network" solution is set to revolutionize the hospitality industry by unifying brand experiences across multiple properties, whether globally or within a local region, offering members a seamless digital experience and granting operators unparalleled insights.

Posted September 28, 2023

Override the Guest Pass E-mail with Template

You can replace the e-mail sent to a guest when a guest pass is issued while retaining the necessary links to ensure they can activate it.

Posted September 27, 2023

Transaction Reporting has an Upgrade

We updated the Transaction Reporting screen to provide you with the data necessary to provide a glimpse at your revenue and the necessary data to audit your financials.

Posted September 7, 2023

You Can Set the Time to Process Authorizations

When a charge is processed through your POS, the charge may be Authorized until we capture the tip or at the end of day to handle refunds or changes. In this case, you can now set the time as to when we will process your authorizations.

Posted August 28, 2023

Adding Your Alliants Integration

Follow these steps to connect Peoplevine with your Alliants account for messaging.

Posted August 28, 2023

Setup Your Membership Tiers Based on Age

You can enable your membership tier to be for members between certain ages, when they past that age, they will automatically migrate to the next age tier.

Posted August 22, 2023

Follow these steps to update your Twilio settings to ensure delivery

This article will overview how to setup your brand and campaigns for broader/better delivery.

Posted August 10, 2023

Select Which Transaction Types You Want to Sync with Quickbooks

You're able to select which types of transaction items you want to sync to Quickbooks.

Posted June 14, 2023

Configure your Member Portal to Show Spa and Wellness

Once your Spa and Wellness feature is enabled, you need to configure the following to display on your member portal.

Posted June 14, 2023

Setup a Temporary ID for Hotel Guests

You can allow hotel guests to act as a member during their time at your property by leveraging these settings.

Posted May 23, 2023

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