Merging view flies for ajax pagination
authorSteve Sutton <steve@gaslightmedia.com>
Fri, 11 Jan 2019 20:43:33 +0000 (15:43 -0500)
committerSteve Sutton <steve@gaslightmedia.com>
Fri, 11 Jan 2019 20:43:33 +0000 (15:43 -0500)
Bring in develop stuff

views/front/members/list.html
views/front/members/listContainer.html [new file with mode: 0644]

index 363ae9e..60022f1 100755 (executable)
                 <div class="glm-member-list-listing-container">
                 {if $settings.list_show_search_alpha && !apply_filters("is_page", 'search')}
                     <div class="glm-alpha-links">
-                        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if !$alphaSelected} glm-alpha-link-selected{/if}">All</a>
+                        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if isset($smarty.request.s) && $smarty.request.s}&s={$smarty.request.s|escape}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if !$alphaSelected} glm-alpha-link-selected{/if}">All</a>
                 {foreach $alphaList as $a}
-                        <a href="{$thisUrl}?glm_action=list&alpha={$a.alpha}&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if $a.default} glm-alpha-link-selected{/if}">{$a.alpha}</a>
+                        <a href="{$thisUrl}?glm_action=list&alpha={$a.alpha}&textSearch={$textSearch}{if isset($smarty.request.s) && $smarty.request.s}&s={$smarty.request.s|escape}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if $a.default} glm-alpha-link-selected{/if}">{$a.alpha}</a>
                 {/foreach}
                 </div>
                 {/if}
 
                 {if $paging}
-                    {if $prevStart || $nextStart}
+                    {if ( $prevStart || $nextStart ) && !$settings.list_ajax_pagination}
                         <br>
                         <div class="paging-container">
