Adding Wishlist Functionality on PLP Page of SCA Webstore

Requirement

The customers of our client need to add items to the Wishlist from the Product List Page (PLP)  itself. Therefore, they required us to add the same and show a heart icon below the item image. Also, we have to update the color to match the website theme. On clicking the heart icon, we required to display a drop-down similar to Product Detail Page (PDP) where the customers can select the Wishlist option. 

Another requirement was to add an ‘Add to Cart’ pop-up. If the item is already available in the cart, we have to change the button text to ‘Update’ and the color to pink. Since the items on the website include multiple packages, there is a possibility that the customers will add items with different package sizes. Therefore, we have to show a pop-up that shows the customers that the item with a different quantity is already available.  

Solutions

In order to add the items to the Wishlist from the PLP page. Our experts make use of an extension. In the UI, they displayed a button with a heart icon instead of the ‘Add to Wishlist button’. This button is added below the item image. UI changes will be made with the default functionality to remain the same. If the product with a different package size already exists in the cart, then the heart icon will be filled with the color pink. 

In order to add the items to the cart from the PLP page and PDP page. If the product already exists in the cart, the button will appear as ‘update’ in pink. If the product with a different package size already exists in the cart, the pop-up will appear, including details of the product in the cart. The user will have an option to update the pack size with the quantity or cancel the update. This is made possible through an SCA module, the global view confirmation view. Using this module, the product details are passed. Further, the button text and color change.     

Results

Our developers attained the requirements successfully. Now the customers are able to add items to the Wishlist from the PLP page itself. Also, if the items with different package sizes already exist in the cart, the button text will change to ‘Update’ and the color to pink.