Category Archives: development

Moving to Magento 2

Moving to Magento 2

By | development | No Comments

We are asked on a daily basis, from new clients and existing, if they should move to Magento 2.0. The short answer is yes, but it is important to do your homework and create a detailed plan. Below are the top things we consider when making recommendations on upgrading and replatforming to Magento 2.0.

3rd Party Integrations

Almost all magento projects have some kind of integration with 3rd parties for email marketing, order management, inventory, shipping, taxes, 3PL, etc. The good news is that many of those major service providers already have modules ready for Magento 2.0 including MailChimp, Bronto, ShipperHQ, ShipStation and Alavara. Contact your account manager to find out if there is a Magento 2 module and if not when they plan to release it. If there isn’t a Magento 2.0 module in the works then it will need to be custom built.

Commercial Modules

Like 3rd party integrations, all projects have multiple modules. Some provide nice to have functionality that enhance UX while others are critical to the operation of your business. Whether you are evaluating moving to Magento or upgrading, we recommend taking the following approach:

  1. Identify the business and technical requirements
  2. Determine if there are existing modules that meet these requirements (Magento 1 or Magento 2).
  3. If something does not fit 100%, try to find a module that does 80% of the requirements – we can customize and build the other 20%
  4. If you need a Magento 1 module that doesn’t offer a M2 version, contact the developer to find out the timeline for release
  5. Compare the module release/development timeline relative to the overall project timeline to ensure they align

Custom Modules

If you are upgrading from Magento 1, moving over custom modules can be a much larger undertaking. We recommend going through a similar process of determining technical and functional requirements. Once you have all the details documented, investigate if the custom module can be replaced with either an existing module or check to see if it is now part of Magento 2. If not, the module will need to be either migrated or rebuilt.

Time and Energy

While managing a Magento 2 store is very similar to Magento 1, there  still needs to be dedicated time and effort to learning the ins and outs and getting your team ramped up. Moving to Magento 2 is a replatform and requires a detailed migration plan, regardless if you are already on Magento 1. Review your current infrastructure and hosting as they will require adjustments to support new versions of technology. Coordinate with technology, operations, merchandising and marketing to review the new platform so that everyone knows how to effectively do their job moving forward.

Make the move, Magento 2 is here and adds a lot of new features and benefits. Making the move can be a daunting task, but if you have a detailed plan that aligns with your business needs you can make the move as painless as possible. If you need help identifying, planning or executing the steps above, contact us to see how we can partner together for a successful Magento 2 launch.

New Employee Chato Ramirez

Meet The Team: Chato Ramirez

By | agency life, development, New Employee | No Comments

2015 has already been a busy year for us at Digital Operative, and we continue to add to the team. We would like to welcome Chato Ramirez into his new role as Senior Developer, based in our San Diego, CA. office.

Meet Chato Ramirez:

I began my professional career in 2005 as a digital designer, providing creative direction for a Swiss watch company. In 2006 I decided to make a career shift and began developing online stores for an ecommerce agency in San Diego. I quickly learned I could apply my design knowledge during the development process to provide a better final solution for my clients. After 9 years in the ecommerce industry working across several platforms and with every type of client, I have been involved in building and maintaining hundreds of successful online businesses.

Let’s get to know Chato a little better with RAPID FIRE:

  • Website You Visit The Most: Whiskeymilitia.com

  • iPhone or Android: Android

  • Favorite Phone App: Google Now

  • Favorite Industry related Website: Stackoverflow.com

  • If you could only visit one website for the rest of your life, what site would that be? Quora.com

  • Something you say frequently: “NO”.. to my 2 year old daughter

  • First thing you do when you get to the office: Check my email

  • If you could have any job in the world, what would it be: I love what I do now

  • How Do you take your coffee: Frozen, in ice cream

  • Fun Fact about yourself: I once rode a bike from San Francisco to San Diego

  • Favorite thing to do on a Saturday: Surf in the morning and hang out with my wife and daughter all afternoon

If you’re interested in joining the DO family, check out our job listings here.

DOImage

DO Is Hiring!

By | development, Digital Operative, magento | No Comments

Are you a passionate professional looking to work with the latest and greatest technologies that exemplify the savvy, spirit and enthusiasm of a digital agency? Well, the San Diego DO office is the place for you. The DO family is in search for individuals to fill two positions: Magento Developer and PHP Developer. If you are looking for a company who offers unlimited vacation, animal friendly facilities and bagel Fridays (EVERY Friday), then you have found the found the right spot! Check out our job listing below:

Magento Developer

As a Magento Developer, you will be expected to be passionate and energetic about cutting edge technologies. Not only will you learn existing methodologies, but you will be implementing your own know-how to ensure that DO is producing the best-in-class technologies on all of its products. Be prepared to roll up your sleeves, as you will work with web, mobile and ecommerce. You are expected to work collaboratively with system engineers, back-end developers and user experience designers throughout the process. Still reading? Click here to apply.

PHP Developer

The PHP Developer is expected to be passionate and energetic about cutting edge technologies. Not only will you learn existing methodologies, but you will be implementing your own know-how to ensure that DO is producing the best-in-class technologies on all of its products. Be prepared to roll up your sleeves, as you will work with web, mobile and ecommerce. You are expected to work collaboratively with system engineers, back-end developers and user experience designers throughout the process. Still reading? Click here to apply.

Please be sure to include your resume, cover letter, required salary (must be included) and your portfolio to attn: Shannon at: hr@digitaloperative.com. For more information, be sure to check out our website. We appreciate your interest in our company!

How to Start Coding Today – The Right Way

By | development | One Comment

Being a professional web designer does not mean that I need to know how to “code” a website, or even know much about coding in general, but there has always been a push from developers and the industry for a designer to have some front-end knowledge. As a result, I finally decided to figure it out on my own…Turns out it isn’t as complex as I had thought.

By learning to code a real website I found out so much about the post-design process that affect my actual design process. I also figured out how to make the developers life easier and help them use their time more effectively. Any web-designer without the ability to code their own page needs to learn if not for themselves, then at least for the developers who they hand their designs off to.

The key to starting to code, just as in learning another language, is baby steps:

1. Know the basics

85% of learning to code is unique in that you only learn by doing, failing, correcting, and playing around with code. And only about 15% is memorizing terms, syntax, and understanding the basics. Once you know the basic fundamentals and terminology, coding is pure trial and error. If you need to add style or structure to the page but you don’t know how you can always Google the answer.

Here are some great resources for the basics of HTML and CSS:

2. Video tutorial effectiveness – a common misconception

These can be extremely helpful, but will also only get you so far. In the world of design you could watch a video tutorial on Photoshop that would give you a tangible product at the end of the video that you created from scratch. In the process of creation you are also gaining valuable technical skills (which is all you are really getting from the video). In the world of coding, the videos are much more for terminology and learning concepts. Even if you were to follow a tutorial of the creation of a webpage from start to finish, it would only be explaining concepts and terms. Don’t think that you will be able to understand how to build your own page from a tutorial; they are only there to help teach you how everything generally works.

www.TeamTreeHouse.com is one of the best resources I have found at a very small price. Some of the tutorials on there are free but buying only a one month membership should be enough.

3. Even if you have no idea what you are doing, just start coding

I was pretty sure I still had no idea what the hell to do until I chose a website to code and just started building it. Start with a crude layout and slowly iterate on the page until the product starts to come together. If you ever are confused you can google your question, ask a developer you might know, or just take a step back and ask yourself why? When it comes to coding, everything has an answer or a reason why it is or isn’t working. It can get frustrating at times and it might take hours to simply space text out correctly but in the beginning, this is valuable learning time. You can read every book on HTML and CSS out there but you won’t learn a damn thing unless you just jump in and start doing.

4. Patience

What might at first seem like the most daunting problem you have ever encountered can immediately become a piece of cake once you have figured it out. No one likes errors or road blocks, but remember this: every time you encounter a problem you must solve, you are learning the most while attempting to fix it. Having patience and carrying through gives you mastery over that particular facet of code.

5. Ask a peer

If you are lucky enough to work with any developers or happen to know any friends that have some knowledge, suck it up and talk to them. It was hard for me at first to ask for help because I felt as though everyone was so busy, they wouldn’t have time to help me. What I’ve learned is most developers love teaching and sharing their passion with someone else that is interested. Plus, in the beginning, your problems are so well understood to them through their own trials and tribulations that the answers are very apparent to them. They can help you in a fraction of the time it would take you to figure it out. I once spent two hours trying to figure something out before I asked for help from a developer who straightened it out in about 15 seconds.

6. DO NOT USE OTHER PEOPLES CODE

You will soon find out that there are endless amounts of resources and “frameworks” around the internet that give you all of the HTML and CSS you need to create an amazing page in seconds. If you use the code from these, or even some of the code, you will simply never learn how to code. I started copying & pasting code from the young age of 14. I always had a decent grasp of what HTML meant and how it worked, but not nearly enough to code by myself from scratch. For over ten years I was convinced I had a good understanding of code. Even after customizing plenty of WordPress themes and watching every video on TeamTreehouse.com, I found out that I knew nothing once I had to actually write code from scratch. If you are stuck on something and you need to reference someone else’s code to help you, by all means, go for it. Just remember: referencing other people’s code helps you understand and learn while copy and pasting someone else’s code only sets you back even further.

7. Commit

If you want to learn to code it is best to make sure you will have a block of time to commit to the process. Spreading the learning over a course of time is not as effective because you will quickly forget a lot of what you learned and why it worked. You will also have to try and remember where you were, what you were doing last and why. Gaps of time in between the process throw off your train of thought and you will be forced to re-learn. Dive in, commit to a goal and accomplish that goal.

Responsive Javascript Part 2

By | development | No Comments

Quick recap. In part 1 of this blog we create two events, a hover event for desktop and a click event for mobile. With these events, we wrapped it around an IF statement so the script can decide which event to render base on window width.

In part 2 we are going to make that code better! The main issue addresses testing responsive. Most people seem to believe that, by dragging the browser handles, that’s is the best way to test responsive layouts. Just because the window emulate different resolutions doesnt mean its the best way to test. The ONLY REAL WAY of testing responsive is by device testing. Thank GOD there are browsers that render specific resolutions perfectly for this. But for the random people, developers included, that believe by going ‘epileptic’ on the browser handles to some random, nonsense resolution is testing, YOU ARE WRONG! AND PEOPLE LIKE YOU ^&# #%@%&$@#@% ^&%&&**$#!!! Shame on you and your house. Sorry, my client experience with responsive testing has caused me many nights of crying, half-naked in a fetal position.

Currently, if you test the code from part 1 you’ll notice, while shrinking the browsers between 960px and below that the events does not change. The code works fine, because actual site load will use the correct event. So if I was on my phone, the click event will fire. On my desktop, the hover event will fire. But for the people who resize browser handles, a better solution is warranted instead of reloading page for every break-point. This requires three additional steps.

A quick summary, we will wrap both events into a function, run an unbind event in the function and fire the function on window resize.

The original code from part 1.

Mark up

<img src=”http://lorempixel.com/400/200″ class=”test” />

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

if( $(window).width() >= 958){
	$('.test').mouseenter(function(){
		$(this).width(imgWidth * 2).height(imgHeight * 2);
	});
	$('.test').mouseleave(function(){
		$(this).width(imgWidth).height(imgHeight);
	});
}else{
	$('.test').click(function(){
		if( $(this).width == imgWidth || $(this).height() == imgHeight){
			$(this).width(imgWidth * 2).height(imgHeight * 2);
		}else{
			$(this).width(imgWidth).height(imgHeight);
		}
	});
}

Wrap it in a function and call the function.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

function myInteraction(){
	if( $(window).width() >= 958){
		$('.test').mouseenter(function(){
			$(this).width(imgWidth * 2).height(imgHeight * 2);
		});
		$('.test').mouseleave(function(){
			$(this).width(imgWidth).height(imgHeight);
		});
	}else{
		$('.test').click(function(){
			if( $(this).width == imgWidth || $(this).height() == imgHeight ){
				$(this).width(imgWidth * 2).height(imgHeight * 2);
			}else{
				$(this).width(imgWidth).height(imgHeight);
			}
		});
	}
}

myInteraction();

Now wrapping the IF statement in a function like this does essentially the same thing as part 1. But in this case, turning it into a function makes it easier to fire that function repeatedly. Now we want this to trigger every time the window is resized. Doing it this way will force the script to run the function every time the window is resized, the script determines which event to fire base on the width of the browser.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

function myInteraction(){
	if( $(window).width() >= 958){
		$('.test').mouseenter(function(){
			$(this).width(imgWidth * 2).height(imgHeight * 2);
		});
		$('.test').mouseleave(function(){
			$(this).width(imgWidth).height(imgHeight);
		});
	}else{
		$('.test').click(function(){
			if( $(this).width == imgWidth || $(this).height() == imgHeight ){
				$(this).width(imgWidth * 2).height(imgHeight * 2);
			}else{
				$(this).width(imgWidth).height(imgHeight);
			}
		});
	}
}

myInteraction();

$(window).resize(function(){
	myInteraction();
});

But another issue arises. Now we will have two events stacking, none negating the other. Which is really buggy. To fix this we will need to add some kind of unbind event. Since I’m using jQuery, and .off() event is best.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

function myInteraction(){
	$('.test').off();

	if( $(window).width() >= 958){
		$('.test').mouseenter(function(){
			$(this).width( imgWidth * 2).height(imgHeight * 2);
		});
		$('.test').mouseleave(function(){
			$(this).width( imgWidth).height(imgHeight);
		});
	}else{
		$('.test').click(function(){
			if( $(this).width == imgWidth || $(this).height() == imgHeight){
				$(this).width(imgWidth * 2).height( imgHeight * 2);
			}else{
				$(this).width(imgWidth).height(imgHeight);
			}
		});
	}
}

myInteraction();

$(window).resize(function(){
	myInteraction();
});

The idea here is to remove any events associated every time the function fires then reset the event through the IF statement. BAH-BOOM!!!

Responsive Javascript part 1

By | development | One Comment

Ever want to change desktop interactions to mobile friendly events? If so, then you’ve come to the right place! Well kind of. The background, your design team wants a section of the site to be interactive; on desktops a hover effect is desired. But this, being a responsive site for mobile, hover events do not work. So they want it to be a click event for that resolution. For developers, a simple if statement can change that. Below I’m going to create a simple example where you can take the concept and run with it.

This example will take intermediate knowledge of Javascript and jquery.

In this example

We are going to be making two simple events. Both events will trigger the same thing, doubling the size of the image. The first event will be a hover event, the second will be a click event. Then we will combine those two events to trigger off browser width.

Prep

  1. jquery linked
  2. a place to put your custom script

Mark up

<img src=”http://lorempixel.com/400/200″ class=”test” />

A simple image and class to demostrate events.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

First we need to create variables to measure the original size and height of the image. Just to remember what the original measurements were so we can toggle.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

$('.test').click(function(){
	if( $(this).width == imgWidth || $(this).height() == imgHeight){
		$(this).width(imgWidth * 2 ).height( imgHeight * 2);
	}else{
		$(this).width(imgWidth).height(imgHeight);
	}
});

The click event above compares the original sizes to the variables created. If the variables are equal to the current image size, the click event will increase the width and height x2. If the sizes are different, then restore the image back to its original measurements.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