-                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
-                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
+                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if isset($smarty.request.s)}&s={$smarty.request.s|escape}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&citySearch={$citySearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
+                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if isset($smarty.request.s)}&s={$smarty.request.s|escape}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&citySearch={$citySearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
                         </div>
                         <br>
                     {/if}
                     <br>
                     <div class="glm-members-found">
-                        showing {$start} through {$lastDisplayed} of {$filteredMembersFound}
+                    showing <span class="aStart">{$start}</span> through <span class="aLastDisplayed">{$lastDisplayed}</span> of <span class="aTotal">{$filteredMembersFound}</span>
                     </div>
                 {/if}
 
-                {if $view == grid}
-                    <ul class="glma-small-block-grid-1 glma-medium-block-grid-2 glma-large-block-grid-3">
-                    {foreach $members as $member}
-                        <li class="glm-member-list-record">
-                            {apply_filters('glm-member-db-front-members-list-memberAbove', '', $member.member_pointer)}
-                            <div class="glm-member-db-border-wrap">
-                                {apply_filters('glm-member-db-front-members-list-memberTop', '', $member.member_pointer)}
 
-                                {if $settings.list_show_detail_link && !$member.has_no_profile.value}
-                                <a class="glm-member-list-image-wrapper" href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/">
-                                {/if}
-
-                                {if $member.featured}
-                                <div class="glm-member-list-featured-tag">
-                                    featured
-                                </div>
-                                {/if}
-
-                                {if $member.logo && $settings.list_show_logo}
-                                    <div class="glm-member-list-has-image">
-                                        <img class="glm-member-list-image" src="{$glmPluginMediaUrl}/images/grid/{$member.logo}">
-                                    </div>
-                                {elseif $settings.list_show_logo_filler}
-                                    <div class="glm-member-list-has-image">
-                                        <img class="glm-member-list-image-filler" src="{$assetsUrl}/filler_s.gif">
-                                    </div>
-                                {else}
-                                    <div class="glm-member-list-missing-image"></div>
-                                {/if}
-                                {if $settings.list_show_detail_link && !$member.has_no_profile.value}
-                                </a>
-                                {/if}
-                                <div class="glm-member-list-info-wrapper">
-                                    <h4 class="glm-member-title">
-                                        {if $settings.list_show_detail_link && !$member.has_no_profile.value}
-                                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">
-                                                {$member.member}
-                                            </a>
-                                        {else}
-                                            {$member.member}
-                                        {/if}
-
-                                    </h4>
-
-                                    <div class="glm-member-list-sub-links">
-                                        <ul>
-                                            {if $member.url && $settings.list_show_url}<li><a href="{$member.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if}>Website</a></li>{/if}
-                    <!--                        {if $member.phone && $settings.list_map_show_phone}<a href="tel:+{$member.phone}">Phone</a>{/if}-->
-                                            {$packageLink = apply_filters('glm-member-db-front-members-list-linksBottom', '', $member.member_pointer)}
-                                            {if $packageLink}<li>{$packageLink}</li>{/if}
-                                            {if $member.reservation_url}<li><a target="_blank" href="{$member.reservation_url}">Reserve Now</a></li>{/if}
-
-                                            {if $settings.list_show_live_cam}
-                                                {if $member.live_cam_type.name == "Web Page" && $member.live_cam_url && $settings.list_show_live_cam}
-                                                    <li><a target="_blank" href="{$member.live_cam_url}">{$terms.term_webcam_cap}</a></li>
-                                                {else if $member.live_cam_type.name == "Camera Image"}
-                                                    <li><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}?expanded=live-cam">{$terms.term_webcam_cap}</a></li>
-                                                {/if}
-                                            {/if}
-
-                                            <li><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">View&nbsp;More</a></li>
-                                            {apply_filters('glm-member-db-front-members-list-memberBelow', '', $member.member_pointer)}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div> <!-- End of glm-member-db-border-wrap -->
-                        </li> <!-- end of li.glm-member-list-record -->
-                    {/foreach} {*$members*}
-                    </ul>
-                <!-- Grid view above -->
-
-                {else}
-
-    <!-- List view below -->
-        {foreach $members as $member}
-        {apply_filters('glm-member-db-front-members-list-memberAbove', '', $member.member_pointer)}
-             <div class="glm-member-list-container glm-member-container glma-small-12 glma-columns {if $member.featured}featured{/if}">
-                {apply_filters('glm-member-db-front-members-list-memberTop', '', $member.member_pointer)}
-
-                {if $member.featured}
-                <div class="glm-member-list-featured-tag">
-                    featured
+                {* Loading members with ajax *}
+                {if $settings.list_ajax_pagination}
+                <div id="glm-ajax-list">
+                    loading...
                 </div>
+                {else}
+                    {include file='front/members/listContainer.html'}
                 {/if}
 
-                 <!-- Member Logo - Medium and up-->
 
