EDD Homepage / Kitchen sink example
This is a hybrid page; it uses a little bit of PHP for interactivity apart from pure loop code for category filtering.
Tangible Loops for EDD Shop
Product list-detail
[]
Randall Download 1$
[]
Randall Download 2$
[]
TGBL1 download$
[]
TGBL2 download$
Categories
Tags
Page markup
<div class="header row">
<div class="shop-name col-8">
<h3>Tangible Loops for EDD Shop</h3>
</div>
<div class="col-4">
<div class="cart float-right mr-5">
<img src="{Url views}/assets/supermarket.png" alt="Logo" width="26" style="">
<span class="d-inline-block">
<Loop type=edd_cart>
<If count more_than=1>
<span><Get loop=count /> item(s)</span>
<Else>
<span>Empty cart</span>
</If>
</Loop>
</span>
<div class="dropdown p-1">
<div class="dropdown-products">
<Loop type=edd_cart>
<Loop type=edd_product id="{Field id}">
<div class="product-row">
<span><Field image height="36" /><Field name /> <small> $<Loop map="{Field pricing}"><Field amount /></Loop></span><br />
</div>
</Loop> <!-- Would be very useful to be able to query one loop above for an attribute -->
<small class="d-block">x <Field quantity /></small>
</Loop>
</div>
</div>
</div>
</div>
</div>
<div style="background-image:url('{Url site}/wp-content/themes/tangible-loops-for-edd-site-views/assets/loops-and-logic-logo.png');
background-size:60px 60px;
background-repeat: repeat-x;
height: 60px; width: 840px;
">
</div>
<div class="content row">
<div class="col-9">
<h3>Product list-detail</h3>
<Loop type=edd_product paged=4 >
<div class="card card-product mb-1 p-2">
<Field image class="card-img-top" height=75 />
<div class="card-body">
<h5 class="card-title"><Field title><small class="ml-2">$<Loop map="{Field pricing}"><Field amount /></Loop></small></h5>
<p class="card-text"><Field excerpt /></p>
</div>
</div>
</Loop>
<Paginate>
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" disabled="disabled" paginate-action="first_page"><<</button><button type="button" class="btn btn-secondary" disabled="disabled" paginate-action="previous_page"><</button><button type="button" class="btn btn-secondary" paginate-action="next_page">></button><button type="button" class="btn btn-secondary" paginate-action="last_page">>></button>
</div>
Page <Field current_page /> of <Field total_pages /> pages
<PaginateLoading tag="span" role="alert" aria-live="assertive">
Loading..
</PaginateLoading>
</Paginate>
</div>
<div class="col-3 pt-3">
<p>Categories</p>
<ul class="categories mb-3">
<Loop taxonomy=download_category>
<li><a href="?category={Field id}"><Field name /></a></li>
</Loop>
</ul>
<p>Tags</p>
<ul class="tags">
<Loop taxonomy=download_tag>
<li><Field name /></li>
</Loop>
</ul>
</div>
</div>