Saving Products

Customers can choose to add products to existing carts, or start new carts, from the product page. Refer to the installation guide for instructions on how to add the app block or app embed to your product page.

Saving a product

Using the Save Product button opens a modal that allows customers to either create a new cart with the current product as a line item, or add the product as a line item to an existing cart. The selected quantity is added to the line item. If there is an existing line item with the same variant and properties, the quantity will be added to that line item.

Using default carts

Customers can set a cart to be their default. When the use default cart setting is enabled, there will be an attempt to save the product to the default cart. If there is no default cart, the modal will open instead.

Saving from the catalog page

The app embed allows you to create a custom implementation for saving products from the catalog page. Use the window.cartSaver object to access the API using JavaScript. To save a product, three things must happen.

1. Create a function for the window.cartSaver.productCallback value that returns an array of line items.
2. If you are not using default carts, you will need to use the window.cartSaver.openSelector method to open the modal.
3. The customer chooses to save to an existing collection or create a new collection with the product.

Following is an example of what your implementation might look like.

<button
	class="save-product"
	data-variant-id="{{ product.first_available_variant.id }}"
>
	Save Product
</button>

const buttons = document.querySelectorAll(".save-product");
buttons.forEach((button) => button.addEventListener("click", saveProduct));

function saveProduct(e) {
	// Get the data set on the target button
	const data = e.target.dataset;

	// Set the productCallback function
	window.cartSaver.productCallback = function () {
		return [
			{
				variant_id: data.variantId,
				quantity: 1,
				properties: null,
			},
		];
	};

	// Open the modal
	window.cartSaver.openSelector();
}

Creating a custom button

When using the app embed, you have the option to use a custom button. The first step is to uncheck the option Embed add product button. The button you create needs to have the class aasaved-cart-save. Here is an example:

<button class="aasaved-cart-save" type="button">Save Product</button>