-                    <div class="glm-member-list-data glma-small-12 glma-columns">
-                    {if $member.logo && $settings.list_show_logo}
-                        <div class="glm-member-list-image-wrapper glma-right glma-small-12 glma-medium-4 glma-columns {if !$settings.list_logo_for_mobile}mobile-hide{/if}">
-                            <div class="glm-member-list-image-border clearfix">
-                                <img src="{$glmPluginMediaUrl}/images/{$settings.list_logo_size}/{$member.logo}">
-                            </div>
-                       </div>
-                    {/if}
-                    <div class="glm-member-list-active-info glma-small-12 glma-medium-8 glma-columns glma-small-right glma-medium-left ">
-     <!-- Member name, address, and basic information -->
-                    {apply_filters('glm-member-db-front-members-list-memberInfoTop', '', $member.member_pointer)}
-                    <h4 class="glm-member-title">
-                        {if $settings.list_show_detail_link && !$member.has_no_profile.value}
-                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">{$member.member}</a>
-                        {else}
-                            {$member.member}
-                        {/if}
-                    </h4>
-                    {if $settings.list_show_address}
-                        <div class="glm-member-list-address-wrapper">
-                            {apply_filters('glm-member-db-front-members-list-memberAddressTop', '', $member.member_pointer)}
-                            {if $settings.list_show_street}
-                            {if $member.addr1 && $settings.list_show_address}<div>{$member.addr1}</div>{/if}
-                            {if $member.addr2 && $settings.list_show_address}<div>{$member.addr2}</div>{/if}
-                            {/if}
-                            {if $settings.memb_info_location && $settings.list_show_citystatezip}
-                                <div>
-                                    {if $member.city}
-                                        <span>{$member.city}{if $member.state.value}, {/if}</span>
-                                    {/if}
-                                    {if $member.state.value}
-                                        <span>{$member.state.value}</span>
-                                    {/if}
-                                    {if $member.zip}
-                                        {$member.zip}
-                                    {/if}
-                                </div>
-                            {/if}
-                            {if $member.country.name && $settings.list_show_country}
-                                <div>{$member.country.name}</div>
-                            {/if}
-                            {apply_filters('glm-member-db-front-members-list-memberAddressBottom', '', $member.member_pointer)}
-                        </div>
-                    {/if}
-                    {apply_filters('glm-member-db-front-members-list-memberDetailTop', '', $member.member_pointer)}
-                    {if ($settings.memb_info_contact && $member.phone && $settings.list_show_phone) || ($settings.memb_info_contact && $member.toll_free && $settings.list_show_tollfree)}
-                        <div>
-                            {if $member.phone && $settings.list_show_phone}<span class="glm-member-db-phone">Phone: {apply_filters('glm_associate_phone_filter', $member.phone)} </span>{/if}
-                            {if $member.toll_free && $settings.list_show_tollfree}<span class="glm-member-db-phone-tollfree">{apply_filters('glm_associate_phone_filter', $member.toll_free)}</span>{/if}
-                        </div>
-                    {/if}
-                    {if $settings.memb_info_location && $member.region && $settings.list_show_region}<div><b>Region:</b> {$member.region}</div>{/if}
-
-                    <div class="glm-member-list-links">
-                        {apply_filters('glm-member-db-front-members-list-memberLinksTop', '', $member.member_pointer)}
-                        {if $member.url && $settings.list_show_url}<a class='glm-member-list-website-link' data-member-id="{$member.member_pointer}" data-member-slug="{$member.member_slug}" href="{$member.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if} >Visit Website</a>{/if}
-                        {if $member.email && $settings.list_show_email}<a href="mailto:{$member.email}">Email</a>{/if}
-                        {if $member.reservation_url}<a target="_blank" href="{$member.reservation_url}">Reserve Now</a>{/if}
-                        {if $settings.list_show_live_cam}
-                            {if $member.live_cam_type.name == "Web Page" && $member.live_cam_url && $settings.list_show_live_cam}
-                                <a target="_blank" href="{$member.live_cam_url}">{$terms.term_webcam_cap}</a>
-                            {else if $member.live_cam_type.name == "Camera Image"}
-                                <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}?expanded=live-cam">{$terms.term_webcam_cap}</a>
-                            {/if}
-                        {/if}
-                        {apply_filters('glm-member-db-front-members-list-linksBottom', '', $member.member_pointer)}
-                    </div>
-                    <div class="glm-member-db-socials">
-                       {apply_filters('glm-member-db-front-members-social-list', '', $member.member_pointer)}
-                    </div>
-
-                <div class="glm-member-list-description glma-small-12 glma-columns">
-                    <div>
-                    {apply_filters('glm-member-db-front-members-list-memberDescriptionTop', '', $member.member_pointer)}
-                    {if $member.short_descr && $settings.list_show_short_descr}
-                        {$member.short_descr|nl2br}
-                        {if $settings.list_show_detail_link && !$member.has_no_profile.value}
-                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">More</a>
-                        {/if}
-                    {/if}
-                    {apply_filters('glm-member-db-front-members-list-memberDescriptionBottom', '', $member.member_pointer)}
-                    </div>
-                    {if $member.categories && $settings.list_show_categories}
-                    <div class="glm-member-list-items">
-                        <b>{$terms.term_member_cap} Categories</b>
-                        <ul>
-                            {foreach $member.categories as $c}
-                                <li>
-                                    {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
-                                </li>
-                            {/foreach}
-                        </ul>
-                    {/if}
-                    {if $member.cc_type && $settings.list_show_creditcards}
-                        <b>Credit Cards Accepted:</b>
-                        <ul>
-                            {foreach $member.cc_type.names as $c}
-                                <li>{$c}</li>
-                            {/foreach}
-                        </ul>
-                    {/if}
-                    {if $member.amenities && $settings.list_show_amenities}
-                        <b>{$terms.term_member_cap} Amenities</b>
-                        <ul>
-                            {foreach $member.amenities as $A}
-                                <li>
-                                    {$A.name}
-                                </li>
-                            {/foreach}
-                        </ul>
-                    {/if}
-                    </div>
-                </div>
-                    {apply_filters('glm-member-db-front-members-list-memberDetailBottom', '', $member.member_pointer)}
-                 </div>
-
-
-                {apply_filters('glm-member-db-front-members-list-memberDataBelow', '', $member.member_pointer)}
-                {apply_filters('glm-member-db-front-members-list-memberBottom', '', $member.member_pointer)}
-                </div>
-                {apply_filters('glm-member-db-front-members-list-memberBelow', '', $member.member_pointer)}
-    <!-- Member Description -->
-
-     {/foreach} {*$members*}
-         </div>
-
- {/if} {*end grid view check*}
-    <div class="paging-container">
         {if $paging}
-            {if $prevStart || $nextStart}
+            {if ( $prevStart || $nextStart ) && !$settings.list_ajax_pagination}
                 <br>
                 <div class="paging-container">
-                    <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
-                    <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
+                    <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if isset($smarty.request.s)}&s={$smarty.request.s|escape}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&citySearch={$citySearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
+                    <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if isset($smarty.request.s)}&s={$smarty.request.s|escape}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&citySearch={$citySearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
                 </div>
                 <br>
             {/if}
+            {if $nextStart && $settings.list_ajax_pagination}
+                <a href="#" class="glm-show-more test" data-next="{$nextStart}">[ Load More ]</a>
+            {/if}
             <br>
             <div class="glm-members-found">
-                showing {$start} through {$lastDisplayed} of {$filteredMembersFound}
+                showing <span class="aStart">{$start}</span> through <span class="aLastDisplayed">{$lastDisplayed}</span> of <span class="aTotal">{$filteredMembersFound}</span>
             </div>
         {/if}
-    </div>
         {apply_filters('glm-member-db-front-members-list-pageBottom', '')}
  {else}
         <div>(no {$terms.term_member_plur} listed)</div>
  {/if}
 
     {/if} {*list_show_list*}
-    <script type="text/javascript">
+
+    <script>
         jQuery(document).ready(function($) {
+            {if $settings.list_ajax_pagination}
+                var nextStart    = {if $nextStart}{$nextStart}{else}0{/if};
+                var numberShown  = 0;
+                var totalMembers = {$filteredMembersFound};
+
+                jQuery.ajax({
+                    url: '{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=membersList&limit={$settings.list_pagination_count}{$ajaxRequest}&alpha={$alphaSelected}',
+                    cache: false,
+                    async: true,
+                    dataType: 'html',
+                    success: function( html ){
+                        $('#glm-ajax-list').html( html );
+                        numberShown += {$settings.list_pagination_count};
+                    },
+                });
+
+                // Show More link
+                $(document).on('click', 'a.glm-show-more', function(e){
+                    e.preventDefault();
+                    // var nextStart = $(this).data('next');
+                    var showMoreButton = $(this);
+                    jQuery.ajax({
+                        url: '{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=membersList&limit={$settings.list_pagination_count}{$ajaxRequest}&pageSelect=Next&nextStart=' + nextStart + '&ajaxNext=1&alpha={$alphaSelected}',
+                        cache: false,
+                        async: true,
+                        dataType: 'html',
+                        success: function( html ){
+                            $('#glm-ajax-list').append( html );
+                            // $('.aStart').html(nextStart + 1);
+                            nextStart += {$settings.list_pagination_count};
+                            if ( nextStart > totalMembers ) {
+                                nextStart = totalMembers;
+                                $('.aLastDisplayed').html(nextStart);
+                            } else {
+                                $('.aLastDisplayed').html(nextStart - 1);
+                            }
+                            numberShown += {$settings.list_pagination_count};
+                            console.log('shown: ', numberShown);
+                            console.log( 'nextStart', nextStart);
+                            console.log( 'totalMembers', totalMembers);
+                            if ( numberShown >= totalMembers ) {
+                                showMoreButton.remove();
+                            }
+                        },
+                    });
+                });
+            {/if}
 
             jQuery('select[multiple]').asmSelect();
 
diff --git a/views/front/members/listContainer.html b/views/front/members/listContainer.html
new file mode 100644 (file)
index 0000000..fa1f2fd
--- /dev/null
@@ -0,0 +1,214 @@
+{if $view == grid}
+    <ul class="glma-small-block-grid-1 glma-medium-block-grid-2 glma-large-block-grid-3">
+    {foreach $members as $member}
+        <li class="glm-member-list-record">
+            {apply_filters('glm-member-db-front-members-list-memberAbove', '', $member.member_pointer)}
+            <div class="glm-member-db-border-wrap">
+                {apply_filters('glm-member-db-front-members-list-memberTop', '', $member.member_pointer)}
+
+                {if $settings.list_show_detail_link && !$member.has_no_profile.value}
+                <a class="glm-member-list-image-wrapper" href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/">
+                {/if}
+
+                {if $member.featured}
+                <div class="glm-member-list-featured-tag">
+                    featured
+                </div>
+                {/if}
+
+                {if $member.logo && $settings.list_show_logo}
+                    <div class="glm-member-list-has-image">
+                        <img class="glm-member-list-image" src="{$glmPluginMediaUrl}/images/grid/{$member.logo}">
+                    </div>
+                {elseif $settings.list_show_logo_filler}
+                    <div class="glm-member-list-has-image">
+                        <img class="glm-member-list-image-filler" src="{$assetsUrl}/filler_s.gif">
+                    </div>
+                {else}
+                    <div class="glm-member-list-missing-image"></div>
+                {/if}
+                {if $settings.list_show_detail_link && !$member.has_no_profile.value}
+                </a>
+                {/if}
+                <div class="glm-member-list-info-wrapper">
+                    <h4 class="glm-member-title">
+                        {if $settings.list_show_detail_link && !$member.has_no_profile.value}
+                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">
+                                {$member.member}
+                            </a>
+                        {else}
+                            {$member.member}
+                        {/if}
+
+                    </h4>
+
+                    <div class="glm-member-list-sub-links">
+                        <ul>
+                            {if $member.url && $settings.list_show_url}<li><a href="{$member.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if}>Website</a></li>{/if}
+                            {* {if $member.phone && $settings.list_map_show_phone}<a href="tel:+{$member.phone}">Phone</a>{/if} *}
+                            {$packageLink = apply_filters('glm-member-db-front-members-list-linksBottom', '', $member.member_pointer)}
+                            {if $packageLink}<li>{$packageLink}</li>{/if}
+                            {if $member.reservation_url}<li><a target="_blank" href="{$member.reservation_url}">Reserve Now</a></li>{/if}
+
+                            {if $settings.list_show_live_cam}
+                                {if $member.live_cam_type.name == "Web Page" && $member.live_cam_url && $settings.list_show_live_cam}
+                                    <li><a target="_blank" href="{$member.live_cam_url}">{$terms.term_webcam_cap}</a></li>
+                                {else if $member.live_cam_type.name == "Camera Image"}
+                                    <li><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}?expanded=live-cam">{$terms.term_webcam_cap}</a></li>
+                                {/if}
+                            {/if}
+
+                            <li><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">View&nbsp;More</a></li>
+                            {apply_filters('glm-member-db-front-members-list-memberBelow', '', $member.member_pointer)}
+                        </ul>
+                    </div>
+                </div>
+            </div> <!-- End of glm-member-db-border-wrap -->
+        </li> <!-- end of li.glm-member-list-record -->
+    {/foreach} {*$members*}
+    </ul>
+                <!-- Grid view above -->
+
+{else}
+
+    <!-- List view below -->
+    {foreach $members as $member}
+    {apply_filters('glm-member-db-front-members-list-memberAbove', '', $member.member_pointer)}
+         <div class="glm-member-list-container glm-member-container glma-small-12 glma-columns {if $member.featured}featured{/if}">
+            {apply_filters('glm-member-db-front-members-list-memberTop', '', $member.member_pointer)}
+
+            {if $member.featured}
+            <div class="glm-member-list-featured-tag">
+                featured
+            </div>
+            {/if}
+
+             <!-- Member Logo - Medium and up-->
+
+            <div class="glm-member-list-data glma-small-12 glma-columns">
+            {if $member.logo && $settings.list_show_logo}
+                <div class="glm-member-list-image-wrapper glma-right glma-small-12 glma-medium-4 glma-columns {if !$settings.list_logo_for_mobile}mobile-hide{/if}">
+                    <div class="glm-member-list-image-border clearfix">
+                        <img src="{$glmPluginMediaUrl}/images/{$settings.list_logo_size}/{$member.logo}">
+                    </div>
+               </div>
+            {/if}
+            <div class="glm-member-list-active-info glma-small-12 glma-medium-8 glma-columns glma-small-right glma-medium-left ">
+<!-- Member name, address, and basic information -->
+                {apply_filters('glm-member-db-front-members-list-memberInfoTop', '', $member.member_pointer)}
+                <h4 class="glm-member-title">
+                    {if $settings.list_show_detail_link && !$member.has_no_profile.value}
+                        <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">{$member.member}</a>
+                    {else}
+                        {$member.member}
+                    {/if}
+                </h4>
+                {if $settings.list_show_address}
+                    <div class="glm-member-list-address-wrapper">
+                        {apply_filters('glm-member-db-front-members-list-memberAddressTop', '', $member.member_pointer)}
+                        {if $settings.list_show_street}
+                        {if $member.addr1 && $settings.list_show_address}<div>{$member.addr1}</div>{/if}
+                        {if $member.addr2 && $settings.list_show_address}<div>{$member.addr2}</div>{/if}
+                        {/if}
+                        {if $settings.memb_info_location && $settings.list_show_citystatezip}
+                            <div>
+                                {if $member.city}
+                                    <span>{$member.city}{if $member.state.value}, {/if}</span>
+                                {/if}
+                                {if $member.state.value}
+                                    <span>{$member.state.value}</span>
+                                {/if}
+                                {if $member.zip}
+                                    {$member.zip}
+                                {/if}
+                            </div>
+                        {/if}
+                        {if $member.country.name && $settings.list_show_country}
+                            <div>{$member.country.name}</div>
+                        {/if}
+                        {apply_filters('glm-member-db-front-members-list-memberAddressBottom', '', $member.member_pointer)}
+                    </div>
+                {/if}
+                {apply_filters('glm-member-db-front-members-list-memberDetailTop', '', $member.member_pointer)}
+                {if ($settings.memb_info_contact && $member.phone && $settings.list_show_phone) || ($settings.memb_info_contact && $member.toll_free && $settings.list_show_tollfree)}
+                    <div>
+                        {if $member.phone && $settings.list_show_phone}<span class="glm-member-db-phone">Phone: {apply_filters('glm_associate_phone_filter', $member.phone)} </span>{/if}
+                        {if $member.toll_free && $settings.list_show_tollfree}<span class="glm-member-db-phone-tollfree">{apply_filters('glm_associate_phone_filter', $member.toll_free)}</span>{/if}
+                    </div>
+                {/if}
+                {if $settings.memb_info_location && $member.region && $settings.list_show_region}<div><b>Region:</b> {$member.region}</div>{/if}
+
+                <div class="glm-member-list-links">
+                    {apply_filters('glm-member-db-front-members-list-memberLinksTop', '', $member.member_pointer)}
+                    {if $member.url && $settings.list_show_url}<a class='glm-member-list-website-link' data-member-id="{$member.member_pointer}" data-member-slug="{$member.member_slug}" href="{$member.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if} >Visit Website</a>{/if}
+                    {if $member.email && $settings.list_show_email}<a href="mailto:{$member.email}">Email</a>{/if}
+                    {if $member.reservation_url}<a target="_blank" href="{$member.reservation_url}">Reserve Now</a>{/if}
+                    {if $settings.list_show_live_cam}
+                        {if $member.live_cam_type.name == "Web Page" && $member.live_cam_url && $settings.list_show_live_cam}
+                            <a target="_blank" href="{$member.live_cam_url}">{$terms.term_webcam_cap}</a>
+                        {else if $member.live_cam_type.name == "Camera Image"}
+                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}?expanded=live-cam">{$terms.term_webcam_cap}</a>
+                        {/if}
+                    {/if}
+                    {apply_filters('glm-member-db-front-members-list-linksBottom', '', $member.member_pointer)}
+                </div>
+                <div class="glm-member-db-socials">
+                   {apply_filters('glm-member-db-front-members-social-list', '', $member.member_pointer)}
+                </div>
+
+                <div class="glm-member-list-description glma-small-12 glma-columns">
+                    <div>
+                    {apply_filters('glm-member-db-front-members-list-memberDescriptionTop', '', $member.member_pointer)}
+                    {if $member.short_descr && $settings.list_show_short_descr}
+                        {$member.short_descr|nl2br}
+                        {if $settings.list_show_detail_link && !$member.has_no_profile.value}
+                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">More</a>
+                        {/if}
+                    {/if}
+                    {apply_filters('glm-member-db-front-members-list-memberDescriptionBottom', '', $member.member_pointer)}
+                    </div>
+                    {if $member.categories && $settings.list_show_categories}
+                    <div class="glm-member-list-items">
+                        <b>{$terms.term_member_cap} Categories</b>
+                        <ul>
+                            {foreach $member.categories as $c}
+                                <li>
+                                    {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
+                                </li>
+                            {/foreach}
+                        </ul>
+                    {/if}
+                    {if $member.cc_type && $settings.list_show_creditcards}
+                        <b>Credit Cards Accepted:</b>
+                        <ul>
+                            {foreach $member.cc_type.names as $c}
+                                <li>{$c}</li>
+                            {/foreach}
+                        </ul>
+                    {/if}
+                    {if $member.amenities && $settings.list_show_amenities}
+                        <b>{$terms.term_member_cap} Amenities</b>
+                        <ul>
+                            {foreach $member.amenities as $A}
+                                <li>
+                                    {$A.name}
+                                </li>
+                            {/foreach}
+                        </ul>
+                    {/if}
+                    </div>
+                </div>
+                {apply_filters('glm-member-db-front-members-list-memberDetailBottom', '', $member.member_pointer)}
+            </div>
+
+
+            {apply_filters('glm-member-db-front-members-list-memberDataBelow', '', $member.member_pointer)}
+            {apply_filters('glm-member-db-front-members-list-memberBottom', '', $member.member_pointer)}
+            </div>
+            {apply_filters('glm-member-db-front-members-list-memberBelow', '', $member.member_pointer)}
+        <!-- Member Description -->
+
+        </div>
+    {/foreach} {*$members*}
+
+{/if} {*end grid view check*}