Write-in Purchase Buttons

Write-in button support allows you to code purchase buttons into the block, which connect to Backlight Cart.

In a typical Backlight Gallery, each image has its own purchase button. Write-in button support allows you to create a single button for an entire page, anywhere within Backlight-controlled content, such as Pages content and tray text.

The basic format for write-in buttons is this:

<button class="add-to-cart" data-item="unique-item-id" data-name="item-name" data-price="default">BUTTON TEXT</button>

So, let's break this down and tackle each component individually.

We're using the button HTML element. In practice, it looks like this:

<button></button>

The BUTTON TEXT will be readable on the button, so this should be something like "Add to Cart", "Buy" or "Purchase This Widget":

<button>Buy</button>

The "add-to-cart" class is required. This triggers our script so that we know to run the cart on the button:

<button class="add-to-cart">Buy</button>

If you want to setup some custom button styling, you can do that using PHPlugins and Custom CSS. Any classes that you add to the button will be applied in the normal way, so you can make different button types with varying colors, sizes, etc. For example, you might create classes such as "button-green" to make green buttons, and "button-large" to increase the overall size of your buttons:

<button class="add-to-cart button-green button-large">Buy</button>

The button uses HTML5 //data-// attributes to communicate necessary information to the cart. There are four attributes:

data-item
required
A unique identifier for the item being sold; do not use spaces or punctuation (hyphens and underscores are okay).

data-name
optional
A human-readable name for the item being sold.

data-price
required
The name of the price profile to be used for the item. This should match the name of a price profile setup within the CE3 Cart admin.

data-thumbnail
optional
A representative thumbnail image for the item which will appear in the cart listing. Should be a relative URL from the page's own location.

Putting it all together, a complete purchase button might look like this:

<button class="add-to-cart" data-item="ebook-0001-litportraiture" data-name="Better Portraits with Portable Strobes" data-price="ebook" data-thumbnail="litportraiture-cover.jpg">Buy My New eBook</button>