MageParts

Skip to Main Content »

User Guides

My Cart

You have no items in your shopping cart.

Community Poll

What do you think of our prices?
 
 
 
 

Newsletter

Newsletter
 

Backorder Button   -   User Guide

Chapter 1: Configuration options for Backorder Button

This chapter will cover how to configure the Backorder Button extension in Magento.

1.1Configuration overview

The configuration is accessible from the top menu System → Configuration on the tab MageParts → Backorder Button.

Config overview
  1. Navigate to System → Configuration in the top menu.
  2. Click on Backorder Button tab in the MageParts section of the left-hand menu.

1.2General Settings

General Settings
OptionDescription
EnabledThis controls wether or not the extension is enabled
Backorder Button TextText to be displayed on "Add to Cart" buttons for products on backorder
Button ImageImage to be used instead of text for the buttons
Backorder Availability TextStock availability status text for products on backorder
Availability Status ImageImage to be used instead of text to display backorder stock availability

1.3Default Product Settings


These settings only apply for simple, virtual, downloadable and custom product types.

Default Product Settings
OptionDescription
EnabledThis controls wether or not the Backorder Button extension is enabled for simple, virtual, downloadable and custom product types.
Add to Cart    Button ElementDOM path to "Add to Cart" button element, displayed on the product detail page.
Stock Status    Label ElementDOM path to "Stock Availability" element, displayed on the product detail page.

DOM Paths Illustration

DOM Paths Illustration

Please see chapter 2.2 for more information regarding DOM paths.

1.4Configurable Product Settings


These settings only apply for configurable products.

Configurable Product Settings
OptionDescription
EnabledThis controls wether or not the Backorder Button extension is enabled for configurable products.
Add to Cart    Button ElementDOM path to "Add to Cart" button element, displayed on the product detail page.
Stock Status    Label ElementDOM path to "Stock Availability" element, displayed on the product detail page.

DOM Paths Illustration

DOM Paths Illustration

Please see chapter 2.2 for more information regarding DOM paths.

1.5Grouped Product Settings


These settings only apply for grouped products.

Grouped Product Settings
OptionDescription
EnabledThis controls wether or not the Backorder Button extension is enabled for grouped products.
Add to Cart    Button ElementDOM path to "Add to Cart" button element, displayed on the product detail page.
Stock Status    Label ElementDOM path to "Stock Availability" element, displayed on the product detail page.
Product Table ElementDOM path to "Product Table" element, displayed on the product detail page.

DOM Paths Illustration

DOM Paths Illustration

Please see chapter 2.2 for more information regarding DOM paths.

1.6Bundled Product Settings


These settings only apply for bundle products.

Bundled Product Settings
OptionDescription
EnabledThis controls wether or not the Backorder Button extension is enabled for bundle products.
Backorder Availability TextThis text will be displayed next to each of the items which are on backorder in a bundle product. This is only displayed on the product detail page.
Add to Cart    Button ElementDOM path to "Add to Cart" button element, displayed on the product detail page.
Stock Status    Label ElementDOM path to "Stock Availability" element, displayed on the product detail page.

DOM Paths Illustration

DOM Paths Illustration

Please see chapter 2.2 for more information regarding DOM paths.

1.7Product List Settings


These settings only apply for product lists, regardless of where they are displayed. For example category pages and product searches.

Product List Settings
OptionDescription
EnabledThis controls wether or not Backorder Button extension is enabled for product lists.
Product Grid Item ElementDOM path to product container element in a product grid.
Product List Item ElementDOM path to product container element in a product list.
Add To Cart Button ElementDOM path to "Add to Cart" button element, relative to the DOM path of product container element.

DOM Paths Illustration

DOM Paths Illustration

Please see chapter 2.2 for more information regarding DOM paths.

1.8Shopping Cart Settings


These settings only apply for the shopping cart page.

Shopping Cart Settings
OptionDescription
Display Stock Status In Shopping CartThis controls whether or not the availability column is displayed in the product table shown on the shopping cart page.
Shopping Cart Table ElementDOM path to the product table on the shopping cart page.

DOM Paths Illustration

DOM Paths Illustration

Please see chapter 2.2 for more information regarding DOM paths.

Chapter 2: Customizations etc.

This chapter contains variating information related to the Backorder Button extension and is mainly for the benefit of developers.

2.1How to enable backorders in Magento

Please read the following chapter in the Magento Wiki for information regarding how to enable backorders in Magento: Inventory - Product Stock Options.

2.2What are DOM paths, and how do they work?

DOM stands for Document Object Model.

A DOM path is a pointer to one or more HTML elements and mainly consists of classnames (defined by a dott (.)), id's (defined by a # (number sign)) and tag names (such as li, span or div).

DOM paths to certain elements can be different in independent themes, since designers may move or rename HTML objects. Thus, some of the DOM paths in the configuration may have to be modified in order for the extension to function properly with your theme.

Below is an example which illustrates a very simple piece of HTML code, and an accurate DOM path to one of the elements in that code.

Please note that we have used various colors to mark classnames, ids and tag names in the example. Classnames are marked with green, ID's are marked with red and tag names are marked with purple.


Example

  • <div id="main_col">
    • <div class="product-box">
      • <span classname="description">This is a simple product description.</span>
      • <span classname="price">$99.9</span>
      • <span classname="add-to-cart">
        • <button>Add to Cart</button>
      • </span>
    • </div>
  • </div>

According to the example above, this would be the DOM path to the <button>Add to Cart</button> element:

#main_col .product-box .add-to-cart button

As you can see, DOM paths needs to follow the structure of the HTML document.

Any web developer (and most web designers) will know how to find the DOM paths to various elements, and as always, our support staff is always happy to help you out. You can contact our support staff here.

2.3How to customize backorder elements using CSS

Often designers may want to modify the appearance of the stock availability label when a product is on backorder. For example change the color of the text, or make it bold or underlined.

Backorder Button comes prepared for this. The extension will add classnames to any elements that it adds or modifies, so that their style can easily be controlled from your stylesheet.

For example, if a product is on backorder then the stock availability label element, and the "Add to Cart" button element, will get an extra classname which defines them as backorder elements.

Below is a list of all classnames which are added by this extension, and descriptions explaining where they are added.


General classnames

These classnames are implemented anywhere where their target elements are available.

Classname element illustration
  1. .backorder-button-el - backorder button element (replacement of "Add to Cart" button element).
  2. .backorder-availability-label - stock availability message (only displayed on product detail pages)

Classnames for grouped products

These classnames are only implemented on the product detail page for grouped products.

Classname element illustration
  1. .product-table-availability-header - product table, availability column, header.
  2. .product-table-availability-in-stock - product table, availability column, in stock label.
  3. .product-table-availability-backorder - product table, availability column, backorder label.
  4. .product-table-availability-out-of-stock - product table, availability column, out of stock label.
  5. .product-table-availability-na - product table, availability column, N/A label (only displayed if stock data wasn't available for a product). This element is not illustrated in the image above.

Classnames for bundle products

These classnames are only implemented on the product detail page for bundle products.

Classname element illustration
  1. .backorder-availability-label - small piece of text displayed next to each option on backorder in the bundle.

Classnames for shopping cart page

These classnames are only implemented on the shopping cart page.

Classname element illustration
  1. .shopping-cart-table-availability-header - product table, availability column, header.
  2. .shopping-cart-table-availability-in-stock - product table, availability column, in stock label.
  3. .shopping-cart-table-availability-backorder - product table, availability column, backorder label.
  4. .shopping-cart-table-availability-out-of-stock - product table, availability column, out of stock label.
  5. .shopping-cart-table-availability-na - product table, availability column, N/A label (only displayed if stock data wasn't available for a product). This element is not illustrated in the image above.