Creating Custom Add to Cart Buttons for SureCart Products in Bricks

The Bricks’ integration in SureCart v3+ provides an Add-to-Cart button element that can be used for both single product pages and inside query loops. However, if we need more than a simple text button and want it nestable, we can create a custom Add-to-Cart button using other Bricks elements to have more control.

In this tutorial, we’ll go through..

• Creating our custom button with Bricks elements
• Adding a loading animation or custom styles after button clicked
• Optional – Adding a tooltip to the button

Creating the Button

The first step is to create our custom button.

Step 1 – Choosing the element

For maximum flexibility, the best element to create our custom button with is a ‘div’. This will ensure we start with no default styling and we can nest any elements inside of it (unlike a button element).

Step 2 – Turning into a button

We first need our element to be an actual button rather than a div. We do this by changing the HTML tag to button by selecting ‘custom’ from the dropdown, and ‘button’ as our custom tag.

Step 3 – Adding button content

For this example, we’ll add a cart icon inside of the button using Bricks’ icon element. (Remembering to add an aria-label attribute to the button if we’re not going to be adding in any button text).

Anything can be added in here, the icon is just a simple example.

We can then style the div element to make sure it looks more like a button.. background, padding, hover/focus styles etc.

Step 4 – Positioning inside of the structure

For this new button to add the current product to the cart, it matters where we place it in the structure for SureCart to be able to use the button.

If we’re on a single product view – the button needs to be placed somewhere inside of the ‘Product’ element.

If we’re inside of a product query loop – the button needs to be somewhere inside of the ‘Product Card’ element (as seen in the image of the structure above).

When you click this button on the front end it will add the current product to the cart.

Adding a Loading Animation

The default Add-to-Cart button has a little loading animation after being clicked, for some visual feedback that something is being processed until the cart opens. This is done by using the Interactivity API to add a class to the button while it’s ‘busy’.

We can replicate this behavior on our custom button..

We can add the following custom attribute to our new button.

Name – data-wp-class–bl-add-to-cart__busy
Value – context.busy

This will then add the class ‘bl-add-to-cart__busy’ (you can change this to any class) after the button has been clicked, before the cart opens.

We can use this class to style the button only when it’s ‘busy’ with %root%.bl-add-to-cart__busy.

To show a working example, we’ll go through how to add the same spinner as the default Add-to-Cart button has, using our ‘bl-add-to-cart__busy’ class.

Add this CSS directly to your new button element, in the CSS settings..

%root% {
  position: relative;
}

/* add spinner to ::before */
%root%::before {
  
    --track-color: #0d131e20;
    --stroke-width: 2px;
    --spinner-size: 1em;
  
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border: solid var(--stroke-width) var(--track-color);
    border-radius: 50%;
    border-right-color: currentColor;
    border-top-color: currentColor;
    display: inline-block;
    height: var(--spinner-size);
    width: var(--spinner-size);
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
    left: calc(50% - 8px);
    opacity: 0;
    position: absolute;
    top: calc(50% - 8px);
    visibility: hidden;
    content: '';
    transform: none;
}

/* reveal spinner only when button busy */
%root%.bl-add-to-cart__busy::before {
    opacity: 1;
    visibility: visible
}

/* hide other button content when button busy */
%root%.bl-add-to-cart__busy > * {
    opacity: 0;
    visibility: hidden;
}

Here a spinner is added as a ::before pseudo-element, and then we’re just hiding/showing the button content and spinner as our ‘bl-add-to-cart__busy’ class is added and removed.

Now we have our spinner appearing after we click the button.

To view the spinner in the builder temporarily while you style it. Add the ‘bl-add-to-cart__busy’ class to the ‘CSS classes’ option below where we add in the custom CSS. (then remove once you’ve finished)

Adding a Tooltip

Depending on the button content and design, adding a tooltip on hover/focus might be a good idea to tell the user what the button is for.

Adding a tooltip would be similar to adding to other element in Bricks, however, we’d want the tooltip to appear on hover, not on click. As clicking the button is going to be triggering the cart.

For a simple CSS tooltip..

Bricks has built-in CSS tooltips that can be added to any element and appear on hover. Just add the following two custom attributes to the new button element.

Name – data-balloon
Value – Add to cart

Name – data-balloon-pos
Value – top

For a Responsive Tooltip..

If you want the tooltip position to automatically adjust to ensure it’s always visible by adapting to the available space, a JS solution is needed.

Either..

Follow this tutorial to add manually to your button element – https://brickslabs.com/how-to-create-responsive-tooltips-in-bricks/

Or add a BricksExtras Tooltip/Popover element to the page, where this functionality is built-in. Set the element to ‘tooltip’ mode, set the user interaction to ‘mouseenter and focus’ and then just the class for your button to target all of the add-to-cart buttons on the page. You can then change the tooltip text directly on the button element, Tooltip > Tooltip content.

That’s it

Now we have our custom button, with a spinner animation while the product is being added to the cart, and a tooltip to add more context to our button when the user hovers over it.