All Collections
Developer Docs
Widgets
Product List and Cart Widget
Product List and Cart Widget
Ed Boaden avatar
Written by Ed Boaden
Updated over a week ago

Adding the Product List and Cart embed on your site enables users to buy your products without leaving the site; building up a cart of multiple items before being taken through to your store to complete the checkout process.

The Product List embed will list a defined set of products, displaying price, availability and a buy button for each.

The Cart embed will show a summary of what has been added to a customer’s cart; with details, quantity and price for each, and allow customers to remove items or amend quantities before proceeding to checkout.

Both embeds need to be used together on the page to allow retail from your site.

Adding the Embeds

Product List and Cart HTML Embeds

To add the embeds to your site, you will need to insert HTML placeholder elements for both the cart and buy buttons list, inside the <body> tag of your page.

The element classes may be customised, but will need to match the placeholder param on the methods.

<div class="ochre-product-list-container"></div>
<div class="ochre-cart-container"></div>

JS Library

Insert inside the <body> tag, before the closing </body> tag.

<script type="text/javascript" src="https://bleep.com/cart/embed/library"></script>

To call a specific version of the library, include the version number on the URL.

Data-loading

To load the Cart and Product List and Cart, you will need to import the Javascript library, and then request the buy.cart() and buy.products() methods with the following script:

<script>
   buy.products('.ochre-product-list-container', {style: 'mini'}).get([20335130, 20335131]);
   buy.cart('.ochre-cart-container');
</script>

The Product List can be used to load a single product or list of products by adding single or multiple product IDs to the method.

The IDs can be taken from the release_format or track_format ID on your store, with the addition of a prefix (20 for release_format, 10 for track_format).

E.g. Where store release_format ID is 335130, the ID for use on the embed should be 20335130.

 

Methods

buy.cart(placeholder)

Setup the cart embed.

Parameter

Example

Description

placeholder .ochre-cart-container Used to define custom class for cart embed 

buy.products(placeholder).get(product_ids)

Populate the product list.

Parameter

Example

Description

placeholder .ochre-product-list-container Used to define custom class for buy button embed product_ids 123456[123456, 123457] IDs returned by the Ochre API for each product to be listed  

 

Examples in use

Widget demo

Autechre NTS Sessions

Did this answer your question?