Developing a Website with Neto
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Basic Tweak

This document will get you familiar with what it is like to tweak the front-end of a web store powered by Neto. It will take you step-by-step through the process for a particular tweak.

It is common for Neto customers to desire customisations beyond what you can do out-of-the-box with the control panel or theme builder. For example, you may want to show your brands on your homepage, or you might want to add a link to your website header, which directs the customer to your wholesaler registration form which is not emphasised by default in our themes.

Featured Brands showing on a homepage.

A "Register for Wholesale" button in a website's header.

Requirements

Before you get started, you will need an FTP application and a code editor. For designers using OSX, we recommend Transmit as an FTP client and Sublime Text or Atom as a code editor. With that being said, you are not restricted to any particular software suites when working with Neto. You can use Dreamweaver or Filezilla for FTP if you prefer, and more or less any code editor will work fine.

You will also need FTP access to be able to edit the template files for your website. More info on FTP access and how to get it can be found here.

Let's tweak our website!

Let's get started. For the sake of this exercise, we will add some featured brands to our website's homepage.

The first step when making tweaks to your Neto website should always be to check our Tweak Library. In our Tweak Library we have documented various front-end tweaks that customers often request, so if you can find something similar to what you are trying to achieve, it will make things a lot easier for you.

This particular tweak is indeed documented in our tweak library, so if you were already familiar with our template structure, you could easily head to the tweak library and follow the guide there. This document assumes you have never edited our templates before though, so we'll go over the tweak in a little more detail than usual.

Connect to the Filesystem via FTP

As mentioned above, you need to FTP into your websites filesystem in order to safely edit the files with a code editor. If you don't already have an FTP account for your website, you can request one here.

Providing you do have access, you simply need to set-up a new account in Transmit, Filezilla, or your preferred FTP application, and connect:

According to the documentation for this tweak, we only need to edit the template for the homepage of our website.

As websites can have multiple themes installed, and each theme is stored in a different directory, let's check which theme our website is currently using.

To do this, navigate to the add-on store:

From here, you can access the theme store:

In the theme store, it is easy to see what your active theme is:

Now that we know what theme we are using, it is easy to find our homepage template. In your FTP application, navigate to /assets/themes/THEME-NAME/cms/home.template.html:

This is the template for our homepage. All content page templates are included in this directory.

If you are using transmit, you can open this file in your preferred text editor directly from the application. Some FTP applications will require you to download the file first though (and re-upload when finished).

In Transmit, you can simply right-click the file and open it with your preferred text editor.

The homepage template is now open in Sublime Text and ready to be modified.

Edit the File as Required

As per the documentation for this tweak, we now simply need to paste the code for the brand list where we want it to show:

[%thumb_list type:'content' content_type:'brand' template:'brand' limit:'6' sortby:'sortorder'%]
    [%param *header%]
        <hr/>
        <h2 class="text-center">Featured Brands</h2>
        <div class="row featured-brands">
    [%/param%]
    [%param *body%]
        <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>
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/thumb_list%]

The code above is a mixture of standard HTML and some B@SE functions. B@SE is the templating language that we use on the front-end to dynamically display data from a website's Neto database.

Whenever printing information about products, configs or content from the CMS, we use B@SE.

[%thumb_list%], used above, is a B@SE function used to list out various results. It can be used to print content (such as brands, categories, and blog posts), products, and more.

Upload and Test your Changes

You can now save the file. If you're using transmit, it will have automatically uploaded. Otherwise, you may need to manually upload the file in your chosen FTP application.

If you refresh your homepage you should now see a list of brands, providing you've got brands setup in your system.

Featured Brands Final Result

Note: You may need to refresh your website's cache. This can be done on the Optimisation & Caching page, which is most easily accessible under the developer menu:


1 related articles found: