Tweak Library

Brands Page

A page that shows a list of all product brands that are available, including pagination. Clicking on a brand will take you to a category page that shows all items related to the brand.

Industries

  • Health & Beauty
  • Fitness & Supplements
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Toys & Games
  • Animal & Petcare
  • Events & Party Supplies
  • Food & Beverages

Wireframe

Multi-Item Add

Coding Instructions

Step 1. Create the brands page template

Create a new template called brands.template.html in the folder /assets/themes/THEME-NAME/cms/.

Paste the below code into the template:

[%load_template file:'cms/includes/sidebar.template.html'/%]
[%breadcrumb%]
    [%PARAM *header%]
        <ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList" role="navigation" aria-label="Breadcrumb">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a href="[@config:home_url@]" itemprop="item"><span itemprop="name">Home</span></a>
            </li>
    [%/PARAM%]
    [%PARAM *body%]
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="[@url@]" itemprop="item"><span itemprop="name">[@name@]</span></a>
        </li>
    [%/PARAM%]
    [%PARAM *footer%]
        </ul>
    [%/PARAM%]
[%/breadcrumb%]
<h1 class="page-header">[@content_name@]</h1>
<p class="text-muted">
    [%IF [@content_author@]%]
    Author: [@content_author@] &nbsp;
    [%/IF%]
    [%if [@date_posted@] != 0000-00-00 00:00:00%]
    Date Posted:[%FORMAT type:'date'%][@date_posted@][%/FORMAT%]&nbsp;
    [%/IF%]
</p>

[%list type:'content' filter:'content_type=brand' template:'brand' limit:'999' sort:'name'%]
[%param *header%]
    <div class="row featured-brands">
[%/param%]
[%param *footer%]
    </div>
[%/param%]
[%/list%]

[%if [@content_short_description1@] or [@content_short_description2@] or [@content_short_description3@] or [@content_description1@] or [@content_description2@] or [@content_description3@]%]
    <section class="n-responsive-content" aria-label="Short Description">
        [@content_short_description1@]
        [@content_short_description2@]
        [@content_short_description3@]
    </section>
    <section class="n-responsive-content" aria-label="Description">
        [@content_description1@]
        [@content_description2@]
        [@content_description3@]
    </section>
    <hr>
[%/if%]

[%IF [@content_allow_reviews@]%]
<div class="dropdown">
    <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Share: <i class="fa fa-facebook-square text-facebook" aria-hidden="true"></i>
        <i class="fa fa-twitter-square text-twitter" aria-hidden="true"></i>
        <i class="fa fa-pinterest-square text-pinterest" aria-hidden="true"></i>
        <i class="fa fa-google-plus-square text-google-plus" aria-hidden="true"></i>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a class="js-social-share" role="menuitem" tabindex="-1" href="//www.facebook.com/sharer/sharer.php?u=[%url_encode%][@url@][%/url_encode%]"><i class="fa fa-facebook-square text-facebook" aria-hidden="true"></i> Facebook</a></li>
        <li role="presentation"><a class="js-social-share" role="menuitem" tabindex="-1" href="//twitter.com/intent/tweet/?text=[%url_encode%][@content_name@][%/url_encode%]&amp;url=[%url_encode%][@url@][%/url_encode%]"><i class="fa fa-twitter-square text-twitter" aria-hidden="true"></i> Twitter</a></li>
        <li role="presentation"><a class="js-social-share" role="menuitem" tabindex="-1" href="//www.pinterest.com/pin/create/button/?url=[%url_encode%][@url@][%/url_encode%]&amp;description=[%url_encode%][@content_name@][%/url_encode%]"><i class="fa fa-pinterest-square text-pinterest" aria-hidden="true"></i> Pinterest</a></li>
        <li role="presentation"><a class="js-social-share" role="menuitem" tabindex="-1" href="//plus.google.com/share?url=[%url_encode%][@url@][%/url_encode%]"><i class="fa fa-google-plus-square text-google-plus" aria-hidden="true"></i> Google+</a></li>
    </ul>
