How to Make an Interactive Particle Logo Using Canvas
Demo:
Modern day web browsing has come a long way since the 90’s. Do you remember web surfing on your dial up internet and coming across every other website using really cheesy flash animations like spinning 3-d logos or mouse trails? I certainly do.
Now that flash is being pushed out of the scope of things (firefox recently announced that it will prevent flash from working in its browser) developers are starting to use an HTML element called Canvas. It has adopted some of the better features from flash and is being used widely in the front-end development community for creating interactive graphics, videos, and games that run in the browser.
Canvas uses scripting, such as JavaScript, to render graphics. It is currently supported by all recent versions of all major browsers and by most (currently 95%) of all active versions of those browsers. Canvases are very simple to create. The only HTML needed is a simple tag. There are no required attributes. If you are worried about supporting all browsers, you can put a fallback element inside of this tag for older browsers to read when they can’t use canvas.
[code language=”html”] <canvas><!– Fallback goes here –></canvas>[/code]
For our project, we will be making two canvases. One for our reference image and the other for our graphics. In this example we will give both elements id attributes to allow easy implementation of JavaScript. You can also set an inline width and height in the attributes, which is recomended when going smaller than the window size, but for the purposes of this demo our project will be set to the window’s width and height.
[code language=”html”] <canvas id="canvas-interactive"></canvas><canvas id="canvas-reference"></canvas>
[/code]
The canvas is initially transparent. The next step is to target each canvas in JavaScript and set up their contexts. This defines what type of content the canvas will hold. In this demo, our content will sit on a 2d surface.
[code language=”javascript”] var canvasInteractive = document.getElementById(‘canvas-interactive’);var canvasReference = document.getElementById(‘canvas-reference’);
var contextInteractive = canvasInteractive.getContext(‘2d’);
var contextReference = canvasReference.getContext(‘2d’);
[/code]
Our canvases are now setup and ready to be drawn on. Before we jump into particles, let’s go over how the ‘rendering’ will work. Our animation will rely on the method: window.requestAnimationFrame(callback). You might be familiar with setInterval(function, delay) or setTimeout(function, delay). The main difference with window.requestAnimationFrame(callback) is it will limit itself to the user’s browser for the amount of requests made over time. So it only runs when the browser is ready for the next request. This allows the loop to run in a controlled environment instead of relying on a set number of milliseconds for the next call. The request also caps out at 60 times per second. If you have any experience with FPS (frames per second) this should start sounding familiar. Our main function that we will tie to this method will create shapes on the canvas, then delete them. Repeatedly. In this cycle, we are calculating each shape’s new position, which updates with each frame. This presents the illusion of movement.
The positions of these shapes, or particles, are based on a coordinate system. This coordinate grid is basically a map of the canvas pixels starting at (0,0) in the top left corner. So if you put an image at the start of the canvas that was 300px by 300px, the bottom right corner would sit at the coordinates: (300, 300).
For this specific example, we use a logo that has a single color and no background. The detailed specifications are:
• PNG format (allowing transparency)
• Completely transparent Background
• Foreground color set to the same color of the background it will sit ontop of
• Foreground opacity set very low (we were able to get ours to work at 3%, but this might vary depending on your logo. Start at 100% and when your program works, adjust the logo down until you find the lowest opacity possible).
Place the image src in an img tag under the canvases:
[code language=”html”] <img src="logo.png" alt="…" id="img">[/code]
The image sitting on the page should be hidden and the canvas should sit in the middle of the page, so we set up some simple css styling:
[code language=”css”] html, body {margin: 0px;
position: relative;
background-color: #303030; /* This should match your logo’s color */
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
img {
display: none;
}
[/code]
Let’s create our first frame.
The first step is to create our global JavaScript. This is where we will store all the information that will be accessed by the functionality of our script. We will define the canvas dimensions, logo dimensions, the center point, a logo location to get the top left corner of the logo for a reference of where to begin drawing our particles, the mouse attributes, particle array and the particle attributes.
[code language=”javascript”] var image = document.getElementById(‘img’);var width = canvasInteractive.width = canvasReference.width = window.innerWidth;
var height = canvasInteractive.height = canvasReference.height = window.innerHeight;
var logoDimensions = {
x: 500,
y: 500
};
var center = {
x: width / 2,
y: height / 2
};
var logoLocation = {
x: center.x – logoDimensions.x / 2,
y: center.y – logoDimensions.y / 2
};
var mouse = {
radius: Math.pow(100, 2),
x: 0,
y: 0
};
var particleArr = [];
var particleAttributes = {
friction: 0.95,
ease: 0.19,
spacing: 6,
size: 4,
color: "#ffffff"
};
[/code]
Next, we create the particle functions. To do this, I made a constructor function that creates a particle and has a prototype method that will a update the particles. The math in the update function would be a very long topic, so if you are unfamiliar with physics and trigonometry, I highly suggest checking out ‘Coding Math’ by Keith Peters. (http://www.codingmath.com/). Simply put, our update function calculates a new position for the particle by taking the old position and applying a formula. The result is a new (x,y) coordinate for this particle.
[code language=”javascript”] function Particle(x, y) {this.x = this.originX = x;
this.y = this.originY = y;
this.rx = 0;
this.ry = 0;
this.vx = 0;
this.vy = 0;
this.force = 0;
this.angle = 0;
this.distance = 0;
}
Particle.prototype.update = function() {
this.rx = mouse.x – this.x;
this.ry = mouse.y – this.y;
this.distance = this.rx * this.rx + this.ry * this.ry;
this.force = -mouse.radius / this.distance;
if(this.distance < mouse.radius) {
this.angle = Math.atan2(this.ry, this.rx);
this.vx += this.force * Math.cos(this.angle);
this.vy += this.force * Math.sin(this.angle);
}
this.x += (this.vx *= particleAttributes.friction) + (this.originX – this.x) * particleAttributes.ease;
this.y += (this.vy *= particleAttributes.friction) + (this.originY – this.y) * particleAttributes.ease;
};
[/code]
The next step is to layout our particles into a bigger shape, like pixels in a photo. This will be done by ‘drawing’ our logo to the reference canvas using the drawImage method. We then get the data of this drawing pixel by pixel. This data can get really confusing because it is in a one-dimensional array. This complicates things because we are working in a two-dimensional space. To add to the complexity, the only data logged is the RGBA(red, green, blue, alpha) values of each pixel. So for a single, transparent pixel, the data pushed is ‘0,0,0,0’.
In this example, we only need to check the alpha values and map a pixel when we come across one that is above 0.
To iterate through this data and translate each desired pixel into a coordinate, we need to create a nested for loop. This double iteration will move along the y-axis of the canvas grid and check every x pixel that column.
When the iteration comes across a pixel that has an alpha value greater than 0, we will create a particle at this coordinate.
[code language=”javascript”] function init() {contextReference.drawImage(image,logoLocation.x, logoLocation.y);
var pixels = contextReference.getImageData(0, 0, width, height).data;
var index;
for(var y = 0; y < height; y += particleAttributes.spacing) {
for(var x = 0; x < width; x += particleAttributes.spacing) {
index = (y * width + x) * 4;
if(pixels[++index] > 0) {
particleArr.push(new Particle(x, y));
}
}
}
};
init();
[/code]
Utilizing our particle array, we create a function that will iterate through each particle and run that particle’s update function to set its new x and y coordinates.
[code language=”javascript”] function update() {for(var i = 0; i < particleArr.length; i++) {
var p = particleArr[i];
p.update();
}
};
[/code]
The next step is to render these updated particles. We first clear the canvas to delete the old particles, then we draw new ones. Since our particles are going to live on our interactive canvas, we need to use the interactive canvas context. To clear the canvas, use: clearRect(starting x, starting y, ending x, ending y).
Next, we iterate through the particles and apply styles to them. We are applying a color using fillStyle = color, then drawing them to the canvas using fillRect(x, y, width, height).This method takes in the coordinates that we updated with the previous function, then creates a shape at that point.
There are many ways to draw shapes to a canvas. If you would like to learn more about the types of shapes you can draw, check out: (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes).
[code language=”javascript”] function render() {contextInteractive.clearRect(0, 0, width, height);
for(var i = 0; i < particleArr.length; i++) {
var p = particleArr[i];
contextInteractive.fillStyle = particleAttributes.color;
contextInteractive.fillRect(p.x, p.y, particleAttributes.size, particleAttributes.size);
}
};
[/code]
The next step is where it all comes together. We create an animate function that runs the update and render functions. It then opens up its special loop using the requestAnimationFrame() method that we mentioned earlier.
[code language=”javascript”] function animate() {update();
render();
requestAnimationFrame(animate);
}
animate();
[/code]
Finally, to track the mouse position (or touch position for mobile/tablet users). Add the following event handlers:
[code language=”javascript”] document.body.addEventListener("mousemove", function(event) {mouse.x = event.clientX;
mouse.y = event.clientY;
});
document.body.addEventListener("touchstart", function(event) {
mouse.x = event.changedTouches[0].clientX;
mouse.y = event.changedTouches[0].clientY;
}, false);
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
mouse.x = event.targetTouches[0].clientX;
mouse.y = event.targetTouches[0].clientY;
}, false);
document.body.addEventListener("touchend", function(event) {
event.preventDefault();
mouse.x = 0;
mouse.y = 0;
}, false);
[/code]
CSS Transitions – Change background color with a smooth slide on hover
As developers and designers begin to become a bit more comfortable with web design, often times they will want to start improving overall user experience by using techniques such as CSS transitions to animate different elements on the site based on interaction, for instance on hover. One trick that’s very easy to implement and almost always looks great on objects like buttons or navigation links is having the background color transition from one color to another with a horizontal wipe effect. To give you an idea of what I’m talking about, just hover the button below:
[button link=”http://www.google.com”]Click Here[/button]As you can see, when you hover the button, the background color changes from white to black with a smooth sliding effect from the right to the left. Implementing this effect is fairly simple and only requires a couple of lines of code, the thing you want to primarily focus on is the timing and the colors to make sure the animation is clean and pleasing to the eye.
To start, you’ll need a button or navigation item set up. In this case we’ll set up a link button with a class called “the-button” on it, but can name this class whatever you would like.
[html] <a class="the-button" href="your-link-here">My New Button</a>[/html]
Once you have your button in place, it’s time to set up the CSS. We will be using two things to build the base for the effect, linear gradient and transition, and then we will be ‘animating’ the background position to achieve the slide/swipe we’re looking for.
So to start, you’ll want to set up your new class and give it some basic styling. You can use our basic button code below or create your own:
[css] .the-button{width: 200px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 10px 0;
margin:0 auto;
text-decoration: none;
font-size: 14px;
font-family: "Source Sans Pro", sans-serif;
border: 1px solid #000;
color:#000;
}
[/css]
Now that we have a button in place, it’s time to create the two different background colors, the starting color and the color that will show on hover. To achieve this, we’re going to use ‘background-image’ ‘linear-gradient()’ where each color will be given 50% of the gradient. Then, we will set the background size to 200% width so that each color will actually take up 100% of our button’s width. Finally, we’re going to set the background position to “bottom left” so that the background will start on the left hand side, ensuring the white part of our gradient will fill the entire button.
[css] .the-button{width: 200px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 10px 0;
margin:0 auto;
text-decoration: none;
font-size: 14px;
font-family: "Source Sans Pro", sans-serif;
border: 1px solid #000;
color:#000;
/** START THE GRADIENT RULES **/
background-image: linear-gradient(to right, #fff 50%, #000 50%);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: bottom left;
}
[/css]
If you were to preview your button as it is currently, it would just look like a plain white button with a black border and black text, so now it’s time to add in the transitions based on the hovering of our button. To do this, we’ll need to add transition rules to both the ‘the-button’ class, but we’ll also need to create a ‘the-button:hover’ pseudo-class and add the transition rules to this as well.
[css] .the-button{width: 200px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 10px 0;
margin:0 auto;
text-decoration: none;
font-size: 14px;
font-family: "Source Sans Pro", sans-serif;
border: 1px solid #000;
color:#000;
background-image: linear-gradient(to right, #fff 50%, #000 50%);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: bottom left;
/** START THE TRANSITION RULES **/
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
.the-button:hover {
/** START THE TRANSITION RULES **/
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
[/css]
Now that the button is all set up and ready for transitions and the hover pseudo-class is also set up with transitions, all that needs to be done is to add the rules for the final state to the hover pseudo-class. In this example, we’re going to want to change the font color from black at it’s initial state to white, so that the text will still show on the black background after transition. We’ll also want to make sure our background changes to black from white, which we will achieve by animating the background position from ‘bottom left’ to ‘bottom right’.
[css] .the-button{width: 200px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 10px 0;
margin:0 auto;
text-decoration: none;
font-size: 14px;
font-family: "Source Sans Pro", sans-serif;
border: 1px solid #000;
color:#000;
background-image: linear-gradient(to right, #fff 50%, #000 50%);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: bottom left;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
.the-button:hover {
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
/** START THE FINAL STATE STYLING **/
background-position: bottom right;
color: #fff;
}
[/css]
So now if you’ve followed all of the instructions, you should have a simple link button element that uses a linear gradient to create a clean CSS transition from a white background to a black background. The example is included again below
[button link=”http://www.google.com”]Click Here[/button]
5 Useful WordPress PHP Snippets For WordPress Theme Development
We posted an article last week with some very useful PHP snippets for Magento theming, so we figured it would be best to follow it up with another article that focuses on WordPress theme creation.
One of the really great things about WordPress is the number of easy to use PHP snippets that are available right out of the box. Keep in mind, when I say easy to use, that’s really just my opinion that the PHP snippets created for WordPress are easier to remember than those of Magento. For example, if you wanted to get the content of a given page in Magento, you would first need to get the page by ID and load the page, then you would call the page content with the snippet below:
[php] <?php echo $page->getContent(); ?>[/php]
However, within WordPress, all you need to include is:
[php] <?php echo the_content(); ?>[/php]
So not only is the WordPress snippet considerably shorter and easier to remember logically, but also requires a lot less ‘pre-code’ in order to access the page in question and it’s contents. So without any further ado, here are 5 really useful PHP Snippets for WordPress theme development.
1. Show A Custom Logo On The WP Login Page
A lot of times WordPress developers will want to brand their WordPress admin login page with either their logo or their clients logo. New developers will often try and find the code file or stylesheet that is adding the WordPress logo in and then modifying it there, however this presents problems because the next time that WordPress is updated, it will overwrite those changes that you had made. The best way to do this is to make the modifications through the functions.php file within your theme. By making the modification within your theme, your changes will be safe no matter how many times you update your WordPress install. Here’s how you would do that:
echo ‘<style type="text/css">
h1{ height:150px; }
h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/path/to/image.jpg) !important;}
.login h1 a { height:100%; }
</style>’;
}
add_action(‘login_head’, ‘custom_admin_logo’);
[/php]
2. Show The Featured Image From A Post or Page
One of the most usable features on any WordPress page or post is the “Featured Image” box as it lets you attach an image to your content that can be accessed separately from the actual content. This makes creating posts and laying them out exactly as you’d like to with your CSS much easier to do. To include your featured image, you can just copy and paste the below snippet wherever you’d like it to show:
if ( has_post_thumbnail() ) { // First check to make sure that the featured image exists
the_post_thumbnail();
}
?>
[/php]
You can also pass the featured image size parameters, so in the case that your actual image is at 1800px X 1800px, but you only need it to load at 640px X 640px, you can pass it one of the following size parameters: ‘thumbnail’, ‘medium’, ‘large’, or ‘full’. For example, if I wanted to show the image at medium size I would include it like this:
[php] <?phpif ( has_post_thumbnail() ) { // First check to make sure that the featured image exists
the_post_thumbnail(‘medium’);
}
?>
[/php]
3. Show or Hide Widgets Based on the Current Page
Another useful WordPress trick that we will use on a lot of our WordPress templates is hiding or showing different widgets based on the page that is being viewed. For instance, let’s say we have a sidebar widget that allows for a user to book an appointment and that it is included on every page. Let’s also assume that we also have a “Book An Appointment” page that someone can navigate to and book an appointment this way as well. In this situation, it would not really make sense to include the “Book An Appointment” sidebar widget on a page that already has the appointment scheduling form on it, so we will want to make sure that this widget will not be included on this page. To do that you can include the following in your functions.php file:
function hide_widget_appt( $instance, $widget, $args ) {
if ( $widget->id_base == ‘appt_scheduler’ ) { // change ‘appt_scheduler’ to widget name
if ( !is_page( ‘appointments’ ) ) { // change ‘appointments’ to the actual page name
return false;
}
}
}
[/php]
4. Exclude Certain Pages From WordPress Search Results
One great feature that WordPress makes available is the ability to create Custom Post Types to organize all sorts of different data. However, website owners do not always intend for the individual post types to be individually visible. For instance, let’s say you’ve created a new custom post type called “FAQs” that will organize all of the “Frequently Asked Questions” your customers are typically looking for answers to. It’s likely that you would use the custom post type to organize the questions, and then create a page with a loop of all of the posts from the FAQs to show all of the questions and answers on a page. However, in most cases, you would not want to make the individual question and answer post individually visible, as this would be very little content within the single page and largely unnecessary for your user experience. There are a number of ways to ensure that these posts are not indexed by search engines, but when using the native WordPress search features, these posts will still be able to be found and navigated to. By using the snippet below, you can quickly filter out any posts that you do not want to be made searchable:
if ($query->is_search) {
$query->set(‘your_custom_post_type_here’, ‘post’);
}
return $query;
}
add_filter(‘pre_get_posts’, ‘filter_search’);
[/php]
5. Customize the Post Excerpt Length
Another great feature that WordPress makes available in addition to ‘the_content();’, is ‘the_excerpt();’, which is of course an excerpt of the full content. As useful and usable as the excerpt snippet is, often times theme developers will want to modify the length of the snippet so that it will either take up more or less space in the design. There are actually two ways in which this can be done.
The first way to change the excerpt length is done through the functions file and will change the length of your excerpt globally, which means that any time you include the excerpt it will always be the same length. Assuming we want to shorten our excerpt to 35 characters, we would include the following in our functions.php file:
[php] function custom_excerpt_length( $length ) {return 40;
}
add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );
[/php]
However, let’s say you needed to include the excerpt in several areas throughout your theme, but you needed a different excerpt length depending on the location. Instead of modifying the excerpt globally, you could always modify it directly in the theme template by echoing it as a substring and trimming it down to whatever length you would like. You can do that with the snippet below:
[php] <?php echo substr(get_the_excerpt(), 0,30); ?>[/php]
If you have any trouble using any of the snippets above, or would like further clarification on their usage, feel free to drop in a comment below or email us directly.
5 Really Useful PHP Snippets for Magento Theme Development
When new developers first attempt to tackle the beast that is Magento the overall size of the application and it’s syntax can become a bit overwhelming. We’ve put together 5 really useful snippets that can be used in any Magento theme that should save new Magento developers quite a bit of time and headache when developing a Magento website.
1. Include A CMS Static Block In A Phtml Template
An easy way to introduce content into a Magento phtml template is by using a CMS Static Block, which can be created and managed in the admin dashboard at CMS > Static Blocks. CMS Static Block’s are great because they can give the website owner an easy way to introduce text content, images, and code into predefined blocks in a template. Once you have a static block created, you can then call it in your template with the snippet below:
[/php]
All you would need to do is swap “static_block_id” for the ID of the static block you’d like to use.
2. Get The Base Store URL In A Phtml Template To Create Links
When building links in your Magento phtml templates, relative URL’s will simply not work and absolute URL path’s are never suggested as they create pretty significant management issues when it comes to updating URLs. However, Magento makes it really easy to dynamically include your website’s base URL in a php snippet so that you can easily build links to any page within your website without fear of URL updates (Remember to not include the trailing slash after your snippet as your website’s base URL already includes it).
[/php]
or
[php] <a href="<?php echo Mage::getBaseUrl(‘path/to/your/link.html’);?>">Your Link Name Here</a>[/php]
3. Get The Base Skin URL In A Phtml Template
Often times, new Magento developers will want to include images in their phtml templates, but will attempt to include them as they would in a static HTML website, for instance a relative path to the image like ‘assets/images/your-image-here.jpg’. In Magento, relative path’s to images will not work and it’s never good to include an absolute path in your templates because if the root domain were to change, you’d need to go back and manually update each one of those URLs. The correct way to do this in Magento would be to dynamically include the “Skin URL”, or the direct URL to your templates directory with a PHP snippet. Using the same image path as mentioned before, this can be done in two ways (remember to not include the trailing slash after your snippet as your website’s base URL already includes it):
[/php]
or
[php] <img src="<?php echo $this->getSkinUrl(‘assets/images/your-image-here.jpg’); ?>" >[/php]
4. Get The Current Page URL In Your Phtml Template
Many times when developing a Magento website, you’ll need to have access to the URL of the page you are currently on, for instance to save it in a variable for use in a conditional statement that will compare URLs with the intent on delivering custom content depending on the page the customer is viewing. This can be done with the snippet below:
[/php]
Or if you’d like to store it in a variable:
[php] <?php $current_url = Mage::helper(‘core/url’)->getCurrentUrl(); ?>[/php]
5.Check Whether A Customer Is Logged In Or Not
When creating the content for your Magento store, there may be pages, products, images, navigation links or basic text that you’d like to make visible only to users that are logged in. This snippet is always going to be used as part of a conditional ‘if’ statement, and can be used like this:
Your content for logged in users goes here….
<?php endif; ?>
[/php]
It can also be stored in a variable and used in conditional statements for nicer looking code:
[php] <?php $logged_in = Mage::getSingleton(‘customer/session’)->isLoggedIn();?>[/php]
How To Easily Disable Any Magento Extension
As most Magento store owners know, Magento extensions can be a huge help in quickly delivering some advanced or custom functionality to your Magento website. Typically, these extensions are installed in one of two ways, either through the Magento Connect Manager, or by uploading the extension files directly to your site via an FTP client. Now, when it comes time to uninstall the extensions in question, it’s an easy process to remove the ones that were installed via the Magento Connect Manager, but store owners are often a bit perplexed when it comes to removing the extensions that were installed via FTP.
Store owners, especially ones that are unfamiliar with the directory and file structure of Magento, will either look for an easy uninstall option, or more likely, will attempt to find all of the extension files within their website directory and delete each of them individually. As we now know, unfortunately there won’t just be an easy “Uninstall” button option, and manually deleting each extension file is not advised as it will take considerable time depending on the size of the extension and can have adverse affects on your store overall if done improperly.
However, Magento extensions are all built in a way that they all will always rely on a single configuration file that determines whether or not an extension is “Active” or “Inactive”. Because of this, enabling a disabled Magento extension or disabling an active extension is really as easy as modifying one line within one file. Best of all, you really don’t need to be a developer to do this, all you will need is an FTP Client (I suggest FileZilla), access to your site files via FTP, and a text editor (any of which will do). If you’re unfamiliar with what an FTP Client is, what it does, or how you can use it, it’s probably best that you start there.
For the purposes of this article, I’m going to assume that you are set up with your FTP Client and text editor, and that you have successfully connected to your website via your FTP Client.
So, once you’ve connected to your website, you will see the root Magento directory structure. I’ve included a screenshot below of a particular Magento install’s root directory, but just about any Magento installs will look about 99% similar to this. The directory you’re primarily looking for is the “app” directory, once you’ve found that, double click it to open it.
Once you’ve opened up the “app” directory, you will see several more directory options. From here you will want to click in to “etc” and then in to “modules” at which point you should see a list of files, all of which will end in ‘.xml’. These files are your extension configuration files and control whether the extension is active and which ‘Code Pool’ the extension is located in. This will typically be set to “Local” but can also be set to “Community” depending on the extension. For the purposes of this post though, this is not important, so no need to worry about what a code pool is or why it is used.
Now that you’re inside of the ‘app>etc>modules’ directory, you will want to find the XML configuration file that corresponds to the extension you’d like to disable. It should be fairly easy to find the XML file you are looking for, as the naming convention will typically have the extension developer’s name first and then the name of the extension after an underscore, or ‘Developer_Extension.xml’. Once you’ve located the correct file, you’ll want to download that to your local machine so that you can modify it.
Once you’ve downloaded the file, you will now want to open it up in your text editor. The first thing you should do is ensure you have a backup in case any of the changes made have an adverse affect on your system. In this case,the likelihood of this happening is minimal, but it’s still a good practice to get in to. Once you have your backup created and the actual file open, you should see something that looks like the image below, and the line you’re looking for is the one that says “
Once you’ve updated your site file, all you’ll need to do is upload the modified file back in to the FTP server, and then log back in to your Magento admin dashboard. At this point, the extension should be disabled, but may still be showing up in your admin view. If this is the case, you’ll just need to flush the store’s cache by going to System > Cache Management and then flush out the cache.
If you’ve done everything correctly, the extension in question should now be disabled without disrupting any other areas of your website. Also, if you ever need to re-enable the extension, all you will need to do is open the extension configuration file back up and change it back to “True”, flush the Magento cache, and it should then be available again.
Why Your Website Should Utilize A Content Management System
Whether you are building your first website or you’ve hired a web design company to handle the build for you, it is always advised that you use a content management system to make managing your website more efficient. There are multiple strong content management systems currently available, so whether you choose WordPress web design or another format, you will have complete control over the content within your website. To start though, we should give you a better definition of what a content management system is and if you truly need it.
What Is A Content Management System
At it’s core, a content management system is a web application, or piece of software that was built to run on the web. Typically, this software is installed on your own personal web server and run directly from within your domain, but there are content management systems that are hosted by the companies that own the content management system. The main difference here is that the ‘self hosted’ systems will typically be open source and free, while the ‘hosted’ content management systems will have a subscription or use fee attached. Regardless of whichever type of content management system you are using, they should perform the same general functions, including but not limited to creating and editing pages, managing navigation, creating and editing blog posts, managing a stores products and shopping cart, and anything else that could be directly related to your website’s content.
If you hire a web design team to build your website, they will likely have a preferred content management system, or CMS, but you should also check with them to make sure that it will be cost effective as well as whether it will meet all of your needs for publishing and managing content on a regular basis. One of the most popular content management systems available for both informational and e-commerce websites is WordPress, which offers a self hosted as well as hosted solution. It’s always suggested that you use the self hosted WordPress option as it will allow for the most customization and scalability, but if this is your first time designing a website on your own, it may be better to start with the hosted WordPress option.
It’s also important to consider who will be using the content management system that controls your website. If you will have multiple people in your organization updating the site, ensure the CMS offers user segmentation and access roles. This allows you to set permissions for various users, limiting their access to certain parts of the site. You retain more control over what is being published, when and where on the site. This also allows you to restrict your employees from any areas of the site where they could potentially break your website or cause site-wide problems.
However, if you are considering running an e-commerce store, there are several more factors that you should consider as how well your website functions will determine how profitable your business is. Think about just how many products you would like to list on your store, how often you will be updating your product offering, if you will need any sort of special or custom tools or features for your website, and most importantly how easy it will be for you and your team to use. When it comes to e-commerce, Magento is currently one of the more powerful e-commerce platforms, especially for larger stores, but is also considerably more difficult to use. An e-commerce platform like Shopify can easily be managed by even the most novice website owner and offers a great support team, however it does lack some of the more powerful features and customization opportunities that Magento offers.
Another great benefit to using a content management system is that they will typically offer a library of plug-ins or extensions. A plug-in is a piece of software that was created to ‘extend’ the content management system’s native functionality. For instance, let’s say you wanted to include contact forms inside different pages of your WordPress website. Instead of spending hours to create the forms and embed them in your website files, modify your database to store the form data, and create the code to submit the data to the database, you can spend a couple of minutes installing and configuring a plugin that will do the very same thing. Other examples of plugins can include tools to help improve your SEO, track your visitor data and information, and even capture new leads based on your visitors. The real goal is to find a CMS that offers the plug-ins you need and ones you might wish to make use of in the future.
Webmasters find numerous benefits to making use of a content management system. The overwhelming advantage, however, lies in being able to publish new content regularly, as this is what has visitors returning to the site again and again. If your current web design firm doesn’t offer this option, it’s time to look elsewhere. You will find your company benefits immensely when you choose to make use of a content management system for your sites.
The Importance of Navigation in Web Design
When it comes to web design, a knowledgeable developer understands certain elements are critical if the website is to provide the best user experience and return on investment. One element of great importance is your website navigation. If someone is unable to easily navigate your website, they are going to leave quickly, and ultimately your business will suffer. What makes this aspect so critical?
The Method Of Arrival
Experienced web developers, whether it be WordPress web design, or web design of any type, need to understand that visitors can land on a website through a number of different channels. As a result, not all of your users will necessarily enter in through the home page, meaning your navigation must cover cover your entire site. If your navigation is not included on all of your pages, or doesn’t include certain pages, your user may be stuck and unable to continue to other parts of the site to see what you have to offer or what you sell. It can also have an affect on whether or not Google’s crawlers can access every page on your website.
User-Friendly
The navigation of your website must not only be easily be understood, but should also be strategically set up to drive your visitors to the most important pages. If a visitor has to search too long for what they want, they are going to look elsewhere. You’ll find that there are really a variety of ways that you could organize your navigation to create the best user experience. For one, use a primary navigation, a secondary navigation (which can be a sidebar navigation on inner pages), and even link lists in your footer to help the crawlers understand your website.
By diversifying your website’s navigation like this, you’ll find your visitors are more likely to explore the site and possibly become frequent guests. Never make your visitor work to find information or products. If they must click multiple links to arrive at the desired destination, they may become frustrated and find another site that will make it easier for them. Once you lose a visitor’s interest, the chances of them returning to your site are very slim. Keep this in mind, and make it easy to move from point A to point B, regardless of where the visitor is on the site.
Conversion Rates
Simply put, visitors unable to navigate a site will leave, resulting in fewer conversions. If he or she cannot find the product they are searching for or the information they need, your conversion rates will surely suffer. Make use of attention grabbing calls to action on each page, or whenever possible, to increase conversions. Provide the visitor with the information needed to take this action, using phrases such as download now, get your coupon, get a quote, or sign up for the newsletter. You can also use your navigation to create funnels to ensure that users end up on the page you want them to land on in 1 to 2 clicks no matter where they click initially. Website owners can use funnels to drive users in to product pages, sign up pages, category pages, or anywhere else you’d like to have your visitors focus their attention.
Attention Span
The average user usually spends about three seconds on a page to determine if they wish to stay or look elsewhere. In this time, the user normally will quickly assess the websites aesthetics as well as if they can see what they are looking for right away. To help keep them on your page, website owners can use tools like sliders to showcase product or editorial photos that link directly to the pages they represent. Also, by making sure that your navigation includes not only top level pages like categories, but child level pages like sub categories or direct product pages, really helps with moving visitors through your website quickly and efficiently.
When creating a new website, your web development team will be able to offer other suggestions when it comes to your site’s specific navigation based on your requirements. It’s important to remember though to never discount the importance of your websites navigation, as doing so could lead to high bounce rates, low conversion rates, and an unhappy store owner. If you’d like to speak with our talented team of Fort Lauderdale web design professionals, just give us a call or send us an email to set up a free consultation.
Top Four Benefits of Hiring Professional Fort Lauderdale Web Design Services
Nobody can deny the irrevocable and inevitable growth of mobile technology around the world. Due to this reason, it is has become necessary for every online business to improve its visibility for every type of devices, and for a wide range of screen sizes. To ensure that you have approach to all sorts of viewers from different parts of the world, it is imperative that you plan your online presence properly. For you to achieve this, you need to hire professional Fort Lauderdale web design services. An established web design company is equipped with all the latest tools and technologies to deliver high quality website design and to make your site more accessible on every device. Professional web developers are committed to providing you the most consistent and effective web designing solutions that will give your users a great experience. Here are some benefits of hiring professional web development services.
Increased Search Engine Visibility
A well-designed website can help you to improve your search engine rankings. For starters, an experienced web design company can make sure that the code markup is clean and easy to read. Another factor that increases your search engine visibility comes from all the links and added exposure your website design gets across the web.
Reduce Your Maintenance Time Greatly
With a professional website design, the time you spend cleaning things up and ensuring everything is up to date is reduced greatly. This gives you more time to focus on other important things, such as increasing traffic, sales and visibility. In most cases, your design will not have to be touched for a year or two until you are ready for an updated look.
Consistent Brand Identity
A professional website designer thinks about the big picture. They can help you come up with a visual language that is consistent across different contextual settings. Your site, business cards, logo and even your social media profiles have to form a coherent whole. An experienced website designer is aware of the emerging trends in web designing will help you create a consistent brand identity.
Distinction from Your Competitors
A professional WordPress web design company can design your website in a unique way that sets you apart from your competitors. They can help you choose the right fonts, spacing of texts, and contract in order to make a difference in the overall quality of your site. Professional web design will also utilize the advanced web designing techniques to make your site informational and easy to navigate.
There are other major benefits you can derive by hiring professional web design Fort lauderdale services. To get the best results, you should only hire a qualified website designing company. Consider factors such as experience, estimated completion time, cost and past references.
Bricks & Mortar launches extension on Magento Connect
We have just received word that we have placed our first extension on the Magento Connect store. Our very useful and very diverse extension, Add Custom Steps To Magento Checkout, can now be found on the Magento Connect store.
This extension is ideal for gathering data, upselling services, customizing products and much more. This extension works right within the native Magento admin, and operates just like the custom options do on a product, so if you can use Magento, you can use this product.
We have tested it on multiple sites, and it’s currently in production on many more, but we always suggest you back your database up before installation. We can’t guarantee that this extension will not conflict with another extension, all we can do is ask you to watch it in action.
Also, with a little bit of CSS and jQuery, the possibilities are endless. Customize your entire checkout process to follow a custom flow, fully animated with your favorite scripting (just try not to go overboard, ok).
Bricks & Mortar clients and friends can save 15% on this product with coupon code: BRICKS15.
Update Cart Not Working On Magento 1.9?
We recently upgraded a Magento website for a client from version 1.4 to the most recent version (at the time), version 1.9.0.1. Once we were able to resolve the major issues from the upgrade, there were still quite a few minor issues that took some time to recognize. One of these issues was that the “Update Cart” button was not affecting the cart quantity.
The first place to look was the file that contained the update cart button, which is within the folder app/design/frontend/rwd/THEME NAME/template/checkout/cart.php. Once the file is opened, look somewhere around line 100 for the button, which should look like this:
[php] <button type="submit" name="update_cart_action" value="update_qty" title="<?php echo $this->__(‘Update Shopping Cart’); ?>" class="button btn-update"><span><span><?php echo $this->__(‘Update Shopping Cart’); ?></span></span></button>[/php]
If your button is already set up properly, it’s likely your checkout form is missing or has an incorrect form key, which is required for the form to validate. First, search your template for the string ‘formkey’ to either locate it on your template, or confirm it is missing all together. If it is there, it’s likely the entire snippet looks something like this:
[php] <?php echo $this->getBlockHtml(‘formkey’); ?>[/php]
If so, you can either comment this out, edit it, or remove it all together so that it can be replaced by:
[php] <input type="hidden" name="form_key" value="<?php echo Mage::getSingleton(‘core/session’)->getFormKey(); ?>"/>[/php]
If you can’t find the string ‘formkey’ anywhere in your document, you will just need to add in the above snippet into the form on cart.phtml. You can find the closing fieldset for the form around line 117 and paste it in just before it.
Once your file is updated to include the correct key, recheck your “Update Cart” button and everything should be working as needed.