Shop Now
The Shop Now is a website for the Shop Now business. The websites main purpose is the sell glasses and hats to people online in a secure way.
Link to project:
https://ehnvik-shop-now.herokuapp.com/
User Stories
As a customer, I would like to _____
- be able to see what the shop has to offer, so that I can decide if I want to by any of the products
- be able to view individual product details, so I can get more information about the product before making an purchase decision
- have a easy overview over the website, so I can navigate myself on it
- identify deals and new products so I can save money on products I want to buy or buy the latest products on the website
- be able to view the total of my purchase at any time so that I don't spend too much
- be able to search for a product by name or description so I can find a specific product I'd like to purchase
- be able to sort the products by price or rating so I can find the best reviewed products or the best priced products
- have a summary of the products I have chosen, so I can decide if I need remove or change a product before buying it
- be able to feel that my personal and payment information is secure so that I can confidently provide the needed information to make a purchase
- be able to store my personal information and order history in my profile so I can go back and view it in the future and also make future purchase more easy
- be able to receive an email confirmation after my purchase so that I can verify that I haven't made any mistakes
- be able to reset my password if I forget it so that I can log in to my profile again
- be able to adjust the quantity of the specific item in my bag so that I can easily make changes to my purchase before checkout
- follow the store on social media so I can find the latest products or deals
As a store owner, I would like to _____
- be able to update and delete information on the website so I can improve the store
- be able to add new products so that I can add new products to my store
UX
- All the important navigation links are located on top on every page
- The forms are easy to understand with clear placeholders
- The products on the website are easy to find in the search bar
- If the customer don´t know the name of the product, then they can easily find using the filter functionality
- The toast pop up windows gives the customer a confirmation respond when making a change on the website
Features
Navigation
- On the top of the page you find the navigation bar. The navigation bar is in the color white. It has the same info on every page.
- The customer can connect to all the websites pages from the navbar.
- The customer can search for a specific product in the search bar. It is possible to search for a product by its name or description.
Main Page
- The main page contains a background image that has a hat and glasses theme.
- The customer gets information that the "new collections are here".
- The customer can jump to the all products page by clicking the "Start Shopping" button.
- Above the background image is a information banner that gives the customer information about how much they have to spend to get a free delivery.
Footer
- The footer has the same orange and white theme as the rest of the page so the page feels more united.
- The footer contains a direct link to the Shop Now facebook page. Where customer finds information about the stores latest deals and products.
Product Page
- The product page is divided in to 4 different categories. Hats, Glasses, New Arrivals and Deals. That gives the customer a opportunity to look for a product in a specific category.
- The customer is able to sort the products by name, price, category or rating which helps the customer to find he or she is looking for.
- On top of the page is a button that sends the customer to the all products page which helps the customer to find the products on the website.
- The product page gives information of how many products that are viewd on the page.
- The store owner can delete or edit products on the page. Which is an easy way to improve the website.
Product Detail Page
- The customer can choose between different sizes on hats. So the customer can buy the correct size that fits.
- The customer can choose how many of the same product they want to buy, if the want to buy several of the same product.
- If you click on the product picture a new window opens up with a larger picture of the product. So the customer have a better view of the product they want to buy.
- Admin can edit and delete the product on this page also.
- The customer gets a preview of the shopping bag when adding or updating a product. So they always know what products they have in the bag and how much they cost.
- The customer gets notified that they need to spend a minimum of 25$ to get free delivery if they add a product that cost less than 25$.
Shopping Bag
- The customer gets a summary of shopping bag before going to checkout.
- The customer have the possibility to change, add or delete a product before going to the checkout page.
- The customer can click on the button "Keep shopping" if they forgot to buy something.
Checkout Page
- The customer gets a last summary of the products they are about to purchase.
- The customer are able to fill in their personal information so the product is sent to the correct adress.
- The customer are able to pay with their credit card in a secure way using webhook. So the company gets the money and the customer gets the product.
- The customers personal information gets automatically added to the fields if they are logged into their profile.
Checkout Page Success
- The customer gets a summary of the purchase so they can verify that the order is correct.
- A confirmation email with the order information is sent to the customers email, so the customer knows the order is complete.
- The customer can go to the latest deals by clicking on the "Now check out the latest deals!" button below the order summary. If they want to keep shopping.
Profile
- The customer can register a profile on the website using their email address.
- Before the profile is valid they need to confirm their email address by clicking on the email confirmation link.
- If the customer wants to see there order history, then they can find it on their profile.
- The customer can add their personal information there profile that they can use on their next purchase.
Product Management
- The store owner can add new products directly on the website. Which makes it easy to improve the website.
Admin
- The store owner can from the admin page administrate email adresses, products, categories, orders and users. This makes it possible to do big changes to the website without coding.
- It is possible to add, delete or update orders.
- It is possible to add, delete or update products.
- It is possible to add, delete or update categories.
- It is possible to add, delete or update users.
- It is possible to add, delete or update email addresses.
Facebook Page
- The website has a link to its Facebook page. The customer can from here get the latest info of what the store can offer. They get this info first by following the page.
Test
- I have tested that this website works in different browsers: Firefox, Chrome and Safari.
- I confirm that this website is responsive and works on all standard screen sizes using the devtools device toolbar.
- I confirm that all links on website is working and are not broken.
- I confirm that the link in the social media logotype works and that the social media website opens up in a new window.
- I confirm that forms on the website works and that the customers gets the email confirmation afterwards.
- I confirm that the search bar is finding the correct product.
- I confirm that the product sorting and filtering is working properly.
Testing
I have tested the following functionality:
That all the links work properly
That All Products page works
By Category works
By Rating works
By Price works
Products Detail page with functionalities works
Bag page with functionalities works
Checkout page with functionalities works
Checkout Success page with functionalities works
Register Profile works
Login and update profile works
Confirmation and verification emails work
Toast pop up windows work
Product Management page with add product functionality works
Admin page with add, update and delete functionality works
That Stripe payment with webhook functionality works
Validator Testing
I have validated the following languages:
- CSS = Validated with no errors.
- HTML = Validated with no errors.
- Python = Validated with no errors except for line to long errors.
- Javascript = Validated with no errors except for jQuery that the validator couldn't read.
Lighthouse testing
The Performance and SEO is excellent. With ok results on Accesibility and Best Practice.
Deployment
- Created the app using a unique name in Heroku.
- Went to the Resources tab in Heroku and searched for Heroku Postgres in the 'Add-Ons' section.
- Selected the free Hobby level.
- Updated the env.py file within my local workspace with the DATABASE_URL details, and the settings.py to connect to the database using the dj_database_url package.
- Migrated the files and pushed them to github and then to Heroku, but without the static files.
- Went to the Settings tab in Heroku and clicked on the Reveal Config Vars button.
- Copied and pasted the env.py default variables into Heroku's Config Vars settings.
- Went to AWS and logged in to my account.
- Created a new bucket on AWS with all the necessary settings.
- Downloaded the secret AWS and paste it in to Heroku Config Vars.
- Deleted the DISABLE_COLLECTSTATIC=1 variable in Heroku.
- Added following code into Settings.py
- Push all the changes to Github/Heroku and all the static files will be uploaded to S3 bucket.
- Create a Media Folder in AWS.
- Upload all the images to the folder.
Credits
-
Code Institute tutorials (CKZ8780 Chris Zielinski)
-
Tutor Support
-
Slack
-
Product images from: https://pngimg.com/
-
Background image from: https://pixabay.com/sv/photos/m%c3%a4n-kvinna-tidning-b%c3%a4nk-parkera-6245003/
-
Font from Google API
-
Logos from Fontawesome.com