Visual Builder - Opencart module

Installation with Opencart Extension installer

If you have enabled FTP-access on your Opencart installation, you can install Visual Builder with Opencart Extension Installer with these steps:

1. Go to "Extensions->Extension Installer" -page on the Opencart administrator.
2. Upload the VisualBuilder.ocmod.zip archive found in "VisualBuilder->2.0.x" -folder.
3. If installation was successful go to Modifications page and click refresh button from the top right corner.
4. Enable Visual Builder from Modules page by clicking install button

Now you can access Visual builder either form Modules page or from "System->Design->Visual Builder"

Manual installation

Uploading the module to OpenCart

Unzip the Visual Builder package to your computer. Most module files are in the admin folder and we just need to upload that to the admin folder of the store. These files can be uploaded via a FTP client like Filezilla. 

In the screenshot below, the FTP client is connected to our store located in public_html/opencart. We saved our module, Visual Builder on our computer's Desktop. We now need to transfer the contents of the module's admin folder from our desktop to our store's admin folder. This can be achieved by selecting and dragging the contents of the admin folder from the left side(Local Site) to the scroll bar on right side(Remote Site). The contents of these folders will be automatically sorted into their correct file path. The module files should not overwrite any existing files in the OpenCart store directory.

Enabling the module in the administration

The newly uploaded module now needs to be installed in the administration. Log into the administration side of the store, and go to Extensions > Modules. In the list of core modules, we can see our Visual Builder placed among the modules in alphabetical order. Click "Install" to use the module. The module can be edited under "Action" > "Edit". The status under edit will need to be enabled to see the module in the store front. 

Optional steps

You can install Visual Builder ocmod by uploading visualBuilder.ocmod.xml -file form the Extension installer page. This will put the Visual builder link to System->Design->Visual Builder. You don't have to do this if you installed Visual Builder with Extension installer.

Visual builder is easy to use.

Below is a screencast where we demonstrate the functionality of Visual Builder on Opencart 1.5.x.

Below is a screenshot where you see the functionality of Visual Builder on Opencart 2.0.x.

1. Choose the layout you want to edit.
2. Move modules to content area of your choosing.
3. You can add modules to layout by clicking its name.
4. You can add new modules without leaving the builder
5. Yo can preview changes by clicking view switch.
6. You can exclude modules from showing in Available modules list.
7. You can edit module settings by clicking its name on the grid
8. or by clicking edit icon.

Custom layouts

It's pretty straightforward to add support for custom layouts.

Let's say category layout does not have content_top position.

1. Let's create category.tpl file in "admin->view->template->module->visualbuilder->layouts" folder. We have to name the files exactly as the layout code. We remember to use lowercase letters too. We put the code below to the new file and that's it.

   
   <div class="row">
   	<div class="col-md-12">
   		<div class="row">
   
   			<div class="col-md-3">
   				<?php include ($adminPositionsDir."column_left.tpl"); ?>
   			</div>
   
   			<div class="col-md-6">
   				<?php include ($adminPositionsDir."content_bottom.tpl"); ?>
   			</div>
   
   			<div class="col-md-3">
   				<?php include ($adminPositionsDir."column_right.tpl"); ?>
   			</div>
   
   		</div>
   	</div>
   </div>
   
   
   		

Custom Positions

It's pretty straightforward to add support for custom positions too.

Lets' say that we have footer_left, footer_center and footer_right positions in our Opencart installation.

1. First, we create 3 new files in "admin->view->template->module->visualbuilder->positions" folder. You can also duplicate current position files and change the filenames.

   We name them footer_left.tpl, footer_center.tpl and footer_right.tpl

   Below is the code we need to have in our new files. Pay attention to lines 3 and 4. Those are the only two lines we need to change for each file.

   <?php
   //Change these when creating new position
   $position="footer_left";
   $position_text="Footer left";
   
   ?>
   
   <span class="area-heading bg-primary"><?php echo $position_text ?></span>
   <div class="<?php echo $position; ?> edit-container" data-position="<?php echo $position; ?>" data-text="<?php echo $position_text; ?>">
   	<?php foreach ($layout_modules as $layout_module) { ?>
   		<?php if ($layout_module['position'] == $position ) { ?>
   			<div class="module" id="module-row<?php echo $module_row; ?>" data-sort="<?php echo $layout_module['sort_order']; ?>">
   				<div class="edit-module panel">
   					      	<div class="row row-flush row-table">
   			            	<div class="col-md-2 text-center bg-primary">
   			            		<em class="fa fa-arrows fa-inverse text-white"></em>
   					       	</div>
   			            	<div class="col-md-8 border-right">
   			            		<div class="panel-body">
   					<?php foreach ($modules as $module) { ?>
   			            <?php foreach ($module['module'] as $module) { ?>
   			      			 <?php if ($module['code'] == $layout_module['code']) { ?>
   							 	<a class="edit<?php echo ($module['setting']['status'] == 0 ) ? ' text-danger" data-toggle="tooltip" data-placement="top" data-original-title="'.$text_module_disabled.'"':'"'; ?> target="_blank" href="<?php echo $module['href']; ?>"><?php echo $module['name']; ?> <em class="fa fa-edit"></em></a>
   								<input type="hidden" value="<?php echo $module['code']; ?>" name="layout_module[<?php echo $module_row; ?>][code]" />
   							 <?php } ?>
   				      	<?php } ?>
   				    <?php } ?>
   						<input type="hidden" name="layout_module[<?php echo $module_row; ?>][position]" value="<?php echo $position; ?>" />
   						<input type="hidden" name="layout_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $layout_module['sort_order']; ?>" />
   						</div>
   					</div>
   					<div class="col-md-2 text-center">
   						<span style="cursor: pointer;" onclick="$('#module-row<?php echo $module_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="text-danger"><i class="fa fa-minus-circle"></i></button>
   				 	</div>
   				  <?php $module_row++; ?>
   				 </div>
   				</div>
   			</div>
   		<?php } ?>
   	<?php } ?>
   </div>
   

2. Next, we edit the main.tpl file in "admin->view->template->module->visualbuilder->layouts" folder and add our new positions to the grid. Visual Builder uses Bootstrap 3.

   
   <div class="row">
   	<div class="col-md-12">
   		<div class="row">
   
   			<div class="col-md-3">
   				<?php include ($adminPositionsDir."column_left.tpl"); ?>
   			</div>
   
   			<div class="col-md-6">
   				<?php include ($adminPositionsDir."content_top.tpl"); ?>
   
   				<?php include ($adminPositionsDir."content_bottom.tpl"); ?>
   			</div>
   
   			<div class="col-md-3">
   				<?php include ($adminPositionsDir."column_right.tpl"); ?>
   			</div>
   
   		</div>
   		<div class="row">
   
   			<div class="col-md-4">
   				<?php include ($adminPositionsDir."footer_left.tpl"); ?>
   			</div>
   
   			<div class="col-md-4">
   				<?php include ($adminPositionsDir."footer_center.tpl"); ?>
   			</div>
   
   			<div class="col-md-4">
   				<?php include ($adminPositionsDir."footer_right.tpl"); ?>
   			</div>
   
   		</div>
   	</div>
   </div>