4elements, Amsterdam, Holland

  1. Understanding Marketing Campaigns in OpenCart

    In any business, once you've finished the basic setup, one of the most important things to keep your eye on is the net outcome. Obviously, you would always look for new tricks to improve sales, whether it's through different promotional campaigns or providing discounts.Â

    In the era of e-commerce too, it's no different ball game—you need to be alert and prompt to apply the strategies which keep you alive in the competitive market. In this tutorial, we'll look at running a marketing campaign in the context of OpenCart, which is used to boost the sales and impact on your business's bottom line.

    From OpenCart 2.0.x onwards, you'll see a new feature included: "Marketing Tracking". It allows you to create marketing campaigns from the back-end. Let's try to understand the basic concept of a marketing campaign before we go ahead and explore marketing campaigns with OpenCart.

    The Concept of Marketing Campaigns

    Here's Investopedia's definition of a marketing campaign:

    Specific activities designed to promote a product, service or business. A marketing campaign is a coordinated series of steps that can include promotion of a product through different mediums (television, radio, print, online) using a variety of different types of advertisements.

    So basically, it's an advertisement of your product through different media. However, what we're interested in is the online marketing campaign method in the context of this article. In this method, you'll focus on creating banner ads and tracking the sales they generate.

    Let's go through a simple example to understand this. Christmas is coming soon and you want to promote certain products of your online store as part of a "Christmas Campaign". So you're creating specific banners related to those products and putting them on your site and on other third-party sites too.Â

    Of course, third-party sites won't show your campaign free of charge, so you'll have to pay as per the contract. Each campaign is identified by an unique link which allows you to track the sales generated by the specific campaign. Thus, it allows you to analyze the traffic and sales generated by third-party campaigns, and whether you should continue with them or not!

    How to Create Marketing Campaigns From the Back-End

    Now, let's go through the process of creating campaigns from the back-end of OpenCart. Log in to the back-end and navigate to Marketing > Marketing.

    Campaign Listing

    As you can see in the above screenshot, it'll list all the running campaigns in your site at the moment. It also provides a useful search interface to filter the campaigns listing. So far, there are no campaigns, so let's create a one. Click on the + sign at the top right to create a new campaign.

    New Campaign

    Fill in the basic details and you're good to go. You don't need to fill in Tracking Code since it's already populated with the unique code for the campaign being created. You'll also see a couple of example links for this campaign, but we'll get back to that in the next section. For now, just hit the Save button to create the campaign.

    Set Up the Tracking Module in the Front-End

    So, we've created the campaign and now we're ready to start tracking it! As I mentioned earlier, you could either put campaigns on your own site or distribute them to third-party sites.Â

    For the sake of simplicity, we'll create a campaign code and put it on the home page of our own site using the "HTML Content" module of OpenCart! For those who are not familiar with this module, the "HTML Content" module allows you to create a custom HTML content block in the front-end.

    Navigate to Extensions > Modules and enable the HTML Content module if it's not enabled already. Once enabled, click on the edit button to create a new instance of the module as shown in the following screenshot.

    Edit HTML Content Module

    Fill in the details as shown in the following screenshot. Among the other fields, the Description field is important, and I've used HTML code which will display a linked image. Also, make sure to keep the Status to Enabled.

    Create Christmas Campaign Module

    Here's the HTML code:

    It's the simplest form of code which will display an image linked to your campaign. In the above example, we've used the "Apple Cinema 30" product as our example campaign, which means that clicking on the image will open the product detail page.Â

    The important thing to note here is "tracking=560fd1cb5c4e7" which will track the clicks. Make sure that you use the tracking code from the "Christmas Campaign". Obviously, you could use any other image instead of the image used in above example. Now, save the module and it'll be displayed in the list as shown here.

    Christmas Module

    Now, the last step is to assign the module we've just created to the home page layout. Navigate to System > Design > Layouts. Edit the Home layout and add a new module HTML Content > Christmas Campaign to the Content Top position, and save the changes.

    Assign Christmas Campaign Module to Content Top Position

    Head over to the front-end home page. You should be able to see the module we've just created!

    Front-End Preview

    Follow Up the Statistics

    So, you've set up the campaign and it's displayed on the front-end as well, but now what? Go ahead and click on the Christmas Campaign module on the home page, which will take you to the product detail page, and complete the order through to the end. Once the order is placed, navigate to Marketing > Marketing to list the campaigns in the back-end.


    The important columns to note are Clicks and Orders. They show how many times our campaign module was clicked and if they were converted to actual orders or not! So in this way, you could create as many campaigns you want to create, and track whether they were successful or not!


    In this article, we covered the important marketing concept of campaigns. We also created a campaign in OpenCart and published it to the home page. Use the comment feed to post your queries and suggestions!

    Furthermore, for those of you who have enjoyed our OpenCart content thus far, we also offer a wide variety of OpenCart software on CodeCanyon that you may find useful for study or for integrating into your application.



    Leave a comment › Posted in: Daily

    1. Must-Know Techniques for HTML5 Responsive Design

      The DNA of Responsive Web Design white paper


      When tablets and smart phones first began to emerge, many publishers developed distinctly separate websites, or at least distinctly generated HTML code trees, to customize the experience for visitors on different devices. Certainly solutions emerged to make it easier, such as this mobile WordPress theme plugin:

      Telerik Responsive Web Design Early Mobile Web Plugin for WordPress

      But, to really provide a solid experience for visitors on all devices, most projects required duplicate or triplicate design, coding and testing efforts.

      The concept of responsive web design sought to unify the code tree, eliminate code forks, and provide a simpler approach to providing a high-quality user experience across devices. At first, it required a bit of experimenting and some early expertise, but today, it's become mainstream. It's a testament to orientation around DRY engineering

      When I launched my personal WordPress site, choosing responsive design was still a bit of a leap—and many sites performed with different levels of quality for your visitor's experience.Â

      Twitter's open-source release of Bootstrap helped transform responsiveness in web design tremendously. Probably, like me, you run a responsive theme on your website and are familiar with the general concepts of dynamic presentation. But do you know how responsive web design works under the hood? Do you know how to build something responsive from scratch? Would you like to learn more?

      The DNA of Responsive Web Design

      In this tutorial, we're encouraging you to check out Telerik's latest white paper on responsive web design (RWD). Must-know Techniques for Building HTML5 Apps for Any Screen Size, which you can download for free right now, provides an outstandingly detailed guide to answer these questions and help you come up to speed.

      There are many reasons why responsive web design has gone from being called a trend to being synonymous with web best practices. It’s a fast and cost-effective way to serve a tailored experience to desktop and mobile web users. You can use your existing skill set, have one code base, one set of URLs and one design language.

      The white paper teaches you what you must know about responsive web practices so you can build apps for any screen size. It teaches you how to:

      • leverage the basic building blocks of responsive web design—grid systems, media queries and flexible content—to create responsive layouts that change and conceal or show items based on the visitor's device
      • choose a responsive web design framework such as Bootstrap or Zurb's Foundation
      • use advanced Bootstrap features, such as fluid containers, offsets, push/pull and more, to achieve even the most complex responsive web scenarios

      In this tutorial, I'll just give you a brief summary of what the white paper offers. Also, I do participate in the discussions below. If you have a question or topic suggestion, please post a comment or tweet at me @reifman or email me directly.

      Here are some of the areas that the white paper will teach you about.

      Media Queries

      Media queries are a part of CSS3, and they are what make responsive web design possible.

      Telerik Responsive Web Design Media Queries

      Essentially, media queries help the browser tell conditionals in your CSS code how to style, hide or reveal elements of content.

      Here's an example for the smallest device size on up to one with a width greater than 768 px:

      Popular frameworks like Bootstrap, Foundation and Telerik RadPageLayout make extensive use of media queries to create their powerful grid systems.

      Grids and Breakpoints

      Using media queries within your code, you can construct stylesheets with grids that respond fluidly to devices—dynamically adjusting what and how the visitor sees your content based on their device and the width of their browser.

      The syntax may vary between frameworks, but the general concept is the same. Each device size has a corresponding media query and style properties that create the desired layout effect. These media queries are referred to as break points. Bootstrap identifies its break points as xs (extra small), sm (small), md (med), lg (large). These refer to the device size.

      Here are some Bootstrap examples and what they might render as on different sized devices:

      Upper left is small devices and smaller tablets, upper right is medium sized devices. Lower is larger devices and desktops.

      Telerik Responsive Web Design Grid Examples

      Another common concept is the basic content container. The container element is the outermost element of the layout. Its purpose is to create white space between the layout and the edge of the browser window.

      Telerik Responsive Web Design Container

      Working With Content

      The white paper also shows you responsive web design instructs content to expand or contract based on the visitor's display size:

      Telerik Responsive Web Design Working with Content

      Selecting a Framework

      I believe that choosing standards is incredibly important in successful software development. It helps teams communicate and allows new people to come up to speed quickly. It makes hiring people easier knowing their skill set in standard technologies. And it makes upgrading for security, performance and features easier over time—especially when using open-source technologies.

      Choosing a standard framework in responsive web design can make a huge difference to your project's success or failure. The Telerik white paper walks you through the pros and cons of one of the most popular, Bootstrap:

      Telerik Responsive Web Design Bootstrap
      Bootstrap offers best in class features like a solid responsive grid, mobile first design, CSS helper classes, adaptive JavaScript components and much more. The grid is, by default, a standard 12 column grid with a simple syntax for creating layouts that support multiple screen sizes.

      The white paper also highlights Zurb Foundation. It's an open-source framework that evolved from Bootstrap.Â

      Telerik Responsive Web Design Zurb Foundation

      Foundation is packed with advanced features suitable for teams with experienced front-end developers, particularly those who use Sass. Â

      Advanced Layout Features

      Telerik Responsive White Paper Advanced Layouts

      The white paper goes into a number of advanced topics as well:

      • Fluid containers
      • Nested rows
      • Offsets
      • Push/Pull

      Without going too far, it gives most of us a very detailed introduction of the most important aspects you need to know.

      Download the Whitepaper Now!

      I hope I've intrigued you enough that you want to learn more. As a project manager who regularly manages people with expertise in these issues, I found this to be a super, easily understandable guide to responsive web design and how it works.

      Want to dive in? Visit Telerik's White Paper collection and download Must-know Techniques for Building HTML5 Apps for Any Screen Size now.

      One More Thing...

      These responsive frameworks are important starting points and include UI components to get your project started. The components usually contain the basic features needed to operate and build prototypes. However, your more advanced and feature-complete applications require more robust user interface features. Soon, you're looking for a responsive-web-compatible UI suite.Â

      Telerik Kendo UI

      The Telerik Kendo UI has a responsive grid, charts, scheduler, and more—components that work seamlessly with any responsive web design framework that you're using. It's made by our sponsor who created the RWD white paper above.

       Telerik Responsive Web Design The Kendo UI

      I just want to give you a quick visual tour of what you can expect from the Kendo UI:


      Building advanced interactive grid controls is never easy. Kendo UI provides a powerful, flexible grid out of the box:

      Telerik Kendo UI Grids


      There's a schedule (or calendar) view:

      Telerik Kendo UI Scheduler


      Kendo UI includes built-in charts:

      Telerik Kendo UI Charts


      And there's a feature-rich, easily configurable editor:

      Telerik Kendo UI Rich Text Editor


      In fact, there's a library full of 73 more UI widgets to add on:

      Telerik Kendo UI Widgets

      What's Next?

      Basically at this point, there are two things for you to do:

      1. Download the Must-know Techniques for Building HTML5 Apps for Any Screen Size to learn about responsive web design and frameworks.
      2. Sign up for the Kendo UI Framework Free Trial and get started with downloading the code.

      I hope you're intrigued by what Telerik's HTML5 whitepaper can offer (and by the Kendo UI Framework). Please feel free to post your experiences below, as well as questions and comments. You can also tweet at me @reifman or email me directly, and browse my Envato Tuts+ instructor page to see other tutorials I've written.Â

      Related Links



      Leave a comment › Posted in: Daily

    1. Doctrine ORM and Laravel 5

      As a PHP developer, you might have come across the term ORM. ORM is a way to work with databases in the same way you work with classes and objects. If you were to delve deeper into how web applications are designed and built, after doing some exploring in their ORM you would find two well-known patterns: Active Record and Data Mapper.

      Active Record refers to mapping an object to a database row. Indeed, each row in the database is tied to an object. When you retrieve a row from the database you can update, delete or save using the object itself. That’s how Eloquent and Paris work, and how it’s done in Ruby on Rails.

      On the other hand, Data Mapper is a layer of software which separates the in-memory objects from the database. With Data Mapper the in-memory objects needn’t know that there is even a database present. They need no SQL interface code or knowledge of the database schema. One such solution is Doctrine.

      Doctrine ORM

      What Is Doctrine?

      Doctrine is an ORM which implements the data mapper pattern and allows you to make a clean separation of the application’s business rules from the persistence layer of the database.

      Some of the advantages I discovered while using Doctrine with Laravel are:

      • Faster and easier to use.
      • Entities are just plain PHP objects.
      • Doctrine utilizes a “code first” approach, so you can create entities first, and then generate a database for them automatically. The reverse case is also possible, but I do not recommend it.
      • Supports annotations, XML and YAML for schema.
      • DQL (a replacement for SQL) abstracts your tables away.
      • Doctrine events allow you to easily hook onto specific database events and perform certain actions.
      • Repositories are more faithful to the repository pattern.
      • Transactional write-behind methodology lets Doctrine have less interaction with the Database until the flush() method is called.

      Of course, Doctrine has disadvantages too, but it is up to the programmer to choose the right ORM.

      Doctrine DQL

      DQL stands for Doctrine Query Language. DQL brings you object query language, which means that instead of a traditional relational query, you have queries in object form.

      DQL allows you to write database queries in an object-oriented way, which is helpful when you need to query the database in a way which cannot be achieved (or is very difficult) using the default repository methods.

      Sample DQL Query:

      Doctrine Filters

      Doctrine allows you to limit query results with Filters. For example, you may want to edit only the information of the logged-in user or make sure the current client’s data was returned from the database. A filter is an automatic solution for remembering specific conditions for all your queries.

      Doctrine provides SQL level limitations, so there is no need to maintain the clause in multiple repositories of your project. This enhances security and makes your code easier to read.

      Let’s look at an example:

      As you can see in the User entity, the result of JoinColumn is limited to only items with the condition of WHERE user_id = :user_id.

      Setting Up Doctrine 2

      To set up Doctrine, there is a bridge to allow for matching with Laravel 5’s existing configuration. To install Doctrine 2 within our Laravel project, we run the following command:

      As usual, the package should be added to the app/config.php, as the service provider:

      The alias should also be configured:

      Finally, we publish the package configuration with:

      Doctrine needs no database configuration and uses the current Laravel configuration, but if you want to override it you should change the Doctrine config file in Config/doctrine.php:

      That’s all there is to it.

      What Is an Entity?

      “Entity” refers to an object which has a distinct identity. An entity must have a specific identifier which is unique throughout the entire system, such as a customer or a student. There would be other objects, such as email addresses, which are not entities, but value objects.

      Let’s create a Post Entity App/Entity/Post.php:

      The class properties should be the same as the fields in the database table, or you can define them with the @Colum("name"="myfield") annotation.

      What Is a Repository?

      The repository allows all your code to use objects without needing to know how the objects are persisted. The repository contains all the knowledge of persistence, including mapping from tables to objects. This provides a more object-oriented view of the persistence layer and makes the mapping code more encapsulated.

      Now it’s time to create the Repository in App/Repository/PostRepo.php:

      The Doctrine EntityManager works as the access point for the complete management of your entities. Then, create the Controller App/Http/Controllers/PostController.php:

      View and routing are the same as usual.

      I prefer to create my own Validator based on Laravel’s Validator class. Here’s the Validator App\Validation\PostValidator.php:


      If you have not previously worked with Doctrine 2, I hope this article has been interesting and informative. Laravel 5 does not use Doctrine, but as you can see, there are some packages which allow us to easily use it with Laravel. I created a simple blog app with Laravel 5 and Doctrine ORM, and I hope this can help you to create your desired app. I welcome your comments.



      Leave a comment › Posted in: Daily

    1. A Beginner’s Guide to Titan Framework: Installation & Integration

      We all know that the WordPress Settings API is hard, and while it provides you with more control, there is a need for a single API that can be used to build admin panel settings pages, meta boxes for post types, and options in the customizer. This is where Titan Framework steps in.Â

      In my previous article, I gave a quick introduction to Titan Framework, in which I highlighted some of the features which make it the finest of all options frameworks. Now it's time to begin exploring some of the details of this framework. In this article today, I will explain how you can install, integrate and configure Titan Framework with your WordPress project. So let's start!

      Titan Framework's Installation

      Titan Framework is plug and play! That means it comes as a plugin which can be downloaded, or you can embed it in your WordPress theme/plugin.

      I personally like the later, i.e. embedding it in the project of installing plugins. If you'd like to install it as a plugin, here is what you need to do:

      • Log in to your WordPress dashboard.
      • Go to Plugins > Add New.
      • In the search bar, write Titan Framework and browse it.
      • It appears first in the displayed results.
      • Click the Install Now button. This step completes the installation.
      • In the end, you will need to activate the plugin.

      Integrating Titan Framework in Your Project

      Installing and activating the plugin is not sufficient for Titan Framework to work. You'll need to integrate it. To make it short and sweet, you are required to include Titan Framework in the core file of your WordPress development project, which could either be functions.php of your WP theme or the core PHP file of your WP plugins. Titan offers two ways through which it can be integrated. These are:

      1. Integrate using the plugin.
      2. Integrate by embedding the framework.Â

      Both of these methods will bring the same outcome, i.e. include Titan Framework in your project. However, the approach adopted in each is slightly different. So, let's explore each one of these options.

      1. Integrate Using the PluginÂ

      The plug and play aspect of Titan Framework is pretty great. However, this feature is also helpful in its integration. So, to make sure that Titan Framework gets included in your project, proper installation and activation of the plugin is a prerequisite. The next step is to add a new file called  titan-framework-checker.php.


      This file will serve two purposes. First, this script will verify that the user has installed the framework plugin. If not, it will generate an error message. Secondly, this file should be a part of your plugin/theme as your project becomes dependent on this framework.Â

      Just download this file from GitHub and place it inside your WordPress theme or plugin.

      Including Titan Framework

      Next you will include this file in your theme's functions.php or plugin's core PHP file using the require_once() command. To do so, add the following line of code:

      This completes the basic integration of Titan Framework via plugin.

      2. Integrate by Embedding the FrameworkÂ

      There are some developers who do not like to rely on a plugin. So, for all such developers this second method of integrating Titan Framework is quite handy. This sets you free from the hassle of installing and activating the Titan Framework plugin. But at the same time, embedding Titan in your project will stop notifying you about any updates in the framework.

      Creating a New Folder

      Embedding the framework begins with the creation of a new folder in your plugin/theme's directory. Name this folder titan-framework. All your framework related code is kept here.

      Including Titan Framework

      Again you will include this file in your theme's functions.php or plugin's core PHP file using the require_once() command. To do so, add the following line of code:

      This script will make sure that the framework gets embedded in your project.


      That's about it. The basic installation and integration of Titan Framework is pretty simple. I hope that both of the above mentioned methods are quite clear. This was just a quick setup of the framework. However, I haven't explained the basic concept of options and getting values from them yet. If you find any difficulty in this article then you may post your queries below or reach out to me at Twitter.. Â



      Leave a comment › Posted in: Daily

    1. Using get_pages() to Create Link Buttons to Your Site’s Top-Level Pages: Styling the Buttons

      Final product image
      What You'll Be Creating

      If you followed my previous tutorial, you'll now have a theme on your site (or a child theme) which includes links to your top-level pages in the site header.

      I created a child theme of twenty sixteen, and this is how my links are looking right now:

      Top level page links in the header - unstyled

      In this tutorial I'll show you how to add some CSS to your theme to make those links a bit nicer. Let's start by getting rid of the bullets and adding floats.

      Removing Bullets and Adding Floats

      Open your theme's stylesheet. If you created a child theme it will be empty, but if you're working with your own theme I suggest you add this styling in the part of your stylesheet where you keep styling for the header.

      A recap on the code that outputs the page links (if there are pages to link to):

      This means we're targeting a ul element with the top-level-page-links class and within that, li elements with the page-link class followed by a elements (i.e. links).

      First, let's remove the bullets. Add this:

      Next, let's get rid of the padding on each list item and add a margin-left declaration:

      Now refresh your screen and you'll see that the list styling is gone:

      Links styled - bullets removed

      Next let's get those links floating next to each other. Add this to your stylesheet:

      Now your links will be all next to each other:

      Links styled - floats added

      Next, let's move on to making the links look a bit more like buttons.

      Adding Margins, Padding and Backgrounds

      To make our links look like buttons, we'll add a margin, padding and a background to the links.

      Add this to your stylesheet:

      Note that I've only used a margin on the right as I want the left-hand button to align to the left of the page.

      When you refresh your screen, your buttons will look more button-like:

      Links styled to look like buttons

      They're looking much better but need a bit of finesse. Let's edit the color of the text and background so that when someone hovers over the button, it changes color.

      Adding Hover Effects

      Now let's make those buttons a bit more attractive.

      Add two more declaration blocks to your stylesheet, making sure you add these after the declaration block for links you just added:

      This changes the color of the links, removes the underline, and changes the color when someone hovers over a link or it's active.

      Let's see how this looks on the page:

      Link buttons with color styling added

      And when I hover over a link:

      The button turns light gray when I hover over it

      Much better!


      In this two-part tutorial, you've learned how to create links to your site's top-level pages which are automatically generated, and then to style those links using CSS so they look like buttons.

      This gives you a nice, prominent way to let your visitors go straight to those pages, and will be useful if you have top-level pages you want to ensure plenty of visitors can access.



      Leave a comment › Posted in: Daily

  • Page 3 of 113 pages  < 1 2 3 4 5 >  Last ›
  • Browse the Blog