Wishlist Code Overview

In this page, we can get a brief idea about the code that we are using for implementing Wishlist on the Hydrogen

Our code is divided into various modules in this repository

Utility folder

Path - src/swym

Modules -

• Alert.jsx - Adds alert box that appear for short period on top right of website.
• store-apis.js - Contains the APIs to hit swym endpoints for various wishlist functions.
• swym.config.js - Contains important config for swym workflow.
• Utils.js - Contains utility functions
• wishlistPage-apis.js - Contains the APIs to hit swym endpoints for various wishlist functions used in the wishlist page.

Routes

Path - src/routes/[handle]

Modules -

• shared-wishlist.server.jsx - Route for the shared wishlist page

• wishlist.server.jsx - Route for the wishlist page

UI Components

Path - src/components/wishlist

Modules -

• Utils folder - Contains utility functions for the the Wishlist UI
• shareWishlistModal.client.jsx - Contains code for 'Share wishlist' pop-up, on clicking Share Wishlist button
• ShareWishlistPage.client.jsx - Contains code for shared wishlist page

• wishlist-context.jsx - Contains context variables used throughtout the UI Components
• WishlistButton.client.jsx - Contains code for 'Add to Wishlist' button
• WishlistDeleteButton.client.jsx - Contains code for the delete button, on Wishlist Page
• WishlistItem.client.jsx - Utiity component: UI components for displaying the List in the 'Add To Wishlist' button pop-up
• WishlistPage.client.jsx - Contains code for wishlist page

• WishlistPopUp.client.jsx - Contains code for 'Add to List' pop-up, on clicking Add to Wishlist button on product page