Buy Component

Press Z to see at 100%.

New Buy component for objc.io.

With the introduction of new book purchase options like Team Ebooks and Bundles, the book purchasing interface got very crowded, so it was time to update the design to accomodate those options.

This design splits Single and Team licenses in different tabs, prioritizing Single Licenses as they’re by far the most popular option.

Single Licenses come in multiple formats, and the button always reflects the name of the chosen format. For Paperbacks, which are only available on Amazon, the button instead indicates which local Amazon store was automatically chosen based on the buyer’s location. For Single Licenses, a hint to check out Bundle options further down the page is also shown.

Team Licenses come in 3 different team sizes, also split in tabs. It might seem strange to separate team sizes in tabs since there’s only a single format available in each, but this choice was made to accomodate other formats for team licenses in the future.

A few other things:

• The component was designed to also support Bundles, where there’s no team license option (and thus no tabs), and only a single format (and thus no ratio buttons). However, if formats or team licenses were introduced for Bundles, the component can simply adapt.
• The Buy component supports dual color themes for Books and single color themes for Bundles. This particular instance of the component is purple and pink as those are the gradient colors for the book Advanced Swift.
• Not shown here are sale prices, which are also supported, and colored according to the theme to stand out from regular pricing.