Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

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">
    <li><a href="[@config:home_url@]">Home</a></li>
    [%/param%]
    [%param *body%]
    <li><a href="[@url@]">[@name@]</a></li>
    [%/param%]
    [%param *body_current%]
    <li>[@name@]</li>
    [%/param%]
    [%param *footer%]
</ul>
[%/param%]
[%/breadcrumb%]
<h1>[@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>

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

<p>
    [@content_short_description1@]
    [@content_short_description2@]
    [@content_short_description3@]
</p>
[@content_description1@]
[@content_description2@]
[@content_description3@]

[%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"></i>
        <i class="fa fa-twitter-square text-twitter"></i>
        <i class="fa fa-pinterest-square text-pinterest"></i>
        <i class="fa fa-google-plus-square text-google-plus"></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"></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"></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"></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"></i> Google+</a></li>
    </ul>
</div>
<a id="comments"></a><hr />
[%thumb_list type:'content_reviews' limit:'5'%]
[%param filter_1%][@CONTENT_ID@][%/param%]
[%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 [@user:bill_first_name@]%]By: <span itemprop="author">[@user:bill_first_name@]</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%]
[%/thumb_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 id:'review_title'%][%/FORM%][%/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 id:'review_text'%][%/FORM%][%/NOHTML%]</textarea>
        </div>
        [%if ![@user:username@]%]
        <div class="form-group">
            <label for="customername">Your Name</label>
            <input class="form-control" type="text" name="customername" id="customername" value="[%NOHTML%][%FORM id:'customername'%][%/FORM%][%/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 id:'emailaddress'%][%/FORM%][%/NOHTML%]" required/>
        </div>
        [%/if%]
        <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 thumb 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/thumbs/content called brand.template.html, and paste the following code into it:

<div class="col-xs-6 col-md-2">
    <a href="[@URL@]"><img src="[%ASSET_URL type:'content' id:'[@content_id@]' default:'[@config:imageurl@]/pixel.gif'%][%/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: