Welcome to the E-Shop Web App
An interactive, responsive online shopping experience designed for smooth user navigation, convenient product search, efficient cart management, and a wishlist feature! This app is ideal for users looking for a streamlined e-commerce experience and administrators seeking integration with Google Sheets for inventory and order management.
Here are the key features:
- User-Friendly Navbar: The app includes a dynamic, fixed-top navigation bar, allowing quick access to the shopping cart, wishlist, and category listings.
- Product Search & Filter: The search bar enables users to find products by name, while category filters and subcategory toggles help narrow down specific choices, with an animated drop-down icon for enhanced UI.
- Wishlist Integration: Users can add products to a wishlist, view it in a dedicated modal, and move items to the cart. Visual notifications confirm actions like adding or removing items.
- Responsive Product Cards: Each product card features an image, rating, description, price per unit, and a quantity selector, with hover effects to enhance the visual experience.
- Interactive Shopping Cart: An in-app cart displays selected items with adjustable quantities, auto-calculated subtotals, and a 5% discount for bulk purchases. The cart updates in real-time, showing total costs before and after any discounts.
- Order Modal with Contact Form: A built-in order form collects user details, providing total cost and itemized order breakdowns.
- Google Sheets Integration: Admins can track orders in real time, as the app updates inventory directly in a Google Sheet upon each order, keeping stock levels accurate.
- Back-to-Top Button and Sticky Footer: A back-to-top button provides effortless navigation on long pages, and a footer features location, contact details, and social media links.
- Real-Time Inventory Management: For efficient stock monitoring, the web app syncs with a Google Spreadsheet, making it easier to handle stock levels directly from Google Sheets.
- Customizable Invoice Modal: After order placement, users can view a detailed invoice in a modal window, which displays essential order details and the total cost.
| Step | Instructions |
|---|---|
| Step 1 | Open the web app link provided. |
| Step 2 |
If you see a Google Sheet in view-only mode:
|
| Step 3 |
If you see a page with two options (Make a Copy and AppScript File):
|
| Step 4 | Follow the on-screen instructions to complete the setup. |
| Step 5 | Click on the Extensions menu at the top of the Google Sheet. |
| Step 6 | Select Apps Script from the dropdown menu. |
| Step 7 | In the Apps Script editor, click on the Deploy button. |
| Step 8 | Select New deployment from the dropdown menu. |
| Step 9 | In the deployment configuration, click on Select type and choose Web app. |
| Step 10 | Fill in the required fields and click on Deploy. |
| Step 11 | Grant the necessary permissions when prompted. |
| Step 12 | Once deployed, copy the web app URL provided. |