29 NEXT
Search…
✨
Features
Cart JS API
Leverage the integrated JS API to add turn-key functionality to buttons in your storefrontand funnels.
The 29 Next Cart JS API allows you to create HTML buttons that carry a variety of functionalities, with no extra code required. See below for examples and methods of implementation.
Button Actions
Add Products to Cart
To add products to a cart, there are data attributes that can be used on an HTML
<button></button> to integrate it with the storefront cart.
Data Attribute
Required
Function
data-action="add-product"
Yes
Action of the button
data-stockrecord-id
Yes
Stockrecord ID corresponding to the Product SKU and Currency you want to add to the cart.
data-quantity="1,1"
Yes
Quantity of the product to add
data-interval="day, one-time"
No
Subscription interval, supports day, week, month, year, day is recommended. The second product is one-time.
data-interval-count="30, one-time"
No
Subscription interval count, numeric, 30 when combined with subscription interval would be "30 days". The second product will be added as a one time purchase.
data-redirect=false
No
Whether to redirect to next page in funnel flow after adding product to cart, default is true.
data-voucher="VOUCHERCODE"
No
Apply voucher code to basket after adding the products.
data-product-remove="1,22"
No
Product IDs to remove from the basket in the case of doing a product swap.
data-product-remove-quantity="1,1"
No
Quantity of products to remove from the basket in the case of doing a product swap.
data-product-remove-interval="week, one-time"
No
Subscription interval of product to remove from the basket, follows same logic as when adding.
data-product-remove-interval-count="6, one-time"
No
Subscription interval count of product to remove from the basket, follows same logic as when adding.
data-clear-cart=true
No
Clear the existing products in the cart before adding more products. Helps with situations where you want to clear existing products for an upsell.
Example Add to Cart Buttons
1
<!-- Add multiple one time products -->
2
<button type="button"
3
class="btn btn-success btn-block"
4
data-action="add-product"
5
data-stockrecord-id="4,6"
6
data-quantity="1,1">
7
Add Combo
8
</button>
9
10
<!-- Add a product on subscription every 30 days -->
11
<button type="button"
12
class="btn btn-success"
13
data-action="add-product"
14
data-stockrecord-id="9"
15
data-quantity="1"
16
data-interval="day"
17
data-interval-count="30"
18
data-voucher="VOUCHERCODE">
19
Add Subscription
20
</button>
Copied!
Apply Voucher Form
This form gives the ability for a customer to apply a voucher (coupon) to their basket from within the page body, instead of via the UI in the sidecart. This can also be combined with the "applyVoucherToBasket" callback event to customize the success display.
1
<!-- Apply Voucher Form -->
2
<div data-form="voucher-form" class="input-group mb-3">
3
<input type="text" class="form-control" name="voucher_code" placeholder="Voucher Code">
4
<button type="button"
5
class="btn btn-info"
6
data-action="apply-voucher">
7
Add Voucher
8
</button>
9
</div>
Copied!
Create Customer Form
This form gives you the ability to create a customer account from a storefront page or from within a Funnel flow. Once the form is submitted, the customer will be created and logged into their customer account.
Create Customer Form
1
<form data-form="create-customer-form">
2
<input type="email" class="" name="email" placeholder="Email" required>
3
<input type="text" class="" name="first_name" placeholder="First name" required>
4
<input type="text" class="" name="last_name" placeholder="Last name" required>
5
<input type="text" class="" name="phone_number" placeholder="Phone number" data-widget="intl-tel-input" required>
6
<input type="hidden" name="tags" value="tag1, tag2, tag3">
7
<button type="button" class="" data-action="create-customer" data-redirect=true>Create Account</button>
8
</form>
Copied!
It is also possible to create a customer and add a product to the basket at the same time using added data attributes on the form submit button.
Create Customer with Add Product to Basket
1
<form data-form="create-customer-form">
2
<input type="email" class="" name="email" placeholder="Email" required>
3
<input type="text" class="" name="first_name" placeholder="First name" required>
4
<input type="text" class="" name="last_name" placeholder="Last name" required>
5
<input type="text" class="" name="phone_number" placeholder="Phone number" data-widget="intl-tel-input" required>
6
<input type="hidden" name="tags" value="tag1, tag2, tag3">
7
<button type="button" class="" data-action="create-customer" data-product-id="1,21" data-quantity="1,1" data-redirect=true>Create Account</button>
8
</form>
Copied!
Retrieve Current User Session
In many cases with funnels, it is useful to know if the current user has a store account or not. For example, for users that don't have an account you would show a registration form, and for those who already registered you would not. To get the current active user, you can use the code example below to help build your frontend javascript logic.
Current User Object
1
// prime.user.session returns an object with the current user session details
2
<script>
3
$(function() {
4
console.log(prime.user.session);
5
});
6
</script>
7
// Check if current user is authenitacted
8
<script>
9
$(function() {
10
if (prime.user.session.is_authenticated ){
11
console.log('Existing User');
12
} else {
13
console.log('Anonmyous User');
14
}
15
});
16
</script>
Copied!
Show the Cart
To show the contents of the cart to the user, 29 Next has a built in cart template that can show the current cart count, and trigger the cart modal with HTML attributes. See example below.
Attribute
Action
href="#basket-modal" data-toggle="modal"
Used to trigger the cart modal
id="basket-count"
Use to display the current cart count
id="basket-subtotal"
Use to display basket sub total
Show Cart Example
1
<a class="btn btn-default py-2 d-md-inline-block" href="#basket-modal" data-toggle="side-cart">
2
Cart <span class="badge badge-primary badge-pill" data-basket-count></span> | <span data-basket-subtotal></span>
3
</a>
Copied!
Callbacks
Add Product Callback
After adding a product to the cart, you can use the callback method to extend the callback function of adding products to the cart.
1
<script>
2
$(function() {
3
funnel.callback.on('addProductToBasket', function(data) {
4
console.log("product added");
5
console.log(JSON.stringify(data));
6
});
7
});
8
</script>
Copied!
Create Customer Form Callback
1
<script>
2
$(function() {
3
funnel.callback.on('createCustomer', function(data) {
4
console.log("product added");
5
console.log(JSON.stringify(data));
6
});
7
});
8
</script>
Copied!
Add Voucher Callback
After applying a voucher to the basket, you can use the callback method to extend the behaviour.
Add Voucher Success Callback
1
<script>
2
$(function() {
3
funnel.callback.on('applyVoucherToBasket', function(data) {
4
console.log("voucher applied");
5
console.log(JSON.stringify(data));
6
});
7
});
8
</script>
Copied!
Show & Hide Side Cart
It is possible to trigger to show and hide the side cart to use in combination with callback functions.
1
// Show the Side Cart
2
3
// $("#basket-modal").cart('show');
4
5
// Hide the Side Cart
6
7
// $("#basket-modal").cart('hide');
8
9
10
Example to show the sidecart after adding a product to the basket.
11
12
<script>
13
14
$(function() {
15
16
funnel.callback.on('addProductToBasket', function(data) {
17
18
$("#basket-modal").cart('show');
19
20
});
21
22
});
23
24
</script>
Copied!
Last modified 9mo ago