How to Customise a Template in Netbeans IDE

1) Create a Demo Store

1. First, Signup to Instantcart at www.instantcart.com.
2. Enter Your Store Name, Email address and a password of your choice.
3. Click "Lets Go!"

2) Wait a few moments while your store is built

This can take 1 to 2 minutes, so grab a coffee while you wait.

3) Once your store has been created, you'll be redirected to your account. 

Click on the "Admin" button.

4) You'll be redirected again to your stores login.  Enter your password.

5) Once you've logged in, click on the "Templates" link from the navigation bar.

6) Choose a template, and once you're happy, click "Install Template"

7) Once you've installed your template, you can now copy over the template files to your own account, ready to start editing!

6) When complete, fresh the page, and navigate to the File Manager. 

You should see a new folder called "Templates".  This folder contains all the template files for your new store.

6) Next, we need to setup our editing environment. 

In this example we are using the Netbeans IDE.  You can download it here.

7) Once you have downloaded and installed Netbeans, our first step is to create a remote project.

1. Open Netbeans
2. Click on File > New Project
3. A box will appear, select PHP Application from Remote Server
4. Click "Next >"

8) Our next step is to define a Name and location for our project. 

1. Type the name of your store / project in the Project Name field.
2. Select a source folder for your store.  This source folder can be anywhere on your computer, however Netbeans will default to its own local folder.
   
3. The PHP version can be set to PHP 5.5, however it won't matter too much.
4. Encoding should always be set to UTF-8

9) Next, we need to tell Netbeans where our store resides, and the remote location of our store.

1. Enter the URL of your store in the Project URL box
2. Define an FTP connection. You can use the FTP username and password we sent you in your welcome email.
3. If you do not know your FTP password, you can change this from your account at www.instantcart.com/account.
4. Set the upload directory to "/"

10) You're ready to confirm and download all the remote files from your website to your computer.

Make sure all the folders are selected, then click "Finish"

11) Your project will load, and you should see the following file structure

12) Navigate to the templates/main/main.html file.

1. Locate the main.html file, this is the master Twig file for your project.
2. Find line 13 (may be different depending on the template you install)
3. Change the template_server_url variable to "/"
4. This will allow your template to read CSS files locally, rather than using the Instantcart CDN
5. Once you've edited your template, click on the "Save" icon

Your changes should appear similar to below once you've done.

You can double check other file references are correct, such as at the bottom of your document.  You can of course change the location of files to where ever you like.

13) Things to check before you start making more changes

1. Installing the Twig Syntax plugin for NetBeans

   You can enable it via Tools -> Plugins.

   Note: since it's a a core plugin, you don't find it in "Available Plugins", but in "Installed Plugins". Being a core plugin, it's already installed, you simply have to activate it.

2. Getting to grips with TWIG, the HTML template engine we use for Instantcart
   
   
3. Learning where everything is, and what files do what by downloading our Template crib sheet
   
   
4. Defining a CSS pre-compiler

   Some of our templates use pre-compilers for CSS, such as less.  These can be setup by defining the executables under the Tools > Options menu as below.  You'll need the CMD executable to compile LESS files.  You can also define the Less and CSS target directories from within the Project Properties for your project.  You can download the Lessc.cmd file for Windows here: https://github.com/duncansmart/less.js-windows

Thats it, you're ready to start editing!!