Posts

  • 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.

  • 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.

  • 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.

  • 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.

  • 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. ##Diagnosing the issue So, it is quite interesting to see this happen as the user will still get notified that they are using the wrong username/password combination, but are unable to successfully authenticate with the website. In order for this issue to crop up, you have to have your site setup to use a particular domain, say www.example.com and have a redirect setup so that example.com redirects to www.example.com. Once the user experiences this issue, when you go into the developer tools in the browser, and investigate the cookies in place, you will notice that there are two cookies named “frontend”. However, these cookies have two different paths for them. One will be for example.com and the other will be for www.example.com. ##Recreating the issue It seems difficult to recreate this issue up until the point that you actually do it, and then it becomes trivial. First, go to www.example.com and try to login to the site. Next, logout of the site. After that, visit example.com and try to login to the site. When you submit the login form, it will just refresh the login page without showing any error on the site. ##Resolving the Login Problems This issue asserts itself when you utilize the Turpentine plugin from Nexcess to enable the proper caching configurations due to Magento’s reliance upon cookies being sent with every request. In the configuration of Turpentine, there is a special setting that allows Varnish to normalize the hostname that it requests from the server. Effectively what this will do for you is to take any request that hits Varnish, and translate it to whatever is specified, in this case, www.example.com. In most cases, this works great, and it fixes the login issues described in this article. However, it can create some other issues, specifically with 301 redirects. Overall, once both fixes are in place, everything should work beautifully, and much faster than it did previously.

  • 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.

  • 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.

  • Magento FrontName Naming and SSL/HTTPS

    One of the things that has always been an issue for sites that are based on Magento is that they are slow. Well, to be fair, sites using Magento Enterprise Edition that take advantage of the built-in full-page caching functionality seem to have decent page load times. One way to take care of this slow load time issue is to utilize a third-party full-page caching solution such as what Varnish provides. ##Varnish Varnish is a separate caching server that you setup to intercept all of the traffic to your site. It will then forward requests to your web servers, caching any duplicate requests, thus speeding up your site. However, the default configuration of Magento is to make extensive use of cookies to track user activity on the site. Unfortunately for sites that use Varnish, this means that nothing ever gets cached as each request is different. In order to address this drawback, a Magento Module that interfaces with Varnish needs to be installed and configured. ###Turpentine One such plugin is Turpentine from Nexcess. It allows you to configure your Varnish settings directly from the admin portion of your Magento site. System messages and other alerts are displayed on the site utilizing a bit of JavaScript injected into the page where the HTML block would typically go, and the JavaScript makes an AJAX request to the server with a unique URL that loads the appropriate non-cached message. This works well for standard Magento blocks and any other blocks you want to show directly within the page. However, if you have data that you want to periodically want to refresh without refreshing the entire page, another approach must be undertaken. ###Custom AJAX Requests Making a custom AJAX request in Magento is fairly straightforward process. The first thing you would need to do is create a custom Magento module with its own frontend routing. After that, you would need to setup the JavaScript to perform the actual AJAX request. If your site is running without SSL turned on for any secure pages, then this next issue will not be one that you run across. If, hoever you do have SSL turned on and configured in Magento, and your custom Magento module also has a backend/adminhtml interface, then there is a chance that you will have issues. When naming your frontend and adminhtml routes, you should be aware that they should not use the same route name, lest Magento get confused about whether the route should redirect to an SSL-enabled page or not. If, on your non-SSL page, you request your AJAX data that has the same route name as the adminhtml for your module, it will be redirected to the SSL version of the block, causing a nasty issue with Cross Site Requests via JavaScript. To properly ensure that this is not a problem, you should simply make sure that your adminhtml and frontend route names are different by a single character, and all should work as expected.

  • Magento Cache with Cache Disabled

    One of the things that I find quite annoying with a web platform is when you configure it to do one thing, and it does something different. Magento is an eCommerce software platform that many of the leading eCommerce websites use for their web stores. ##Magento Magento comes in two different flavors, a paid enterprise edition as well as a open-source community edition. The enterprise edition allows you to utilize the built-in full-page caching mechanism, while the community edition does not include a full-page caching solution.

subscribe via RSS