Products

The site includes the sale of periodical product releases. Based on the release date and other characteristics, products are displayed on various pages.
The software suggests matching protective sleeves based on comic sizes and checks the correct matching of quantities, as in some cases the purchase of protective sleeves was used to reach the free shipping threshold.

Product showcase

The comic book store's need was to highlight the real availability of products on the release day, and on the home page we created a showcase that shows the past, present, and future of releases.
Present: the first products proposed on the home page are the latest releases in chronological order.
Past: just below the latest releases section, the blocks of the last 2 releases are shown.
Future: In the side column in red, products that will be available on the next release date are shown.
All this generates two other features: home page images and pre-orders.

Home page images

Home page images present 2 main issues: aspect ratio and quantity.
The client wanted the cover images to be complete without cropping, but comics have different sizes and proportions. To overcome this problem, the masonry JavaScript library was used, which also includes a lazy loading feature that loads images as needed to reduce initial loading times.
As for image size, images are resized and optimized to reduce their weight as much as possible.

Adult content control

The client also has a mobile app that uses images from the site. It happened in some cases that the stores detected content restricted to minors and blocked the application.
To avoid this inconvenience, images are checked by the Google Vision service, and if the e-commerce receives an adult rating, it censors the photo before sending it to the app.

Search engine

The e-commerce offers many items, so it was necessary to install an internal real-time search engine.
The typesense search engine was used with the addition of the Algolia instantsearch widget.