Basket widget

Basket Widget

The Basket Widget adds a “Your cart” button to your website, allowing customers to view and manage the items in their cart. From the basket window, users can proceed to the checkout page to finalize their purchases.

Key Features

1. Dynamic Cart Display The basket icon is displayed only when there are items in the cart, keeping the interface clean and unobtrusive.

2. Mobile Optimization Supports a smaller display mode on mobile devices for better usability on smaller screens.

3. Seamless Checkout Access Provides a quick and easy way for customers to navigate to the checkout page.

4. Flexible Placement Can be added to the site header or any section to ensure it’s visible across all pages.

How to Use

Add the widget to your webpage using the HTML snippet below. Customize its properties as needed.

Example:

<bilberry-basket-icon
    size="l"
    xs-size="m"
    hide-text="mobile"
    variant="dense"
></bilberry-basket-icon>

Widget Properties

Property	Description	Default Value	Required
size	Size of the basket icon on medium to large screens. Options: s, m, l.	s	No
xs-size	Size of the basket icon on small screens. Options: s, m, l.	Unset	No
hide-text	Controls text visibility. Options: all (hide on all screens), mobile (hide on mobile only), no (show on all screens).	no	No
variant	Visual variant of the basket icon. Options: dense or unset for the default variant.	Unset	No

Notes:

• The basket icon is hidden when the cart is empty.
• For consistent visibility, add the widget to a section that appears on all pages, such as the site header.

Setting Up on Wix

If you’re using Wix as your website builder, follow these steps to configure the widget:

1. Access the Configuration Guide: Refer to the relevant guide in these docs for general widget setup on Wix.
2. Use the Following Values:
   • Server URL: https://bilberry-widgets.b-cdn.net/v4/wix-wrappers/WixBilberryBasketIcon.js
   • Tag Name: wix-bilberry-basket-icon

Tips for Effective Integration

1. Place Strategically: Add the widget to the site header or a similar location to ensure visibility across all pages.
2. Test for Responsiveness: Verify the widget displays correctly on both desktop and mobile devices.
3. Use “hide-text” Wisely:
   • hide-text="no" (default): Shows text on all screen sizes
   • hide-text="mobile": Hides text only on mobile devices
   • hide-text="all": Hides text on all screen sizes
4. Customize the Size: Adjust size and xs-size properties to match your site’s design and user preferences.

By integrating the Basket Widget, you provide a user-friendly way for customers to manage their purchases and navigate to checkout seamlessly.

Backward Compatibility

The old small-on-mobile attribute is still supported but deprecated. A deprecation warning will be shown in the browser console when using this attribute. Please update to use hide-text="mobile" instead.

JavaScript API Integration

You can programmatically control the basket using the JavaScript API. For example, to open the basket from a custom button:

// Open the basket
window.BilberryActions.openBasket();

// Close the basket
window.BilberryActions.closeBasket();

// Toggle basket visibility
window.BilberryActions.toggleBasket();

// Clear all items from cart
window.BilberryActions.clearCart();

// Get current item count in cart
const count = window.BilberryActions.getItemCount();

For more details on the JavaScript API, see the JavaScript API documentation.