Note
The widget is not currently working as expected, as it is displaying incorrect currencies. We are aiming to resolve this as quickly as possible.
--
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 the following script inside the <body> tag, before the closing </body> tag. Replace `example.ochre.store` with your store domain.
<script type="text/javascript" src="https://example.ochre.store/cart/embed/library"></script>To call a specific version of the library, include the version number on the URL, e.g.
../cart/embed/library/1.1.11
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
Using the widgets on a Wordpress site
If your site is already using a version on jQuery, it's possible that this might conflict with the widget code.
Examples in use
Widget demo
https://bleepltd.github.io/buy-buttons/
Autechre NTS Sessions
https://www.nts.live/projects/autechre-nts-residency/
Comments
0 comments
Please sign in to leave a comment.