Buy Button

Button to open the cart for a specific collection

A button which when clicked opens the Cart to the relevant collection, and selects the collection.

Renders a button with the text “Buy (collection-name)”.

<fontdue-buy-button

  collection-slug="ibm-plex"

  collection-name="IBM Plex"

></fontdue-buy-button>

import BuyButton from "fontdue-js/BuyButton";



<BuyButton

  collectionSlug="ibm-plex"

  collectionName="IBM Plex"

/>

On a server-rendered framework, preload the data in your loader with loadBuyButtonQuery and pass it as preloadedQuery in place of an identifier – which form to use is settled by your framework, see lazy versus preloaded:

import BuyButton, { loadBuyButtonQuery } from "fontdue-js/BuyButton";



const buyButton = await loadBuyButtonQuery({ collectionSlug: "ibm-plex" });



<BuyButton preloadedQuery={buyButton} collectionName="IBM Plex" />
Property Description Type
collection-name The name to render in the button: “Buy (collection-name)” string
collection-id or collection-slug Identifier for collection string Required
label Label for the button (defaults to “Buy collectionName”) string
Prop Description Type
collectionName The name to render in the button: “Buy (collectionName)” string
collectionId or collectionSlug Identifier for the collection. Required unless you pass preloadedQuery. string
preloadedQuery Server-preloaded data from loadBuyButtonQuery, passed instead of an identifier. object
label Label for the button (defaults to “Buy collectionName”) string

Custom HTML elements

When <fontdue-buy-button> doesn’t fit – you want custom markup, custom styling, or to pre-select a specific SKU – add fontdue-* attributes to your own <button> (or any element). Fontdue.js wires these up automatically once it loads. This pattern is for the script-tag integration only; in React, compose with the <BuyButton> component or its props.

Open a product page

Replace the collection ID with your own – find it on the Widget codes tab of the collection in the admin, or query it through the GraphQL API.

<button

  type="button"

  fontdue-click="open-store-modal"

  fontdue-store-route="product/Rm9udENvbGxlY3Rpb246NzUzNzU2MDgwNjI1OTk4ODQ5">

  Buy

</button>

Pre-select a SKU

Add fontdue-store-select with a SKU ID to land on the product page with that SKU already selected. SKUs can attach to collections, bundles, and individual font styles – for collections, the ID lives on the Widget codes tab; for bundles and font styles, under the Price field. The product must have a price for the SKU to be selectable.

<button

  type="button"

  fontdue-click="open-store-modal"

  fontdue-store-route="product/Rm9udENvbGxlY3Rpb246NzUzNzU2MDgwNjI1OTk4ODQ5"

  fontdue-store-select="U2t1OjgwODkyMjQxMjUzNTA0NTQwOA==">

  Buy

</button>

Attributes reference

Attribute Description Values
fontdue-click Action to trigger on click. open-store-modal
fontdue-store-route Where to navigate when the Store Modal opens. product/{collection_id}
fontdue-store-select Auto-select a SKU when the modal opens. Requires the product to have a price. SKU ID