Add to wishlist

You are reading about requirements for the integration done by the Luigi's Box team. 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 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.

Using HTML markup
Using your API
Using Javascript functions

Using HTML markup

In some cases, you may already have the neccessary 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 successfull 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.

<div class="wishlist-panel">
  <i class="icon icon-heart icon-heart-empty" data-wishlist-product-id="8382"></i>
</div>

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-header-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 caling 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 reponse HTTP code and if the request was successfull (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 reponse HTTP code and if the request was successfull (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.

{
  45343: true,  // product is in user's wishlist
  17266: false, // product is not in user's wishlist
  99982: true
}

Using 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 Javscript 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 use prepare a 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.

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: *

Note that you can't simply set Access-Control-Allow-Origin: * because the wildcard mode is not compatible with the credentials mode.