23,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
Key Features
Book Description
This book is aimed at developers and designers who want to start developing their own themes and extensions and for those who want to know about the code workflow of the OpenCart theme and modules.What you will learn
Who this book is for
This book is aimed at developers and designers who want to start developing their own themes and extensions and for those who want to know about the code workflow of the OpenCart theme and modules.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 217
Veröffentlichungsjahr: 2015
Ähnliche
Table of Contents
OpenCart Theme and Module Development
OpenCart Theme and Module Development
Copyright © 2015 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: June 2015
Production reference: 1240615
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78398-768-9
www.packtpub.com
Credits
Author
Rupak Nepali
Reviewers
James Allsup
Dario Fumagalli
Commissioning Editor
Amarabha Banerjee
Acquisition Editor
Meeta Rajani
Content Development Editor
Susmita Sabat
Technical Editors
Rohith Rajan
Anushree Arun Tendulkar
Copy Editor
Vikrant Phadke
Project Coordinator
Izzat Contractor
Proofreader
Safis Editing
Indexer
Rekha Nair
Graphics
Abhinash Sahu
Production Coordinator
Aparna Bhagat
Cover Work
Aparna Bhagat
About the Author
Rupak Nepali is from Nepal. He has been working as a PHP programmer and on the OpenCart framework since 2010. He has also completed many projects and built many modules on OpenCart to meet his clients' requirements. He is currently working as a web developer at Corner Edge Interactive, Arizona, and as a freelancer on Elance, oDesk, and other freelancer sites. Rupak holds a bachelor's degree in computer information systems from Nobel College, Kathmandu, Nepal. He is currently studying for his MS degree in computer science from the Maharishi University of Management, Iowa, USA.
I have already written Getting Started with OpenCart Module Development. With lots of love from readers, I have been inspired to write this book. Thanks for loving my previous book, and I am sure you will love this book as well, since it covers extensions and themes.
I wish to thank my parents, especially my mother, Subdthara Nepali, and my father, Bhairab Nepali, who emphasized the importance of literacy. I also wish to thank my brothers, who helped at every step, as well as all my friends and seniors who provided me with the support and courage to write this book.
Thanks to Packt Publishing for providing me with such a great opportunity and everyone who assisted in the publishing of this book, including the reviewers.
About the Reviewers
James Allsup started developing an interest in selling online and creating websites with PHP at the age of 16. After he joined Welford Media in 2009, OpenCart became his platform of choice for e-commerce projects, shortly after his company became closely involved with its development and support. In 2012, he released OpenBay Pro, a multiple-marketplace solution that allows merchants to manage their eBay, Amazon, and Etsy stores directly from OpenCart.
Thanks to my late father. Without him, I wouldn't have been the person I am today.
Dario Fumagalli has been passionately building software since the dawn of microcomputers in 1980 and has never stopped adopting emerging technologies to increase his customers' satisfaction. From assembly code to C++, Delphi to C#, and PHP and its many frameworks to compound technologies (such as AJAX via jQuery), he has enjoyed learning every constantly changing technology and implementing it in a practical way for a result-driven business world.
In an era where the Web, mobile phones, and social networks dominate, Dario is currently implementing responsive, or adaptive, e-commerce and social media solutions. Another branch of his activities is related to securities analysis and price action trading, where he is able put into practice his software programming background to back-test strategies, implement the Monte Carlo simulation, and store financial data.
These days, he lives in Tenerife, one of the beautiful islands of the Canary Islands. He provides professional partnerships for interested companies, both where he lives and worldwide via the Internet.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Preface
If you can build OpenCart themes, then you can also customize the presentation layer of OpenCart. Likewise, if you can code OpenCart's extensions or modules, then you can also customize the functionality of the OpenCart e-commerce framework and make an e-commerce site easier to administer and look better. You can also change the way the default OpenCart system works. In this book, you will learn about the third-party frameworks used in the OpenCart framework, such as Bootstrap, Font Awesome, and FlexSlider. Similarly, you will learn about the global methods used in OpenCart. We will create a custom theme and describe most of the code of the presentation layer. Then you will be able to get a description of the modules' code and create a custom module.
In OpenCart, modules are a way of customizing and extending the functionality of OpenCart. This book shows you how to create a customized theme and make all sorts of extensions: OpenCart modules, an Order Total module, the idea of creating payment and shipping modules, and ways of creating custom pages and forms on an OpenCart module to carry out insert, edit, delete, and list operations (the CRUD functionality).
This book focuses on teaching you all aspects of OpenCart's modules and themes by showing and defining code examples. We describe how to build a new theme and module from the default OpenCart theme and module. This book describes every line of code so that you will know what the code does. You will be cloning the default theme to make a new customized theme.
Each chapter teaches you how to create a new customized OpenCart theme. You will be able to create a customized theme and a Hello World module by cloning HTML. Likewise, you will get a description of every line of code of the default Featured module of OpenCart. Then we will create feedback pages used to manage feedback, and you will be able to create an Order Total module called Tips Order Total module.
Each chapter builds a practical theme and a module from the ground up using step-by-step instructions and examples.
What this book covers
Chapter 1, Getting Started with OpenCart 2.0, describes the structure of the files and folders of the default theme. This chapter shows you how to manage the layout and position of the module in a theme. You also learn the following: how to change the general settings of the images; module images; how to create and manage banners, carousels, and slideshows; and managing the layout.
Chapter 2, Bootstrap, Font Awesome, and FlexSlider in OpenCart 2 Themes, teaches you how OpenCart uses third-party frameworks, and how we can use them to design themes and modules easily, effectively, and efficiently. You get to learn these topics: why Bootstrap is used in OpenCart themes, basic templating with the use of the Bootstrap, and how to use Font Awesome and FlexSlider.
Chapter 3, Creating Custom Themes, gives a checklist to be taken into consideration for the header, footer, and other sections when creating a new custom theme. In this chapter, we change the style of the currency module, show it in a row, describe the code of the top category menu, and then style the top menu with different CSS. We describe most content area codes, such as the home, category, information, and contact us pages. We also edit CSS in a style sheet to change the background and get the knowledge to customize the theme and make a new design for the theme.
Chapter 4, Getting Started with OpenCart 2 Modules, starts off with modules in OpenCart. Here, you learn to clone the HTML content module into the Hello World module, and you are shown the way to install, configure, and uninstall an OpenCart module, and show the structures of admin and frontend files.
Chapter 5, Extensions Code, describes the code of extensions, lists all the global methods of OpenCart, shows you how to configure the feature product module, describes the code of the Featured module, shows you how to start coding for the shipping module, and describes the payment module.
Chapter 6, Create OpenCart Custom Pages, is where we create a listing page and a form page; perform actions such as data retrieval, insertion, and deletion; and show them in the frontend. You get to learn the ways to manage data and create a page to list it, insert data into the database, retrieve it (either to display or to edit), and finally delete the data. Likewise, we show you how to list the data at the frontend by creating the required page. In this way, you will be able to create modules and pages to manage data across OpenCart.
What you need for this book
You should have OpenCart installed and should have knowledge of the OpenCart backend and frontend.
Who this book is for
This book is for programmers working with OpenCart who want to develop custom OpenCart modules. You need to be familiar with the basics of OpenCart and PHP programming, and, after reading this book, you will be able to create customized OpenCart modules.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "All CSS and JavaScript files and folders of Bootstrap are in the bootstrap folder. Likewise, all related files and folders of Font Awesome are in the font-awesome folder."
A block of code is set as follows:
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "After editing it, you have to click on the Image tab."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
Chapter 1. Getting Started with OpenCart 2.0
OpenCart is ane-commerce cart application built with its own in-house framework, which uses theModel-View-Controller-Language (MVCL) pattern. Thus, each theme is in the OpenCart view folder, and every module follows the MVCL pattern. In this chapter, we will describe some basic settings in OpenCart version 2.0, and help you set up the required environment for template designing, or theme designing, and module making.
The features of OpenCart
The latest version of OpenCart at the time of writing this book is 2.0.1.1, which boasts of a multitude of great features:
Its pre-existing features include the following:
It also supports:
It is search engine optimized and has backup and restoration tools. It provides features such as printable invoices, sales reports, error logging, multistore features, multiple marketplace integration tools such as OpenBay Pro, and many more.
Now, let's start with some basic general setting that will be helpful in creating our theme and module.
Changing the OpenCart shop's general settings
Let's begin with the general settings that affect the frontend so that you will understand things you need to take into consideration when creating the OpenCart theme and module. While installing fresh OpenCart, it uses the default data and settings in the database provided by OpenCart. We describe it based on the default settings.
In OpenCart 2.0.1.1, go the address http://localhost/packtthemeshop/admin (if you are browsing through localhost), the admin menu will appear in the left column, and it can be extended as required by clicking on the icon in the top-left corner icons near the logo, shown here:
Now, let's start setting images' height and width.
Setting image height and width
Most of the time, developers and store administrators are confused about the image height and width, so we are covering it here. Most image sizes are managed from the admin sections, such as the category image size, product images, and so on. We can set most of the image size from the admin dashboard menu, go to System | Settings. Then, edit the store for which you want to edit the image size. The following screenshot shows the Store List from which you can select your particular store to edit by clicking on the edit icon shown in blue:
After editing, you have to click on the Image tab. You will notice that most of the image settings are done from here except for the module image setting. In the Image tab, you will see something like this:
We can change the logo from here, so when designing a new OpenCart theme, we must take care to ensure that the logo is retrieved from the database. Likewise, the favicon icon is also inserted from the Image tab, so we should take care about that as well. Category image sizes are also managed from here. Let's check out the Desktops category page, you can see the page by hovering the cursor over Desktops in the menu and clicking on See All Desktops. This is what you will see from the default options:
Now, change the * Category Image Size: input field from 80 to 770, and the next field from 80 to 100 (the length is in pixels). Then, refresh the Desktops category page link and you will see the changes in the Desktops category image size. Similarly, images in the product details page are also adjustable. The product's main image is adjustable from * Product Image Thumb Size as well as additional product image size. The following screenshot shows the product image thumbnail and additional product images:
When you click on the main image or the additional image, it then pops up to show a larger image in the color box, whose image size is managed by the * Product Image Popup Size:.
In the same way, related products' images, the compare image size, image sizes in the wish list, and cart image sizes are all managed from image's settings page.
Tip
Downloading the example code
You can download the example code fies from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the fies e-mailed directly to you.
Managing the modules in the theme
We will now see how to manage modules in OpenCart 2.0.1.1. Layout and position play a major role in making the frontend modular. We will see how to manage modules in OpenCart 2.0.1.1.
Managing the image dimensions of modules in the default theme
Most of the module's image dimensions are managed from the module settings. So, when integrating the module into the theme, we have to take care of the settings. Consider this: in the Latest product module, there are settings for number of limiting the number of products to show, image width, and image height, as shown in the following screenshot:
You can see this by going to the admin dashboard's menu and then to Extension | Module. Edit the Latest module. You can insert the width and height of the image to be shown in the frontend in the module. It is flexible, which means that you can show images in different sizes on different pages and positions. So, while creating the theme we have to take care of this as well.
Creating and setting a promotional banner
A Banner is an image shown in the top, bottom, right, or left sidebar of a website, especially for the promotions. Banners can be uploaded and customized from Administrator section | System | Design | Banners. These banners are used in the Banner modules, the Carousel module or in the Slideshow module. If you want to add new banners, you have to navigate to Administrator section | System | Design | Banners, then click the Add New button showing a + symbol and enter the banner name; after that, click on the Add Banner shown with a + sign button, and you will have to insert the following details:
The following shows the Banners page that has the preceding fields in it:
After filling in the input fields, click on the save button, and your banner is ready to use in the modules.
Installing and uninstalling a module
OpenCart is a module-based system that allows us to extend this functionality. We can add many modules and remove them as per our requirement. Go to Administrator | Extensions | Modules, and then click the green + sign to install the module. If it is already installed, you can click the red - sign to uninstall the module, as shown in the following screenshot:
Setting the Banner, Carousel, and Slideshow modules
In OpenCart version 1.5.6.1, all layouts and positions need to be chosen while activating the module, but from OpenCart 2.0.1.1 onwards, the module section and the layout section are different. We first activate the module from the extension section, and choose the activated module and position for each layout. Let's show the Banner module in the home page.
Go to Administrator | Extensions | Modules | Banner. Then, click on the green +
