Script for Recipe Websites
happycart Script Installation
Prerequisites
You will need a channel ID and a channel slug which will be provided to you by happycart.
Getting started
If your website only needs the happycart to be opened on recipe detail pages, you can only set this up on the recipe detail page. To enable support for a global cart button or adding recipes to the cart from collection pages (e.g. recipe archive, search results, etc.) you can add it globally.
Position inside <head>
Adding the happycart script is just a matter of adding one line to the <head> part of your website:
<script src="https://cdn.happycart.io/happycart.js" />
Position before closing </body>
Add the web component for rendering the cart:
<happy-cart
channel-id="XXXXXX"
></happy-cart>
The only required prop is channel-id. This should be provided by the happycart team.
Position inside <body>
Finally the button itself. You will need to replace {{ channelslug }} with the slug we provided you with, a unique ID for your recipe replaces {{ id }} and the {{ recipe_yield }} as an int for your serving size.
<happy-cart-button
recipe-id="{{ channelslug }}-{{ id }}"
serving-size="{{ recipe_yield }}"
></happy-cart-button>
Filled in example (channel slug: walmart and recipe id: 1337):
<happy-cart-button
recipe-id="walmart-1337"
serving-size="4"
></happy-cart-button>
Customization
Button Position
The default position for the buttons is sticky at the bottom of the page, centered. If you want to center the button relative to a container on your page, you can do so by passing the container ID as a prop container-id.
On a recipe page the button transitions from a button to open the shopping list into a button to add the recipe to the cart. You can control the Y-value at which this transition happens by passing the scroll-trigger-offset-top prop. Default is 300.
<happy-cart
channel-id="XXXXXX"
container-id=""
scroll-trigger-offset-top=300
></happy-cart>
Corporate Identity
The colors of the buttons can be customized to match the intended CI by simply adding the following lines of code to either your html or inside one of your css files.
<style>
:root {
--color-hc-primary: 22 116 70;
--color-hc-hover: 9 70 41;
--color-hc-text: 255 255 255;
}
</style>
Using your own cart button
By default the cart button will be rendered on your page as a floating cart button. Setting the hide-cart-button prop to true will hide the cart button and you are free to render your own.
Note that there are two buttons that need to be rendered: one button to open the cart, and one button to add a recipe to the cart. The default happycart button has these two side-by-side. If you do set hide-cart-button to true you will need to create both buttons.
<happy-cart
channel-id="XXXXXX"
hide-cart-button="true"
></happy-cart>
An example of a custom button to open the cart:
<button class="button button--cart js-open-cart">
<span class="js-recipe-count button__count">2</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
<script type="text/javascript">
// open cart on click
(() => {
const button = document.querySelector('.js-open-cart')
button.addEventListener('click', () => {
if(typeof window.happycart !== "undefined") {
window.happycart.openCart()
}
})
})()
// listen for cart changes (recipeCount etc.) and update recipeCount
(() => {
const countEl = document.querySelector('.js-recipe-count')
window.addEventListener('HC_RECIPES_UPDATED', (e) => {
countEl.innerHTML = e.detail.recipeCount
})
})()
</script>
.button--cart {
position: relative;
height: 40px;
width: 40px;
border-radius: 100%;
background-color: darkseagreen;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
border: none;
z-index: 0;
}
.button--cart svg {
width: 18px;
height: 18px;
}
.button__count {
position: absolute;
top: 0;
right: 0;
font-size: 8px;
border-radius: 100%;
background-color: indigo;
z-index: 1;
color: white;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
}
An example of a custom add to cart button:
<button class="button-add-to-cart js-add-to-cart">
Add Recipe to Cart
</button>
<script type="text/javascript">
// add recipe to the cart
(() => {
const button = document.querySelector('.js-add-to-cart')
const recipeId = "walmart-1337"
const servingSize = 4
button.addEventListener('click', () => {
if(typeof window.happycart !== "undefined") {
window.happycart.addRecipeToCart(recipeId, servingSize)
}
})
})()
</script>
.button-add-to-cart {
position: relative;
height: 40px;
width: 180px;
border-radius: 100%;
background-color: darkseagreen;
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
border: none;
z-index: 0;
}
Supermarket Selection
If you want to restrict which stores are shown as options for users, please contact us.
White-label
If you need a white-label solution without the happycart logo present, please contact us.
Adding the script to Content Management Systems
If you're using a CMS such as WordPress, you might need to install a plugin that lets you add script tags to the head. For example, here are instructions for WordPress.