OpenCart 2 Theme Development – Admin Side Work - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

OpenCart 2 Theme Development – Admin Side Work


OpenCart 2 Theme Development Admin Side Work can be the first main part of development. We need to create Controller, Language, View Files for our theme. We Already done the Controller here in the Previous Article. Let’s Move to the Language File.We have to create front-end files later.

 

Through the continues code we need to write bla bla codes. So just copy and use it for the first time to create your own development. Let’s take a look at brief, Here is the language file code.

language/kvvaradha.php

 <?php
$_['heading_title'] = 'Kvvaradha Settings';
$_['text_module'] = 'Modules';
$_['text_success'] = 'Success: Your changes have been saved';
$_['text_left'] = 'Left';
$_['text_right'] = 'Right';
$_['text_select'] = 'Select';
$_['text_clear'] = 'Clear';
$_['entry_position'] = 'Position:';
$_['entry_status'] = 'Status:';
$_['entry_sort_order'] = 'Sort Order:';

$_['entry_social_title'] = 'Social Icon Title:';
$_['entry_twitter_username'] = 'Twitter Profile:';
$_['entry_facebook_id'] = 'Facebook Profile:';
$_['entry_gplus_id'] = 'Google ID:';
$_['entry_pint_id'] = 'Pinterest Profile:';
$_['entry_about_title'] = 'About UsText:';

$_['entry_footer_info_text_help'] = 'This text is displayed right part of footer. You can write your about store text here.';

$_['entry_social_sub'] = 'Social';
$_['entry_twitter_username'] = 'Twitter Profile:';
$_['entry_facebook_id'] = 'Facebook ID:';
$_['entry_facebook_id_help'] = 'It will appear as a <em>Fan Box</em>.';
$_['entry_facebook_id_getID_help'] = 'If you don\'t know your ID, on your browser add <em>graph</em> before your full page url. Example: <em>graph.facebook.com/everthemes</em>. Your page ID will be displayed.';
$_['entry_facebook_header_text'] = 'Module header:';

$_['error_permission'] = 'Warning: You do not have PERMISSION to modify Kvvaradha Theme Options!';

// Text
$_['text_theme'] = 'Themes';
$_['text_success'] = 'Success: You have modified the default store theme!';
$_['text_edit'] = 'Edit Default Store Theme';
$_['text_general'] = 'General';
$_['text_product'] = 'Products';
$_['text_image'] = 'Images';

// Entry
$_['entry_directory'] = 'Theme Directory';
$_['entry_status'] = 'Status';
$_['entry_product_limit'] = 'Default Items Per Page';
$_['entry_product_description_length'] = 'List Description Limit';
$_['entry_image_category'] = 'Category Image Size (W x H)';
$_['entry_image_thumb'] = 'Product Image Thumb Size (W x H)';
$_['entry_image_popup'] = 'Product Image Popup Size (W x H)';
$_['entry_image_product'] = 'Product Image List Size (W x H)';
$_['entry_image_additional'] = 'Additional Product Image Size (W x H)';
$_['entry_image_related'] = 'Related Product Image Size (W x H)';
$_['entry_image_compare'] = 'Compare Image Size (W x H)';
$_['entry_image_wishlist'] = 'Wish List Image Size (W x H)';
$_['entry_image_cart'] = 'Cart Image Size (W x H)';
$_['entry_image_location'] = 'Store Image Size (W x H)';
$_['entry_width'] = 'Width';
$_['entry_height'] = 'Height';

// Help
$_['help_directory'] = 'This field is only to enable older themes to be compatible with the new theme system. You can set the theme directory to use on the image size settings defined here.';
$_['help_product_limit'] = 'Determines how many catalog items are shown per page (products, categories, etc)';
$_['help_product_description_length'] = 'In the list view, short description character limit (categories, special etc)';

