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

Logo

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">&lt;&lt;</button><button type="button" class="btn btn-secondary" disabled="disabled" paginate-action="previous_page">&lt;</button><button type="button" class="btn btn-secondary" paginate-action="next_page">&gt;</button><button type="button" class="btn btn-secondary" paginate-action="last_page">&gt;&gt;</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>