This article is for those that wish to make basic code edits to their Opencart store with Adobe Dreamweaver. There are in fact many ways to edit code in Opencart including just using a basic notepad. Adobe Dreamweaver is a pretty popular web editing tool and is one that I have used many times. You don’t have to be a genius to use it either which makes it even better for those that are not web savvy. We’re basically going to load up a .tpl file and show you some tricks to finding your way around the html elements of that page.
1) Hopefully you already have Adobe Dreamweaver installed. Open up Dream Weaver, let it load. Hopefully also you already have an opencart installation stored somewhere on your windows or mac hard drive. You will next be browsing for a specific file.
2) Next click on file > open and browse to the following file: catalog/view/theme/default/template/product/category.tpl. Click OPEN. Let the .tpl load
3) Once the file is open you might by in DESIGN VIEW by default. For this demonstration we’re going to be using CODE VIEW only so click on CODE.
4) Depending upon your familiarity with HTML you may or may not recognize some or all of the code that you see. Let’s show you some basic tricks that you can perform with Dream Weaver to make your life easier.
Locating DIV BLOCKS
A lot of the edits that you will be doing for Opencart have to do with style elements so you will need to know where certain <div> ‘s are. Dreamweaver makes it very easy to see where the DIV element opens, and where it closes. In your DW, look for the following div element located near the top of the page: <div class=”breadcrumb”> Once you see it, with your mouse left click anywhere on that element and you will see the element show up in the pagination elements on the bottom of the page. Check the screen shot:
Now, if you click on the paginated element the entire div block will highlight in BLUE. Dreamweaver is calculating based on the elements on the page where it starts and stops. It’s not ALWAYS correct but usually it hits the nail on the head. When you start delving into projects that have tons of elements this is greatly useful. One missing tag can be very bad for a web page.
Sometimes you need to find a lot of the same text strings and replace them with something. You don’t have to do all of them one by one. You can actually do a mass find/replace. To do this simply click on EDIT > FIND AND REPLACE. Just insert the string you are searching for and the string that you are replacing it with and press replace all.
I hope this helps a little. There are many tutorials that could be written concerning the use of Dream Weaver. Perhaps we will send more your way soon!