// Error
$_['error_permission'] = 'Warning: You do not have permission to modify the default store theme!';
$_['error_limit'] = 'Product Limit required!';
$_['error_image_thumb'] = 'Product Image Thumb Size dimensions required!';
$_['error_image_popup'] = 'Product Image Popup Size dimensions required!';
$_['error_image_product'] = 'Product List Size dimensions required!';
$_['error_image_category'] = 'Category List Size dimensions required!';
$_['error_image_additional'] = 'Additional Product Image Size dimensions required!';
$_['error_image_related'] = 'Related Product Image Size dimensions required!';
$_['error_image_compare'] = 'Compare Image Size dimensions required!';
$_['error_image_wishlist'] = 'Wish List Image Size dimensions required!';
$_['error_image_cart'] = 'Cart Image Size dimensions required!';
$_['error_image_location'] = 'Store Image Size dimensions required!';
?>

And One more thing, We need to Create View tpl file here. The Next one will be the view page for the admin theme settings.

Create Theme

view/kvvaradha.tpl

<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
 <div class="page-header">
 <div class="container-fluid">
 <div class="pull-right">
 <button type="submit" form="form-theme-default" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary"><i class="fa fa-save"></i></button>
 <a href="<?php echo $cancel; ?>" data-toggle="tooltip" title="<?php echo $button_cancel; ?>" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
 <h1><?php echo $heading_title; ?></h1>
 <ul class="breadcrumb">
 <?php foreach ($breadcrumbs as $breadcrumb) { ?>
 <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
 <?php } ?>
 </ul>
 </div>
 </div>
 <div class="container-fluid">
 <?php if ($error_warning) { ?>
 <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?>
 <button type="button" class="close" data-dismiss="alert">&times;</button>
 </div>
 <?php } ?>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_edit; ?></h3>
 </div>
 <div class="panel-body">
 <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-theme-default" class="form-horizontal">
 <fieldset>
 <legend><?php echo $text_general; ?></legend>
 <div class="form-group">
 <label class="col-sm-2 control-label" for="input-directory"><span data-toggle="tooltip" title="<?php echo $help_directory; ?>"><?php echo $entry_directory; ?></span></label>
 <div class="col-sm-10">
 <select name="kvvaradha_directory" id="input-directory" class="form-control">
 <?php foreach ($directories as $directory) { ?>
 <?php if ($directory == $kvvaradha_directory) { ?>
 <option value="<?php echo $directory; ?>" selected="selected"><?php echo $directory; ?></option>
 <?php } else { ?>
 <option value="<?php echo $directory; ?>"><?php echo $directory; ?></option>
 <?php } ?>
 <?php } ?>
 </select>
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label" for="input-status"><?php echo $entry_status; ?></label>
 <div class="col-sm-10">
 <select name="kvvaradha_status" id="input-status" class="form-control">
 <?php if ($kvvaradha_status) { ?>
 <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
 <option value="0"><?php echo $text_disabled; ?></option>
 <?php } else { ?>
 <option value="1"><?php echo $text_enabled; ?></option>
 <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
 <?php } ?>
 </select>
 </div>
 </div>
 </fieldset>
 <fieldset>
 <legend><?php echo $text_product; ?></legend>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-catalog-limit"><span data-toggle="tooltip" title="<?php echo $help_product_limit; ?>"><?php echo $entry_product_limit; ?></span></label>
 <div class="col-sm-10">
 <input type="text" name="kvvaradha_product_limit" value="<?php echo $kvvaradha_product_limit; ?>" placeholder="<?php echo $entry_product_limit; ?>" id="input-catalog-limit" class="form-control" />
 <?php if ($error_product_limit) { ?>
 <div class="text-danger"><?php echo $error_product_limit; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-description-limit"><span data-toggle="tooltip" title="<?php echo $help_product_description_length; ?>"><?php echo $entry_product_description_length; ?></span></label>
 <div class="col-sm-10">
 <input type="text" name="kvvaradha_product_description_length" value="<?php echo $kvvaradha_product_description_length; ?>" placeholder="<?php echo $entry_product_description_length; ?>" id="input-description-limit" class="form-control" />
 <?php if ($error_product_description_length) { ?>
 <div class="text-danger"><?php echo $error_product_description_length; ?></div>
 <?php } ?>
 </div>
 </div>
 </fieldset>
 <fieldset>
 <legend><?php echo $text_image; ?></legend>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-category-width"><?php echo $entry_image_category; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_category_width" value="<?php echo $kvvaradha_image_category_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-category-width" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_category_height" value="<?php echo $kvvaradha_image_category_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_category) { ?>
 <div class="text-danger"><?php echo $error_image_category; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-thumb-width"><?php echo $entry_image_thumb; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_thumb_width" value="<?php echo $kvvaradha_image_thumb_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-thumb-width" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_thumb_height" value="<?php echo $kvvaradha_image_thumb_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_thumb) { ?>
 <div class="text-danger"><?php echo $error_image_thumb; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-popup-width"><?php echo $entry_image_popup; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_popup_width" value="<?php echo $kvvaradha_image_popup_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-popup-width" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_popup_height" value="<?php echo $kvvaradha_image_popup_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_popup) { ?>
 <div class="text-danger"><?php echo $error_image_popup; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-product-width"><?php echo $entry_image_product; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_product_width" value="<?php echo $kvvaradha_image_product_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-product-width" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_product_height" value="<?php echo $kvvaradha_image_product_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_product) { ?>
 <div class="text-danger"><?php echo $error_image_product; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-additional-width"><?php echo $entry_image_additional; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_additional_width" value="<?php echo $kvvaradha_image_additional_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-additional-width" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_additional_height" value="<?php echo $kvvaradha_image_additional_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_additional) { ?>
 <div class="text-danger"><?php echo $error_image_additional; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-related"><?php echo $entry_image_related; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_related_width" value="<?php echo $kvvaradha_image_related_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-related" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_related_height" value="<?php echo $kvvaradha_image_related_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_related) { ?>
 <div class="text-danger"><?php echo $error_image_related; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-compare"><?php echo $entry_image_compare; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_compare_width" value="<?php echo $kvvaradha_image_compare_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-compare" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_compare_height" value="<?php echo $kvvaradha_image_compare_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_compare) { ?>
 <div class="text-danger"><?php echo $error_image_compare; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-wishlist"><?php echo $entry_image_wishlist; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_wishlist_width" value="<?php echo $kvvaradha_image_wishlist_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-wishlist" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_wishlist_height" value="<?php echo $kvvaradha_image_wishlist_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_wishlist) { ?>
 <div class="text-danger"><?php echo $error_image_wishlist; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-cart"><?php echo $entry_image_cart; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_cart_width" value="<?php echo $kvvaradha_image_cart_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-cart" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_cart_height" value="<?php echo $kvvaradha_image_cart_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_cart) { ?>
 <div class="text-danger"><?php echo $error_image_cart; ?></div>
 <?php } ?>
 </div>
 </div>
 <div class="form-group required">
 <label class="col-sm-2 control-label" for="input-image-location"><?php echo $entry_image_location; ?></label>
 <div class="col-sm-10">
 <div class="row">
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_location_width" value="<?php echo $kvvaradha_image_location_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-location" class="form-control" />
 </div>
 <div class="col-sm-6">
 <input type="text" name="kvvaradha_image_location_height" value="<?php echo $kvvaradha_image_location_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
 </div>
 </div>
 <?php if ($error_image_location) { ?>
 <div class="text-danger"><?php echo $error_image_location; ?></div>
 <?php } ?>
 </div>
 </div>
 </fieldset>
 </form>
 </div>
 </div>
 </div>
</div>
<?php echo $footer; ?>

Conclusion:

That’s it, now, you can check it on your Backend. first you need to check your Extension, There you can find a new thing on themes filtered area. There After you have to enable the theme kvvaradha. Now, you need your custom template on the catalog directory themes. I mean under the Themes folder next to default theme.  Let’s Create theme by next article.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts