Honyb User Guide

Include Dependencies

Honyb requires jQuery 1.7.1 or later and the honyb.js file. Include them both in the <HEAD> section of your html file.

API

Embed tags are simply HTML with a class of "honyb-embed" and a data-sku property that references one more products to embed. The data-view property can be used to select different embed templates.

Inline vs. Block

Embed links can be created inline, or as display blocks. To display inline use the SPAN tag. This will display a title linked to the product sku specified. Use DIV tags to display as a block

Examples

Block: <div class="honyb-embed" data-sku="9781555974831"></div>
Inline: <span class="honyb-embed" data-sku="9781555974831"></span>

Data View Options

Use the data-view property to control the embedded product display. For example:

<div class="honyb-embed" data-sku="9781555974831" data-view="cover-buy"></div>

product-brief: [default] displays the cover, buy button, title, author, specs and description.
minimal: displays the cover, buy button, title, author and specs.
cover: displays the cover only.
cover-buy: displays the cover and buy button.
mosaic: displays covers all floated left into a mosaic grid.

Floating Right/Left

Add the class left or right after the honyb-embed class to control floating.

Float left: <div class="honyb-embed left" data-sku="9781555974831"></div>
Float right: <div class="honyb-embed right" data-sku="9781555974831"></div>

Embed Examples

Inline

This is a test of an inline link to a book. In this case we are linking to .

Cover And Buy Button

Floated left

Want to float it to the left? Just add the "left" class to the div tag.

Floated right

Want to float it to the right? Just add the "right" class to the div tag.

Cover Only

Just want the cover? No problem: data-view="cover"