Expert Opinion

Wireframe

Instagram Feed

Coding Instructions

The way this works is it relies on a new content type - this lets the client manage this content (The image, Expert Name & Description) as well as allow them to easily manage the products recommended.

The first step is to set up a new content type in your Neto control panel. Navigate to Settings & Tools > All Settings & Tools. Click on Control Panel in the left side menu, then click Content Types Manager. In the top right click Add New.

Enter the name as Expert Opinion & use the unique code expertopinion. Check the box Show in control panel menu in the top right hand corner. The only visible field that you will need active is Description 1, so untick all the other fields. Rename this field Expert Description , then Save.

Open the new content type you just created via Webstore > Expert Opinion* and click Add New in the top right. Enter in a Name and Description for this expert, and click Continue. You can now upload a photo of the expert to the Main Image.

Finally, assign products to this new expert. This is done the same way as assigning products to a category, either on each product or via the import wizard. For more information regarding adding products to a category, you can find the relevant documentaion here.

Now the data is set up, the following code will need to be implemented for it to show. You will need to place the below code within the home.template.html file. This can be accessed using your FTP client inside /assets/themes/THEME-NAME/templates/cms. We reccomend you place the below code near the bottom of your template, just above the last closed </div>.

[%list type:'content' filter:'content_type=expertopinion' limit:'1'%]
    [%param *body%]
        <div class="row">
        <div class="col-xs-8 col-sm-6 col-md-4 col-lg-3">
            <p><img class="img-responsive img-circle img-thumbnail" src="[%asset_url type:'content' id:'[@content_id@]' default:'/assets/pixel.gif'/%]"></p>
            <div class="caption">
              <h3>[@content_name@]</h3>
              <p>[@content_description1@]</p>
            </div>
        </div>
        [%list type:'product' filter:'content=[@content_id@]' template:'' limit:'3' /%]
        </div>
    [%/param%]
[%/list%]

This code reads the content type expertopinion, prints the data on that expert in a column that is the same as the default thumbnail, and proceeds to print out three more products that have been assigned to that expert in the same row. If the thumbnails of the site have been adjusted, this may require some tweaking.

Create a new product list template

For the featured product, create two new folders under /assets/themes/THEME-NAME/templates called list and a folder within it called product. Once you have setup these folders, create a new file called template.html within the product folder you just created, and insert the code from the following template /assets/themes/THEME-NAME/templates/thumb/product/template.html.

You should now have the following folder structure /assets/themes/THEME-NAME/templates/list/product/template.html

Please Note: The [%list%] is a new function that replaces many other Neto B@SE functions such as [%thumb_list%], [%content_menu%] and many other functions. While the [%thumb_list%] function takes it's body template from the thumbs directory, the [%list%] function takes it's body template from the list directory, which isn't in a theme directoy by default. If you want the exact templates from your thumbs directory then you could copy /assets/themes/THEME-NAME/templates/thumb/product/*.html into /assets/themes/THEME-NAME/templates/list/product.

This will use the default product list template: list/product/template.html:

<article class="wrapper-thumbnail col-xs-8 col-sm-6 col-md-4 col-lg-3" role="article" aria-label="Product Thumbnail">
    <div class="thumbnail" itemscope itemtype="http://schema.org/Product">
        <meta itemprop="brand" content="[@brand@]"/>
        <a href="[%url type:'item' id:'[@sku@]' /%]" class="thumbnail-image">
            <img src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" class="product-image" alt="[@model@]" rel="itmimg[@SKU@]">
        </a>
        <div class="caption">
            <h3 itemprop="name"><a href="[%url type:'item' id:'[@sku@]' /%]">[%format type:'text' truemaxlength:'50' rmhtml:'1'%][@model@][%/FORMAT%]</a></h3>
            <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer" aria-label="[@model@] price">
                [%if [@inpromo@]%]
                    Now [%if [@has_child@]%]from [%/if%]
                    <meta itemprop="priceValidUntil" content="[%format type:'date' format:'#Y-#M-#d'%][@promo_end@][%END format%]"/>
                    <span itemprop="price" content="[@promo_price@]">[%format type:'currency'%][@promo_price@][%/format%]</span>
                [%else%]
                    [%if [@has_child@]%]From [%/if%]
                    <span itemprop="price" content="[@store_price@]">[%format type:'currency'%][@store_price@][%/format%]</span>
                [%/if%]
                <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
            </p>
            [%tracking_code type:'Thumbnails' /%]
            <!-- Purchase Logic -->
            <form class="form-inline buying-options">
                <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
                <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
                <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
                <input type="hidden" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="[%if [@min_qty@] > 0%][@min_qty@][%else%]1[%/if%]" class="input-tiny">
                [%if [@extra@] or [@has_child@] or [@editable_bundle@]%]
                    <a href="[%url type:'item' id:'[@sku@]' /%]" title="View [@model@] Buying Options" class="btn btn-primary btn-block btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Options</a>
                [%elseif [@store_quantity@] > 0 AND [@preorder@] %]
                    <button type="button" title="Pre-Order [@model@] Now!" class="addtocart btn btn-warning btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Pre-Order</button>
                [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
                    <button type="button" title="Add [@model@] to Cart" class="addtocart btn-primary btn btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Add to Cart</button>
                [%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
                    <button type="button" title="Add [@model@] to Cart" class="addtocart btn-primary btn btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Backorder</button>
                [%else%]
                    <a class="notify_popup btn btn-default btn-block btn-loads" href="[%url type:'item' id:'[@sku@]' /%]" title="Notify Me When [@model@] Is Back In Stock" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Out Of Stock</a>
                [%/if%]
            </form>
            <!-- /Purchase Logic -->
        </div>
        <div class="savings-container">
            [%if [@inpromo@]%]
                <span class="label label-danger">On Sale</span>
            [%/if%]
            [%if [@save@] > 0 AND ![@has_child@] %]
                <span class="label label-warning">
                [%format type:'percent'%][@save@][%/format%] OFF</span>
            [%/if%]
            [%if [@save@] > 0%]
                <span class="label label-default">RRP [%format type:'currency'%][@retail@][%/format%]</span>
            [%/if%]
        </div>
    </div>
</article>

Was this article useful?

Be notified when this page is updated. Optional.