Render a Wishlist Page / Modal in a container
Render the default wishlist UI in a container of your choice, in your custom page.
swat.ui.renderWishlistInContainer
Render the wishlist default UI based on the respective API will be rendered within a container element on the storefront. This can be used to render the wishlist as a page or as a modal.
Definition
swat.ui.renderWishlistInContainer(containerElement, queryParams)
Create a Page in your theme, include the below div.
Create a page on the storefront with required HTML element and use the API to initialize the UI render within a SwymCallback. The URL to this page can be the wishlist as a page for the storefront.
<!-- Include html in the body -->
<div id="swym-wishlist-render-container"></div>
Example
window.SwymCallbacks = window.SwymCallbacks || [];
window.SwymCallbacks.push(function(swat) {
var wishlistContainerElement = document.querySelector("#swym-wishlist-render-container");
var queryParams = swat.utils.getEncodedAsObject(window.location.search);
// Contains queryParams["lid"] to render a specific list id
swat.ui.renderWishlistInContainer(wishlistContainerElement, queryParams);
});
API Parameters
Argument | Type | Description |
---|---|---|
wishlistContainerElement | DOMElement | Target element to render User interface into |
queryParams | Object | Query string as object, lid key to set list id to open |
Updated over 1 year ago