Add packaging custom views from WMTA develop
authorLaury GvR <laury@gaslightmedia.com>
Wed, 6 Nov 2019 22:37:33 +0000 (17:37 -0500)
committerLaury GvR <laury@gaslightmedia.com>
Wed, 6 Nov 2019 22:37:33 +0000 (17:37 -0500)
glm-member-db-packaging/views/front/packaging/list.html [new file with mode: 0644]
glm-member-db-packaging/views/front/packaging/listForMemberDetail.html [new file with mode: 0644]
glm-member-db-packaging/views/front/packaging/listForMemberListing.html [new file with mode: 0644]

diff --git a/glm-member-db-packaging/views/front/packaging/list.html b/glm-member-db-packaging/views/front/packaging/list.html
new file mode 100644 (file)
index 0000000..1f7b75e
--- /dev/null
@@ -0,0 +1,213 @@
+<div class="glm-member-db-packaging-list">
+
+
+
+{include file='front/packaging/header.html'}
+{apply_filters('glm-member-db-front-members-list-pageTop', '')}
+<!--
+    NOTE: Image sizes for member db are typically large, medium, small, thumb.
+    These may be modified or added to by entries in the glm-member-db/config/plugin.ini file
+-->
+
+<!-- Container for entire list of packages -->
+<div class="glm-member-package-list-wrapper">
+
+    {if $havePackages}
+    <!-- If packages are listed by member, use this block -->
+
+        {if $byMember}
+<!--            <h3>List of Packages</h3>-->
+            <!-- /member -->
+            {foreach $members as $m}
+
+            <div class="glm-member-list-container glm-package-list-container glm-member-container small-12 columns">
+
+                <!-- Member Logo - Medium and up-->
+                    <div class="glm-member-list-data small-12 columns">
+                        {if $m.logo && $settings.package_list_show_member_image}
+                            <div class="glm-member-list-image-wrapper right small-12 medium-4 columns">
+                                <div class="glm-member-list-image-border">
+                                    <img src="{$glmPluginMediaUrl}/images/{$settings.list_logo_size}/{$m.logo}">
+                                </div>
+                            </div>
+                        {/if}
+
+                        <div class="glm-member-list-active-info small-12 medium-8 columns">
+
+                            <!-- Member name, address, and basic information -->
+                            <h4 class="glm-member-title">
+                               {if $settings.package_list_show_member_link}
+                                   <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">{$m.member}</a>
+                               {else}
+                                   {$m.member}
+                               {/if}
+                            </h4>
+                            {if $settings.package_list_show_member_address}
+                                <div class="glm-package-list-address">
+                                    {if $settings.package_list_show_member_street}
+                                    {if $m.addr1}<span>{$m.addr1}</span><br>{/if}
+                                        {if $m.addr2 && $settings.package_list_show_member_second_address}<span>{$m.addr2}</span><br>{/if}
+                                    {/if}
+                                    {if $settings.package_list_show_member_citystatezip}
+                                        {if $m.city}<span>{$m.city}</span>{if $m.state.value}, {/if}{/if}<span>{if $m.state.value}{$m.state.value}</span>{/if}{if $m.zip} {$m.zip}{/if}
+                                    {/if}
+                                    {if $m.country.name && $settings.package_list_show_member_country}<div>{$m.country.name}</div>{/if}
+                                </div>
+                            {/if}
+
+                            <div>
+                                {if $m.phone && $settings.package_list_show_member_phone}<span class="glm-member-db-phone"><b>Phone:</b> {$m.phone} </span>{/if}
+                                {if $m.toll_free && $settings.package_list_show_member_tollfree}<span class="glm-member-db-phone-tollfree"><b>Toll Free:</b> {$m.toll_free}</span>{/if}
+                            </div>
+                            {if $m.region && $settings.package_list_show_member_region}<div><b>Region:</b> {$m.region}</div>{/if}
+
+                            <div class="glm-member-list-links">
+                                {if $m.url && $settings.package_list_show_member_website_url}<a id='glm-member-list-website-link' href="{$m.url}"{if $settings.package_list_show_member_website_url} target="_blank"{/if}>Visit Website</a>{/if}
+                                {if $m.email && $settings.package_list_show_member_email}<a href="mailto:{$m.email}">Email</a>{/if}
+                            </div>
+
+
+                            <div class="glm-member-list-description small-12 columns">
+                                <div>
+                                    {if $m.short_descr && $settings.package_list_show_member_short_descr}
+                                        {$m.short_descr|nl2br}<a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/"> More</a>
+                                    {/if}
+                                </div>
+                            </div>
+
+                        </div> <!-- member list active info -->
+                        <div class="glm-member-package-list small-12 columns">
+                            {foreach $m.packages as $p}
+                                <!-- Container for each package -->
+                                <div class="glm-member-db-package">
+
+                                    <!-- Container for package information -->
+                                    <div class="glm-member-db-package-info">
+
+                                        {if $p.image && $settings.package_list_show_image}
+                                            <div class="glm-package-img-wrap">
+                                                <img src="{$glmPluginMediaUrl}/images/medium/{$p.image}">
+                                            </div>
+                                        {/if}
+                                        <h3 class="glm-member-db-package-title">
+                                            {if $settings.package_list_show_package_detail_link}
+                                            <a href="{$siteBaseUrl}{$settings.canonical_package_page}/{$p.package_slug}/">
+                                                {$p.title}
+                                            </a>
+                                            {else}
+                                            <span>
+                                                {$p.title}
+                                            </span>
+                                            {/if}
+                                        </h3>
+                                        {if $p.short_descr && $settings.package_list_show_short_descr}<div class="glm-member-db-package-list-short-description">{$p.short_descr}</div>{/if}
+                                        <div class="details">
+                                            {if $p.expire_date.date && $settings.package_list_show_expire_date}
+                                                <div><span class="glm-member-db-package-detail-title">Expires: </span><span class="glm-member-db-package-detail-data">{$p.expire_date.date}</span></div>
+                                            {/if}
+                                            {if $p.pricing && $settings.package_list_show_pricing}
+                                                <div><span class="glm-member-db-package-detail-title">Pricing: </span><span class="glm-member-db-package-detail-data">{$p.pricing}</span></div>
+                                            {/if}
+                                        </div> <!-- /package details -->
+                                        {if $p.descr}
+                                        <div class="glm-member-packaging-data-container">
+                                            <div id="glm-member-db-package-list-description-toggle-{$p.id}" class="glm-member-db-package-list-content-toggle">Description</div>
+                                            <div id="glm-member-db-package-list-description-container-{$p.id}" class="glm-member-db-package-list-content-data">
+                                                <div id="glm-member-db-package-list-description-{$p.id}">
+                                                     {$p.descr|wpautop}
+                                                </div>
+                                                <div class="glm-member-db-package-list-sub-data-links">
+                                                    <a class="glm-member-db-package-list-content-toggle">Collapse</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        {/if}
+                                    </div> <!-- /package info container -->
+                                </div> <!-- /package-container -->
+                            {/foreach} <!-- /package -->
+                        </div> <!-- package list-->
+                    </div> <!-- member list data -->
+                </div> <!-- member list container -->
+            {/foreach} {*$members*}
+  <!-- If packages are listed by package, use this block. If by member, the block above -->
+    {else}
+        <h3>List of Packages</h3>
+        {foreach $packages as $p}
+            <div class="glm-member-list-container glm-package-list-container glm-member-container small-12 columns">
+
+                <!-- Container for package information -->
+                <div class="glm-member-list-data small-12 columns">
+                    <div class="glm-member-package-detail-wrapper">
+
+                        {if $p.image}<div class="glm-package-list-img-wrap"><img src="{$glmPluginMediaUrl}/images/medium/{$p.image}"></div>{/if}
+
+                        <h3 class="glm-member-db-package-title">
+                            {if $settings.package_list_show_package_detail_link}
+                            <a href="{$siteBaseUrl}{$settings.canonical_package_page}/{$p.package_slug}/">
+                                {$p.title}
+                            </a>
+                            {else}
+                            <span>
+                                {$p.title}
+                            </span>
+                            {/if}
+                        </h3>
+                        <div class="details">
+                            {if $p.short_descr}
+                                <div>{$p.short_descr}</div>
+                            {/if}
+                            <div><span class="title">Expires: </span><span class="data">{$p.expire_date.date}</span></div>
+                            <div><span class="title">Pricing: </span><span class="data">{$p.pricing}</span></div>
+                            <div>{if $p.descr}{$p.descr|nl2br}{else if $p.short_descr}{$p.short_descr}{/if}</div>
+                        </div>
+
+                        <div>
+                            <strong class="glm-member-title"><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$p.member.member_slug}/">{$p.member.member}</a></strong>
+                        </div>
+                        <div class="address">
+                            <div class="addr1">{$p.member.addr1}</div>
+                            {if $p.member.addr2}<div class="addr2">{$p.member.addr2}</div>{/if}
+                            <div class="citystatezip">{if $p.member.city}{$p.member.city}, {/if}{if $p.member.state.name}{$p.member.state.name} {/if}{if $p.member.zip}{$p.member.zip}{/if}</div>
+                            {if $p.member.country.name}<div class="country">{$p.member.country.name}</div>{/if}
+                            {if $p.member.toll_free}<div class="phone"><b>Toll Free:</b> {apply_filters('glm_associate_phone_filter', $p.member.toll_free)}</div>{/if}
+                            {if $p.member.phone}<div class="phone"><b>Phone:</b> {apply_filters('glm_associate_phone_filter', $p.member.phone)}</div>{/if}
+                            <!--
+                            {if $p.member.url}<a class="url" title="url" href={$p.member.url}>{$p.member.url}</a>{/if}
+                            {if $p.member.email}<a class="email" title="Email" href="mailto:{$p.member.email}">{$p.member.email}</a>{/if}
+                            -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        {/foreach}
+    {/if} <!-- if by member -->
+{else}
+    (Sorry, no packages currently listed.)
+{/if}
+</div> <!-- /package wrapper -->
+</div> <!-- packaging list wrapper -->
+{include file='front/footer.html'}
+
+    <script type="text/javascript">
+        jQuery(document).ready(function($) {
+            // Open or close a section if its corresponding toggle is clicked
+            $(".glm-member-db-package-list-content-toggle").click(function() {
+
+                // If this is a child of sub-data-links (the 'Collapse' link)
+                if($(this).parents('.glm-member-db-package-list-sub-data-links').length) {
+                    // Retrieve the id from a higher level instead
+                    // based on: glm-member-db-package-list-description-container-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).parent().parent().attr("id").slice(49, 55);
+                } else {
+                    // based on: glm-member-db-package-list-description-toggle-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).attr("id").slice(46, 52);
+                }
+                $("#glm-member-db-package-list-description-container-"+target).slideToggle("fast", "swing",  function() {});
+                $("#glm-member-db-package-list-description-toggle-"+target).toggleClass("selected");
+
+            });
+        }); // jquery
+    </script>
\ No newline at end of file
diff --git a/glm-member-db-packaging/views/front/packaging/listForMemberDetail.html b/glm-member-db-packaging/views/front/packaging/listForMemberDetail.html
new file mode 100644 (file)
index 0000000..5f2e343
--- /dev/null
@@ -0,0 +1,80 @@
+{if $settings.detail_show_packages && $havePackages && $packages}
+<div id="glm-member-detail-packages-toggle" class="glm-member-detail-content-toggle">Packages & Deals</div>
+<div id="glm-member-detail-packages-container" class="glm-member-detail-content-data small-12">
+
+
+    {foreach $packages as $p}
+
+        <!-- Container for each package -->
+        <div class="glm-member-db-package">
+
+            {if $p.image}
+             <div class="glm-member-db-package-img-wrap">
+              <img src="{$glmPluginMediaUrl}/images/medium/{$p.image}">
+             </div>
+            {/if}
+            <!-- Container for package information -->
+            <div class="glm-member-db-package-info">
+
+                <h3 class="glm-member-db-package-title">
+                    {if $settings.package_list_show_package_detail_link}
+                    <a href="{$siteBaseUrl}{$settings.canonical_package_page}/{$p.package_slug}/">
+                        {$p.title}
+                    </a>
+                    {else}
+                    <span>
+                        {$p.title}
+                    </span>
+                    {/if}
+                </h3>
+                <div class="glm-member-db-package-desc">{$p.short_descr}</div>
+                <div class="details">
+                    {if $p.expire_date.date}<div><span class="title">Expires: </span><span class="data">{$p.expire_date.date}</span></div>{/if}
+                    {if $p.pricing}<div><span class="title">Pricing: </span><span class="data">{$p.pricing}</span></div>{/if}
+                </div>
+            </div>
+                                            {if $p.descr}
+                                            <div class="glm-member-packaging-data-container">
+                                                <div id="glm-member-db-package-list-description-toggle-{$p.id}" class="glm-member-db-package-list-content-toggle">Package Description</div>
+                                                <div id="glm-member-db-package-list-description-container-{$p.id}" class="glm-member-db-package-list-content-data">
+                                                    <div id="glm-member-db-package-list-description-{$p.id}">
+                                                         {$p.descr|wpautop}
+                                                    </div>
+                                                    <div class="glm-member-db-package-list-sub-data-links">
+                                                        <a class="glm-member-db-package-list-content-toggle">Collapse</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {/if}
+
+        </div>
+    {/foreach} <!-- /package -->
+
+    <div class="glm-member-detail-sub-data-links row">
+        <a class="left glm-member-detail-content-toggle">Collapse</a>
+        <a class="right link-to-top">Back to top</a>
+    </div>
+</div>
+{/if}
+<script type="text/javascript">
+        jQuery(document).ready(function($) {
+            // Open or close a section if its corresponding toggle is clicked
+            $(".glm-member-db-package-list-content-toggle").click(function() {
+
+                // If this is a child of sub-data-links (the 'Collapse' link)
+                if($(this).parents('.glm-member-db-package-list-sub-data-links').length) {
+                    // Retrieve the id from a higher level instead
+                    // based on: glm-member-db-package-list-description-container-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).parent().parent().attr("id").slice(49, 55);
+                } else {
+                    // based on: glm-member-db-package-list-description-toggle-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).attr("id").slice(46, 52);
+                }
+                $("#glm-member-db-package-list-description-container-"+target).slideToggle("fast", "swing",  function() {});
+                $("#glm-member-db-package-list-description-toggle-"+target).toggleClass("selected");
+
+            });
+        }); // jquery
+    </script>
diff --git a/glm-member-db-packaging/views/front/packaging/listForMemberListing.html b/glm-member-db-packaging/views/front/packaging/listForMemberListing.html
new file mode 100644 (file)
index 0000000..9975b4a
--- /dev/null
@@ -0,0 +1,37 @@
+{if $havePackages && $settings.list_show_packages}
+<!--<h2>Packages</h2>-->
+<div class="glm-member-package-container">
+    {foreach $packages as $p}
+        <!-- Container for each package -->
+        <div class="glm-member-db-package">
+
+            <!-- Container for package information -->
+            <div class="glm-member-db-package-info">
+                
+                {if $p.image}
+                <div class="glm-package-img-wrap">
+                    <img src="{$glmPluginMediaUrl}/images/medium/{$p.image}">
+                </div> 
+                {/if}
+                <h3 class="glm-member-db-package-title">
+                    {if $settings.package_list_show_package_detail_link}
+                    <a href="{$siteBaseUrl}{$settings.canonical_package_page}/{$p.package_slug}/">
+                        {$p.title}
+                    </a>
+                    {else}
+                    <span>
+                        {$p.title}
+                    </span>
+                    {/if}
+                </h3>
+                {$p.short_descr}
+                <div class="details">
+                    <div><span class="title">Expires: </span><span class="data">{$p.expire_date.date}</span></div>
+                    <div><span class="title">Pricing: </span><span class="data">{$p.pricing}</span></div>
+                </div>
+            </div>
+        
+        </div>
+    {/foreach} <!-- /package -->
+</div>
+{/if}