The VP Geek Speaks

Saving Products in Magento Deletes Tier Pricing

Magento’s framework makes many things simple to accomplish when working with the products and categories of your eCommerce website. However, I have found one scenario that doesn’t exactly work as expected.

Tier Pricing in Magento

Magento allows you to setup custom pricing levels based upon the quantity purchased. You set the minimum quantity purchased to enable the lower price when the part is added to the customer’s cart. You could see where losing the tiered pricing for an entire catalog of products would be a big deal for a site.

Creating a Best-Sellers Category with Magento

Magento allows you to organize products in categories, and a single product can be a member of quite a few separate categories. As a result, you can create a category that is specifically for your top selling products. You could manually keep track of which products sell the best, either by number of sales completed, or by the actual quantity of each product that were sold. If you want to spend all your time managing this category, then this is the way to go. However, there is a much easier way to manage the products in the category.

Sticky Menus and Mega Drop Down Menus

There are time when UX best practices for the web don’t always provide the best experience for the users of a website. One example would be Sticky Menus and Mega Drop Down Menus.

A Sticky Menu is a navigation bar that is stuck to the top of the screen when scrolling, usually with position:fixed;top:0; set on the menu itself. This ensures that no matter how far the user scrolls on the page, the site’s navigation is always available to the user without having to scroll to the top of the page.

Can Legacy Internet Explorer Go Away Already?

For years, Internet Explorer was a four-letter word around web developers. Recently, Microsoft has stepped up their game when it comes to their web browser. I almost have to pinch myself to make sure I’m not dreaming when I type this, but Internet Explorer 10 and 11 are decent and modern web browsers that many websites don’t have to do anything special to support.

However, Internet Explorer 9 and before are another story. The latest compatibility problemn I ran across would be one that is quite confusing to a web developer that has not been around those that have dealt with it before. The symptoms are that CSS rules that you can verify are in your CSS file are not being applied in Internet Explorer, but are applied in Chrome, Safari, Firefox, etc.

Hover Effects in JavaScript?

One of the things that can be annoying when looking at someone else’s code is when a more complex technology is used to solve a problem that can be handled more simply with another method.

An example of this is when you utilize JavaScript to implement a hover effect on some elements. I know of one scenario when you would need JavaScript to trigger a hover effect, and that would be when you want to trigger the hover effect with a touch event. However, in this case, the elements that would be affected by this hover effect are hidden on any mobile device, so the touch events would be unneeded for this hover effect.

JavaScript Templating

Many times it becomes useful to be able to make an AJAX request for some data, insert it into some HTML that is already on the client, and then display it to the user. There are a few ways to implement this, each approach has its benefits and drawbacks.

String Concatenation

Possibly the simplest way to accomplish the templating in JavaScript is to use simple string concatenation with ‘+’. This is the approach that I see many newcomers to JavaScript use in their code, as it is the simplest to implement. However, it does have a major drawback in that this method has the worst performance of all, especially in older versions of Internet Explorer. This could be implemented as below:

Login Problems with Magento and Varnish

When you have a Magento website configured to use Varnish as a caching frontend, there are certain scenarios where you may have some problems logging-in to the frontend of the website. It poses some unique problems that are not frequently seen on a typical website. This issue typically manifests itself to the end user by visiting the login page, entering the correct credential, submitting the form, and then the page reloads the login page again instead of redirecting to the My Account page or whatever page is specified in the configuration.

301 Redirecting in Varnish

In Magento, you can set your secure and non-secure URLs explicitly. This works as expected in most cases, but can cause some issues when you have to specify full URLs or need to make any AJAX requests. When using the Nexcess Turpentine extension to enable Magento and Varnish to work together and you wish to only support traffic at www.example.com and not example.com, you would need to enable the setting in the Turpentine module to normalize the host.

Launching a Redesign of a Website

Over the last few months, I have been working on a major redesign of an existing Magento website. One of the major goals of the redesign was to take a legacy desktop-only website and upgrade it to take full advantage of Responsive Web Design so that customers could equally utilize mobile and desktop devices to browse and purchase products.

For a site that had seen only minor updates over the last 5 years, this redesign represented a major change visually and navigationally from the previous site. Based on the history of the site, the development team was optimistic that the redesign would be well-received, but were suprised by a few things that came up in the feedback we saw.

jQuery.hover Issues in Internet Explorer on Windows 7

When creating a new mega-dropdown menu for a site I was working on, I used jQuery’s .hover event to trigger which content the menu was displayed. This seemed to work as expected in most browsers that I tested in, except for one, Internet Explorer. Unfortunately, it wasn’t even in every instance of Internet Explorer.

Windows 7

After Windows Vista came out as one of the biggest duds that the world has ever seen, Windows 7 was a ringing success. Windows 7 is an extremely functional and useful Operating System in the vein of Windows XP, but during testing of this website, we found one troubling issue with every version of Internet Explorer we installed on it. When you hovered over the menu and triggered the jQuery.hover() event, Internet Explorer seemingly locked-up for a few seconds, making the entire browser unresponsive. In a stroke of strange luck, I was unable to reproduce this functionality in Internet Explorer on Windows 8 or 8.1, so this is something that only affects the older operating systems. The fix is to replace jQuery.hover() with jQuery(document).on(“mouseenter”) and call the appropriate function as well.