Shopping Cart JavaScript Integration Documentation
Updated
Cart JavaScript Documentation
Initial Setup
The cart requires the jQuery JS library to be loaded on the HTML page. The cart also requires the domain name to match between the site it’s loaded on and the domain used with the Wheelhouse solution. For example:
For the Wheelhouse domain config.wheelhousemfg.com, the cart must be run on wheelhousemfg.com or any subdomain of wheelhousemfg.com.
Add the following scripts to the bottom of the HTML body tag.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="/Widgets/load.js"></script> <script> wheelhouse.init({ cart: true }); </script> |
Special CSS Action Classes
The cart has built-in click actions that get bound with specific CSS classes.
- wheelhouse-cart-view: Add this class name to any link or button to trigger the slide-out to view the cart.
- wheelhouse-cart-login: Add this class name to any link or button, and it will trigger the slide-out for logging into the cart.
- wheelhouse-cart-logout: Add this class name to any link or button to trigger the slide-out for logging out of the cart.
- wheelhouse-cart-add-item: Add this class name to any link or button to add an item to the cart. If it’s a configured product, it will add the item to the cart and open the configurator window to configure the product. A data-item-id property must also be included on the link or button tag to identify the product being added to the cart.
Examples:
<a href="#" class="wheelhouse-cart-view">View Cart</a> <br> <a href="#" class="wheelhouse-cart-login">Login</a> <br> <a href="#" class="wheelhouse-cart-logout">Logout</a> <br> <a href="#" class="wheelhouse-cart-add-item" data-item-id="######">Add Item X to cart</a> |
Product Search
This system provides a product search that lets users find items by keyword. Depending on how items are set up within the Wheelhouse site, the product search may display different items based on who is logged in, whether the user is logged in at all, and item visibility.
<input type="text" name="search" id="search"> <button id="searchbtn">search</button> <div id="results"></div> <script> $('#searchbtn').on('click', () => { $('#results').html(''); wheelhouse.cart.searchItems({ term: $('#search').val() }).done((json) => { console.log(json); if (json.status) { json.items.forEach((i) => { $('#results').append('<a href="#" class="wheelhouse-cart-add-item" data-item-id="' + i.id + '">' + i.name + '</a><br>'); }); } else { $('#results').html("Problem with the search data returned."); console.error('Problem with the search data returned.'); } }).fail(() => { $('#results').html("Failed to get search."); console.error('failed to get search'); }); }); </script> |
Is the user logged in?
Use to check whether the user is logged in, so the login/logout buttons can be displayed dynamically.
<a href="#" id="isloggedin">Is Logged In?</a> <span id="answer"></span> <script> $('#isloggedin').on('click', () => { $('#answer').html(''); wheelhouse.cart.isLoggedIn().done((json) => { console.log(json); if (json.status) { if (json.loggedIn) { $('#answer').html('YES'); } else { $('#answer').html('NO'); } } else { console.error('Problem with the login status data returned.'); } }).fail(() => { console.error('failed to get login status'); }); }); </script> |