There are times when some of Shopp’s JavaScript behaviors just get in the way of an advanced developer, and simply need to be disabled. This example will show you how to selectively remove any or all of Shopp’s built-in JavaScript used in the storefront.

Disabling Shopp Scripts

Disabling Shopp Scripts

This tutorial is aimed at advanced developers that know how to handle the lack of any predefined behaviors in Shopp’s JavaScript libraries. Be aware that free support cannot be provided should you choose to employ these methods to break the predefined functionality of Shopp.

In order to be as compatible as possible, Shopp uses the WordPress API to queue its JavaScript behaviors. This method allows for WordPress to centrally manage called resources, so that redundant script loading doesn’t occur (such as jQuery being used by two plugins that might normally cause it to get loaded twice). Using the WordPress API, both plugins can queue the same script, but WordPress recognizes both requests and is able to load the script once for both plugins to use.

To disable queueing of any of Shopp’s scripts, add the following to the active WordPress theme’s functions.php file:

// Schedule our callback after the Shopp actions get added
add_action('wp','disable_shopp_resources',100);

function disable_shopp_resources() {
    // prevent errors when Shopp isn't activated
    if ( ! function_exists('shopp') ) return;

    // Disable all of Shopp's CSS
    $Storefront = ShoppStorefront();
    if ($Storefront) {
        remove_action('wp_head',array(&$Storefront,'header'));
        remove_action('wp_print_styles',array(&$Storefront, 'catalogcss'));
    }

    // Disable jQuery completely (for all plugins)
    wp_deregister_script('jquery');

    // Disable the core Shopp behaviors
    shopp_deregister_script('shopp');

    // Disable the catalog behaviors (product gallery, slideshows, etc)
    shopp_deregister_script('catalog');

    // Disable the Shopp Colorbox implementation
    shopp_deregister_script('colorbox');

    // Disable the cart behaviors (AJAX-cart, etc)
    shopp_deregister_script('cart');

    // Disable the pop-up calendar behaviors
    shopp_deregister_script('calendar');

    // Disable the Shopp checkout handlers (including form validation)
    // Only loaded on the checkout form page
    shopp_deregister_script('checkout');

}

The following sections discuss the impact of disabling each resource, including broken functionality and the overhead savings. Keep in mind that once loaded, each resource (script or stylesheet) is cached in the browser. Each subsequent load of the resources, once they are fully loaded are pulled from local cache on the browser’s host system. Any subsequent pages on the same site that call these resources will have no appreciable overhead.

Further, in WordPress 2.8, new loading optimization to allow scripts loaded in the footer will greatly improve the perceived performance of the scripts. As of version 1.0.5, Shopp is fully optimized to take advantage of these new techniques.

Disabling Shopp CSS

Disabling Shopp’s built-in CSS will mean no predefined Shopp styles will be used throughout your shopping pages or anywhere Shopp’s output features are used (widgets, shortcodes, etc). This will disable the dynamic catalog.css core styles, the shopp.css template file and the Shopp Thickbox styles.

Disabling all of Shopp’s CSS will save 15.6 KB in page resource overhead.

Disabling jQuery

Disabling any or all of these scripts will have varying degrees of impact on the shopping experience. Nearly all of Shopp’s behavioral scripts rely on the core jQuery framework in order to work properly. Choosing to remove jQuery means you will need to disable nearly all of Shopp’s other scripts.

Disabling jQuery will save 70.5 KB in page resource overhead.

Disabling core Shopp behaviors

Disabling the core Shopp behavior script will break nearly all areas of Shopp client-side behaviors.

Disabling the core Shopp behaviors will save 2.8 KB in page resource overhead.

Disabling Shopp’s Colorbox

This is perhaps the most useful script to disable when necessary. This is especially true in cases where using another modal image viewer zoom script is desired. The only impact disabling the Shopp Colorbox implementation has is that image zoom support in the product gallery will not work.

Disabling Shopp Colorbox including JavaScript and CSS will save 11.8 KB in page resource overhead.

Overhead Savings

In total, you can acheive a savings of 37.9 KB when disabling all of Shopp’s scripts and stylesheets. Unfortunately, this is not representative of the final true savings as at least a portion of the savings will be used up by custom behaviors that fix any broken functionality caused by disabling the built-in resources. You may find that your actual savings end up being far less, or even non-existant once you implement everything needed. That said, at least you have the flexibility to override everything should you choose to.

Avatar of Jonathan Davis

By

Jonathan was born at an early age and began designing and developing shortly after. He is the founder of Ingenesis Limited and Project Lead on the Shopp e-commerce plugin for WordPress. He lives and works in the heart of the midwest US with his family. He fancies himself a designer of code, and is only slightly addicted to coffee.

  1. Avatar of wbickley

    This article seems outdated with 1.3, the following code worked great for me:

    add_action( ‘wp_print_styles’, ‘deregister_shopp_styles’, 100 );
    function deregister_shopp_styles()
    {
    // SHOPP.CSS
    wp_deregister_style( ‘shopp’ );

    wp_deregister_style( 'shopp.catalog' );
    wp_deregister_style( 'shopp.icons' );
    wp_deregister_style( 'shopp.colorbox' );
    

    }

    April 14th   #

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.

Skip to toolbar