</div>
<a id="comments"></a><hr />
[%list type:'content_review' filter:'content_id=[@content_id@]' limit:'5'%]
    [%param *header%]
        <h3>Comments ([@reviews@])</h3>
    [%/param%]
    [%param *body%]
        <div itemprop="review" itemscope itemtype="http://schema.org/Review">
            <blockquote>
                <h4 itemprop="name"><i>[%nohtml%][@title@][%/nohtml%]</i></h4>
                <div>
                    <strong>[%if [@reviewname@]%]By: <span itemprop="author">[@reviewname@]</span> on [%/ if%]<meta itemprop="datePublished" content="[%FORMAT type:'date'%][@insert_date@][%/FORMAT%]">[%FORMAT type:'date'%][@insert_date@][%/FORMAT%]</strong>
                </div>
                <span itemprop="description">[%nohtml%][@review@][%/nohtml%]</span>
                [%IF [@review_response@]%]
                    <br /><br />
                    <blockquote>
                        <span class="review_response text-muted"><strong><i>[@config:website_name@] Response</i></strong><br /> [%nohtml%][@review_response@][%/nohtml%]</span>
                    </blockquote>
                [%/IF%]
            </blockquote> <hr />
        </div>
    [%/param%]
[%/list%]
<h3>Leave a comment</h3>
<form name="edit_review" method="post" role="form" action="[%URL page:'account' type:'write_contentreview'%][%/URL%]">
    <fieldset>
        <input type="hidden" name="fn" value="confirm">
        <input type="hidden" name="item" value="[@content_id@]">
        <input type="hidden" name="checked_terms_and_conditions" value="1">
        <input type="hidden" name="rating_value" id="rating_value" value="5"/>
        <div class="form-group">
            <label for="review_title">Title For Comment</label>
            <input class="form-control" type="text" name="review_title" id="review_title" value="[%nohtml%][@form:review_title@][%/nohtml%]" required/>
        </div>
        <div class="form-group">
            <label for="review_text">Your Comment</label>
            <textarea name="review_text" id="review_text" rows="10" class="form-control" required>[%nohtml%][@form:review_text@][%/nohtml%]</textarea>
        </div>
        [%ajax_loader%]
            [%if ![@user:username@] or [@user:username@] eq 'noreg'%]
                <div class="form-group">
                    <label for="customername">Your Name</label>
                    <input class="form-control" type="text" name="customername" id="customername" value="[%nohtml%][@form:customername@][%/nohtml%]" required/>
                </div>
                <div class="form-group">
                    <label for="emailaddress">Your Email Address</label>
                    <input class="form-control" size="70" type="email" name="emailaddress" id="emailaddress" value="[%nohtml%][@form:emailaddress@][%/nohtml%]" required/>
                </div>
            [%/if%]
        [%/ajax_loader%]
        <p>
            <button type="submit" class="btn btn-success" />Post Comment</button>
        </p>
        <p class="text-muted">Comments have to be approved before showing up</p>
    </fieldset>
</form>
[%/if%]
</div>

Step 2. Create a new brand list template

If you have already added the "featured brands" function to the home page, you can skip this step.

Create a new template under /assets/themes/THEME-NAME/list/content called brand.template.html, and paste the following code into it:

<div class="col-xs-6 col-md-2">
    <a href="[@URL@]"><img class="img-responsive block-center" src="[%ASSET_URL type:'content' id:'[@content_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/ASSET_URL%]" alt="[@content_name@]"/></a>
</div>

Additional Useful Steps

If you would like to add CSS that resizes and vertically aligns each logo within its container, paste the following code into /httpdocs/assets/themes/theme_name/css/style.css :

.featured-brands img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    object-position: center;
}

Final Result

Multi-Item Add

Download Files

Download Files


1 related articles found: