--- title: Add to wishlist description: How to provide wishlist integration callbacks for the Luigi's Box team, including add, remove, and status check. slug: lbx-integration/requirements/add-to-wishlist docKind: integration hub: lbx-integration --- :::note You are reading about requirements for the [integration done by the Luigi's Box team](/lbx-integration/). You can safely skip this part of the documentation if you are integrating yourself using either API or Luigi's Box frontend libraries. ::: Adding to wishlist is conceptually very similar to [Add to cart](/lbx-integration/requirements/add-to-cart/) in the sense that this feature requires deeper integration with your web backend. The Luigi's Box team will provide the visual HTML element which allow the user to add the product to wishlist, but it is your responsibility to provide the technical means to make the wishlist buttons alive and working. The integration is however, slightly more complex than for Add to cart, since the wishlist button usually serves 3 different interactions: - Add the product to wishlist - Remove the product from the wishlist - Indicate if the product is in the wishlist already If you require the "add to wishlist" button on your product tile, we will discuss the best way to implement it during the onboarding phase. In general, there are 3 ways that we can integrate the wishlist, depending on your preference, ease of implementation or your existing solution. Choose **just one** of the options below, preferably the one that you are already using internally or that is easiest to implement. - [HTML markup](#html-markup) - [Using your API](#using-your-api) - [JavaScript functions](#javascript-functions) ## HTML markup In some cases, you may already have the necessary technical infrastructure in place which supports your wishlist and your implementation is being driven by the HTML annotations. In this case, it is enough if you specify the HTML structure that the Luigi's Box team needs to adhere to. Note that for successful and complete integration, you need to cover all of the 3 scenarios mentioned above (add/remove/indicate). See the following examples to illustrate how the HTML markup may be specified. ```html
``` The `data-wishlist-product-id` is the data attribute that you use to set up the JavaScript implementation on your side, to e.g.: - On initialization, call your internal API to detect if the product with the given ID (8382 in this example) is in the wishlist. Based on your API response, set the appropriate class that indicated if the product is in wishlist already or not. E.g., you can set `icon-heart-empty` CSS class to indicate that the product is not in the wishlist and `icon-heart-fill` to indicate that the product is already in the wishlist. - Add onclick listener which, depending on the wishlist state, either removes or adds the product with the given ID to the wishlist, by calling your internal API and then updating the CSS class to change the wishlist indicator for this product. Note that any listeners that you define must be declared as "live listeners" to pick up any elements that are created after your website is done rendering, since the Luigi's Box services are integrated as an SPA component. ## Using your API You can provide us with 3 API calls, each taking care of one of the 3 wishlist interactions. ### Add to wishlist You will provide an API which the Luigi's Box integration calls and passes it the product ID as the query string parameter. The API is responsible for adding the product to wishlist. The Luigi's Box integration will read the response HTTP code and if the request was successful (HTTP status 2xx), it will update the wishlist indication to reflect the change. For example: **POST** `http://yoursite.com/api/wishlist/add?product_id=45345` ### Remove from wishlist You will provide an API which the Luigi's Box integration calls and passes it the product ID as the query string parameter. The API is responsible for removing the product from wishlist. The Luigi's Box integration will read the response HTTP code and if the request was successful (HTTP status 2xx), it will update the wishlist indication to reflect the change. For example: **POST** `http://yoursite.com/api/wishlist/remove?product_id=45345` or **DELETE** `http://yoursite.com/api/wishlist/45345` ### Check wishlist status To allow the integration to display the appropriate state of the wishlist icon (usually a blank heart/heart with a fill), you will provide a bulk API which accepts the list of product IDs and responds with wishlist status. For example: **GET** `http://yoursite.com/api/wishlist/status?product_ids=45345,17266,99982` The response should be JSON data, which reflects back the product IDs along with their wishlist status, e.g. ```json { "45343": true, "17266": false, "99982": true } ``` ## JavaScript functions As an alternative to the API, you can provide 3 JavaScript functions, each taking care of one of the 3 wishlist interactions. These JavaScript functions will usually be just the wrappers for your internal HTTP API: - To add to the wishlist, implement a function with the signature: `addToWishlist(productId)`. - To remove from the wishlist, implement a function with the signature: `removeFromWishlist(productId)`. - To check if a product is in the wishlist, implement a function with the signature: `isInWishlist(productIds)` which accepts an array of product IDs and returns a JSON object in the same structure as the API call above, reflecting the product IDs as the keys in the object structure. ## Mix A mix of the approaches outlined above is possible. You may prepare JavaScript functions to take care of adding to and removing from the wishlist, and provide an API to check the product-wishlist status. As long as you cover all of the 3 interactions, you can freely mix different approaches. ## CORS If you are providing us with an API endpoint, and that API lives on another domain or a subdomain than the main website, then you will need to provide CORS headers. The request to your API will be done with `withCredentials: true`, in order to allow the browser to send cookies which allow you to identify the user. Using `withCredentials: true` in the request has an impact on the CORS headers that you need to set. These are the response HTTP headers that you need to set. Please replace `https://www.yourstore.com` in the example with your domain. ```http Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: https://www.yourstore.com Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: * ``` :::caution You can't simply set `Access-Control-Allow-Origin: *` because the [wildcard mode is not compatible with the credentials mode](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials). :::