$('.test').mouseenter(function(){
	$(this).width(imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
	$(this).width(imgWidth).height(imgHeight);
});

This hover event will increase the image’s size when the mouse enters its box, then restores it on mouse exit.

Now we have two events, a click event, which it optimal for tablets and mobile resolutions, and a hover event, for desktops and mouse interaction. Of course, having two scripts targeting the exact same object will cause some issues. So we need another IF statement to determine which event is needed based on browser size. To do this we will wrap both hover and click events into an IF statement.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

if( $(window).width() >= 958){
	$('.test').mouseenter(function(){
		$(this).width(imgWidth * 2).height(imgHeight * 2);
	});
	$('.test').mouseleave(function(){
		$(this).width(imgWidth).height(imgHeight);
	});
}else{
	$('.test').click(function(){
		if( $(this).width == imgWidth || $(this).height() == imgHeight){
			$(this).width(imgWidth * 2).height(imgHeight * 2);
		}else{
			$(this).width(imgWidth).height(imgHeight);
		}
	});
}

In this IF statement the window’s width is measured. If the window’s width is greater than 958px, I chose this window size because most desktop monitors are 960px and higher in resolution, and 960px the standard I believe, use the mouse enter event. If the browser is smaller use the click event. BAH-BOOM! that’s it. But there’s a part 2!!! Part two is mainly for testing and people who believe testing responsive is by going ‘epileptic’ on the browser handles.

Youtube and Vimeo Video Embed z-index FIX

By | development | No Comments

Have you ever had an issue where a YouTube or Vimeo video embed disrupts site z-indexes? Well I have, googled it, and found this tip from stackoverflow. It works perfectly, but there was one issue, my client is not web savvy. So I had to automate the process to make both of our lives easier.

What will you need to make this work? Jquery linked and a javascript file for this code, or you can embed it into your markup.

  1. We need to identify all video iframes. In this case the only iframes that were present were video embeds. With the code below, we are just targeting all iframes.

    $("iframe").each(function(){ //Do Something });
      $(this).attr('src',ifr_source+wmode);
  2. Detect source references. For each iframe, we are storing their ‘src’ reference into a variable.
      var ifr_source = $(this).attr('src');
  3. Create a variable for the new text string. This variable will be added to the end of the src reference.
      var wmode = "?wmode=transparent";
  4. Append the variables into iframe source. All together this is what the javascript should look like.
$("iframe").each(function(){
  var ifr_source = $(this).attr('src');
  var wmode = "?wmode=transparent";
  $(this).attr('src',ifr_source+wmode);
});

Hopefully, this tip is a time saver for you.

Thong is a Web Developer at DO.  He once tried to bribe the office to buy him a Power Rangers Morpher

Creating Configurable Products: Magento’s Undocumented Requirements for Configurable Attributes

By | development, magento | No Comments

I ran into this issue recently, while trying to create a configurable product in Magento. After clicking the Add Product button and selecting Configurable Product …

Create Product Settings form

I encountered a dead end and the following message:

This attribute set does not have attributes which we can use for configurable product”

Select Configurable Attributes form - None Available!

I was surprised because I had already created several eligible attributes, I began double-checking my attribute configuration. Magento provides this helpful(?) tip:

Only attributes with scope “Global”, input type “Dropdown” and Use To Create Configurable Product “Yes” are available.

Seems simple enough, but it’s not quite. After many hours double checking my attributes, creating new attribute sets, disabling modules, reinstalling my database from scratch and attempting all sorts of desperate debugging tactics, I was surprised to learn that there are actually two more requirements: the attribute must be visible (not an issue for me) and the attribute must be set to user defined.

The following code from the class Mage_Catalog_Model_Product_Type_Configurable shows the true requirements for a configurable attribute:

/**
* Checkin attribute availability for create superproduct
*
* @param Mage_Eav_Model_Entity_Attribute $attribute
* @return bool
*/
public function canUseAttribute(Mage_Eav_Model_Entity_Attribute $attribute)
{
    $allow = $attribute->getIsGlobal() == Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL // GLOBAL
    && $attribute->getIsVisible()      // VISIBLE
    && $attribute->getIsConfigurable() // CONFIGURABLE
    && $attribute->usesSource()        // DROPDOWN
    && $attribute->getIsUserDefined(); // USER DEFINED
    return $allow;
}

The key, for me, was setting the attributes’ user_defined property to true. If you create your attributes through the Admin UI, then user_defined will automatically be set to true. However, if you define your attributes in a setup script, as I did, you must set it manually.

$installer->addAttribute('catalog_product', 'color', array(
    'type' => 'int',
    'label' => 'Color',
    'input' => 'select',
    // THIS IS NECESSARY FOR ATTRIBUTES USED TO CREATE CONFIGURABLE PRODUCTS
    'user_defined' => true,
    'required' => true,
    'filterable' => 1,
    ...
    'option' => array(
        'values' => array(
            'Black',
            'Brown',
            'Grey',
        )
    ),
));

To modify this field for an existing attribute, edit the database table. There is no way to edit this property through Magento’s admin interface.

UPDATE `eav_attribute` SET `is_user_defined`=1 WHERE `attribute_code`=’color';

EAV Attribute Table Data

EAV Attribute Table Data Continued

Refresh the page you were stuck on and you should now see a configurable attribute:

Select Configurable Attributes form

That’s it! I hope this saves you some debugging time!

Matt Olsen a Senior Developer at DO, was recently Magento Certified

How Magento Won Over My Heart: A Developer’s Tale

By | development | 3 Comments
I’ve been working on Expression Engine for about a year now and I have been trying to get into the realm of e-Commerce with the highly flexible web application Magento. Coming from a Zend Developers background, and seeing that Magento is built on top of Zend, I came into the world of Magento with a bunch of preconceived notions about how good Zend Applications should look and act. All of which were smashed on my first day of looking through the example Magento Stores.
Here are some of the things I learned:


1. Tightly coupled framework


One big downside to Magento is the lack of leeway for creativity here. The sprawling ad-hoc implementations of the past be damned! There is only one way to do everything here. Let’s say I want to create a frontend component using html. In the web developers world, there are many, many ways to achieve the exact same functionality. In the Magento world, the organization of template-layout-theme paradigm is so tightly wound making solutions independent of this framework is a challenge, if not an impossibility. This is a good thing though, Magento has an incredibly powerful an extensible framework capable of tackling any problem you throw at it, with only a  little practice getting used to the organizational structure. This pattern is possible and works great because of the very flexible Zend dispatch process with multiple layers of pre and post-processing.
Also, what I thought was a clever use of Zend’s routing functionality to parse XML instead of Web Pages, almost like a compiler.


2. Robust “web hook” style set of observers


This system is already in place. Cut and paste. You don’t need to worry about anything because it works and does its job. That is, except when you need the system to do something it wasn’t necessarily designed for.
Never fear! The guts of this system are available for all of your programming prerogatives! Web hooks to the rescue. Need some custom functionality to occur every time a particular class of orders is executed? All you need to do is create an observer class and hook it to the correct web hook with a few lines of config code. Unlike other CMS systems that require a whole slew of seemingly unnecessary setup to get your code into the system. All you need to do is inherit one of the base observer classes and presto. The list of observable actions is pretty exhaustive too. Rock and roll.


3. Configuration vs. Convention


There are two ways to make things happen in Magento. Convention and Configuration. They work hand in hand. I tend to believe most software engineers try to make each piece of code they work on a meaningful unit with self contained functionality. This is obviously a dangerous way of thinking about systems. Self contained functionality leads to anti-patterns, god classes and other horrible habits. Magento has a good way of making everything you write completely useless, unless it is supported by either configuration, or convention, or both. Want to create a module at: http://test.com/site/dynamic_content ?  In no particular order you need to :


a) Build the template (convention).


b) Then build a layout to fit that module into the site (configuration).
Without a layout your template is useless and vice versa. This separation requires a special kind of attention to detail that at first I found cumbersome, but as I got used to it, I felt like I was a one-man agile team. Awesome.


4.  But all that complexity is a tad… esoteric.


While having a robust and generalized method of implementing the templating system. The trade off is that Magento is endlessly complex on how the actual data (product) is represented. If you are a small business with a limited technical knowledge you probably don’t care about creating complicated multi-tiered group products configurable to your desired attribute specification. If you want to pour over the minutiae of VAT tables and crazy shipping schemes, Magento has your back. Some might say this is needlessly complex and any complexity that codified isn’t flexible enough for the real world. The jury is still out for me and I’ll let the reader decide for themselves.


5.  Build on and integrate


This is purely a criticism of other e-Commerce platforms. Out of all the “carts” I’ve come across on the web, I consistently find one significant short fall. Extensibility. The proliferation of “1-click setup” stores leaves a big hole in the department of customization. Most are built to be self contained or integrate into third-party CMS systems. Magento doesn’t have this problem. With its own set of CMS tools, Magento provides the back-end bona-fides to build an enterprise class community right in house.


Happy Hunting!
Alec is a Senior Web Developer at DO. He once took a flying leap over the handlebars of an Sbyke.

8 Free/Open Source Must Have Add-On’s for Expression Engine

By | development | One Comment

Expression Engine (EE) is best known for its capacity to be a very customizable system, a lot of which comes from EE’s ability to add or extend functionality by way of Add-Ons.  In layman’s terms, much like an operating system, EE comes with a set of “apps” to cover the basic necessities and those apps are called Add-Ons.  For developers, EE  is best known for its active community backing. There are many commercial Add-Ons out there, but there are just as many free and open source Add-Ons  available that are not only great because they are free but also because they add functionality and help the overall performance of your site. While every EE project can be quite unique, there are a few that should be a part of every install.  Below I list the 8 free/open source must have Add-on’s for Expression Engine.

IfElse

One strange quirk with EE’s native advanced conditionals is that all the content within the conditional tags are parsed, with the conditional only determining what is displayed on the final output of the template. This can affect the performance of pages with many calls to modules like {exp:channel}, that must be processed but may not be displayed. But with the use of the IfElse plugin, this issue is now alleviated.

IfElse on Devot-EE

IfElse on Github

Switchee

From the same developer of IfElse and in a similar fashion comes Switchee. This plugin solves the same issue as IfElse, but by use of switch statements.

Switchee on Devot-EE
Switchee on Github

SEO Lite

One of the best solutions to add and maintain titles and meta tags is SEO Lite. With some simple setup and easy interface, it’s a breeze to add unique SEO data to each of your pages and entries.

SEO Lite on Devot-EE
SEO Lite Developer Site

Minimee

While there are many options to go about combining and/or minifying css and javascript files, Minimee is a great solution that integrates this functionality into EE. This extension has a wealth of parameters and configuration settings to customize the processing of each tag.

Minimee on Devot-EE

Minimee Developer Site

Deeploy Helper

Deeploy Helper is the quickest and simplest way to change configuration settings. This is most useful when migrating EE across multiple environments.

Deeploy Helper on Devot-EE

Deeploy Helper Developer Site

HackSaw

This plugin solves the seemingly simple issue of limiting the output of the number characters from entries. I find this to be one of the most robust options available, with the ability to limit by characters, words, and allowing specific html tags.

HackSaw on Devot-EE

low-Seg2Cat

If you ever use a category within your url, Low Seg2Cat is a very useful plugin. It adds the ability to get a category id from a url segment, assuming the url segment is the same as your category name, which is case sensitive.

Low Seg2Cat on Devot-EE
Low Seg2Cat Developer Site

SnippetsSync

While SnippetsSync is not an absolute must, it is very useful if you like having your content saved as files. This module adds the ability to save Snippets and Global Variables as files within your templates folder.

SnippetsSync on Devot-EE

SnippetsSync Developer Site

Chris Limon is a Front End Developer at DO. He has a magnificent beard.

Like what you see? Contact us for a quote. Get Quote