The link to live page: The Fossil Shop

• As a customer I want to search on the webpage for the item I want.

• As a customer I want to be able to create my own account to login on the webpage.

• As a customer I want to have my items i clicked stored in a cart.

• As a customer I want to see a detailed page of the item i clicked.

• As a customer I want to have a form to contact the admin of the website.

The logo of the website is at the top left. Next to it are the navigation links you can interact with by clicking on them. On mobile devices the navigation links are inside a hamburger icon. When the user comes on the site it will see a carousel with pictures. Beneath it is the webshop name and a slogan. In the footer are some quick links the user can click which brings them to other pages.

• Desktop Homepage
• Desktop Productpage
• Mobile Homepage
• Mobile Productpage

• Stripe pay button: A button to let the customer click on that opens up a payment window.
• Search bar: Allow users to search for items in the webshop.
• Detailed page: A link to the detailedpage where the user can see info about the product.
• Add to Cart button: The user can click on this button and as an result it will be stored inside their cart.
• Email: is send to the customers email used in the payment form.

• Bidding System
• Message to be send to webshop owner by using an form.

• AWS Cloud9 used for their IDE while building and testing the website.
• Balsamiq used for the wireframes/mockups.
• Django uses as framework.
• Django Crispy Forms Rendering of all the forms on the website.
• GitHub to store and share all project code to the github site.
• Git for the version control.
• Gunicorn Python WSGI HTTP Server for UNIX.
• Heroku for application deployment.
• Imgbb to upload all external images.
• PIP is used to download all the tools in the requirements.txt
• Psycopg2 PostgreSQL database adapter.
• Pillow Python imagin library.
• Stripe for the online payment option on the website.
• Travis testing tool
• Whitenoise for static files
• Django-widget-tweaks used for form tweaks.

• PostgressSQL powerful, open source object-relational database
• SQLite3 a small and fast library used for testing.

• This project is programmed in: Python, css, and html

• Bootstrap 4 as a framework.
• Font Awesome for the icons used on this website.
• Google Fonts for website fonts styles.
• JQuery for DOM manipulation.

All steps on desktop were repeated in browsers: Firefox, Chrome and Internet Explorer.

Mobile and tablet:

1. Make sure you are on the index.html page.
2. Beneath the second header you will see a searchbar with the text: "Search for products".
3. When you type in ammonite. All the products with this name will show.
4. If not then the item is not in the store.

Desktop:

1. Make sure you are on the index.html page.
2. Beneath the second header you will see a searchbar with the text: "Search for products"
3. When you type in sharktooth. All the products with this name will show.
4. If not then the item is not in the store.

Mobile and tablet:

1. This can be done on any of the pages.
2. Click on the hamburger icon in the top left of the screen.
3. A menu pops up with all the links to each page.
4. Click on the sign up link.
5. This will bring you to a different page.
6. Fill in the form. And when done click the sign up button.
7. Well done your account is now created!

Desktop:

1. See step 1 one above: Click on the sign up link.
2. This will bring you to a different page.
3. Fill in the form. When done click the sign up button.
4. Well done your account is now created!

Mobile and tablet:

1. You first have to be logged in as without an account you cant add an item to your cart.
2. Now make sure you are on the index.html page.
3. Beneath the search bar you see the shop items.
4. Click on the blue add to cart button for which item you want to be added.
5. If you done it right a number appeared next to the cart icon at the top of the page.
6. For example: if you pressed two of the buttons twice it should show a (2)

Desktop:

1. This can be done on any of the pages.
2. You first have to be logged in as without an account you cant add an item to your cart.
3. Now make sure you are on the index.html page.
4. Beneath the search bar you see the shop items.
5. Click on the blue add to cart button for whivh item you want to be added.
6. If you done it right a number appeared next to the cart icon at the top of the page.
7. For example: You pressed the button three times it should show a (3)

Mobile and tablet and desktop:

1. You have to be on the index.html page
2. Scroll down and you will see the different items in the store.
3. Click on the name of one of the items.
4. After you done this a new page comes up.
5. Here you can see all the details of the product you clicked on.

Mobile and tablet and desktop:

1. This can be done on any of the pages.
2. Scroll down to the footer of the page.
3. Click on the link: Contact Us.
4. You will go to a different page.
5. Here you can fill in the form.
6. When done click on the submit button.
7. After you clicked the button a thank you message appears

Mobile, tablet and desktop:

1. This can be done on any of the pages.
2. Go down the page untill you can see the footer.
3. There you see the text: "Website built by: Geert van Kaathoven."
4. Next to it is an green icon.
5. This is the github icon you need.
6. click on this icon.
7. a new tab opens up to the creator of this websites github.

• To test buy something using the stripe button. Use the following creditcardnumber:

For more info about this go to the stripe documentation

For testing the python code TestCase is used.

In each of the project app the urls are being tested for the correct url name Test created to check the request 200 status code is possitive for the url and views.

• The form at the contact us page is not working. Instead it does show an: "Your message has been sent to the user" page.(see features left to implement)
• Order email: After the user done their payment. It should send an email to them. But sometimes this email is not coming thru. I dont know if it has to do with mailgun or not. If the user want the order email. They can go to their order history and copy and paste it. Or print it out.

This project was developed using the AWS Cloud9 IDE, committed to git and pushed to GitHub using the built in function within cloud9.

To deploy this project to GitHub Pages from its GitHub repository, the following steps were done:

1. Log into GitHub account.
2. From the list of repositories on the screen, select Errepulify/Repositories/wildlife-globe-explorer
3. From the menu items near the top of the page, select Settings.
4. Scroll down to the GitHub Pages section.
5. Under Source click the drop-down menu labelled None and select Master Branch
6. On selecting Master Branch the page is automatically refreshed, the repository is now ready to be deployed.
7. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

To clone this project from GitHub:

1. Follow this link to the GitHub repository
2. Under the repository name, click "Clone or download".
3. In the Clone with HTTPs section, copy the clone URL for the repository.
4. In your local IDE open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

git clone https://github.com/USERNAME/REPOSITORY

7. Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub here.

To deploy Wildlife Globe Explorer to heroku, take the following steps:

1. Create a requirements.txt file using the terminal command pip freeze > requirements.txt.

2. Create a Procfile with the terminal command echo web: python app.py > Procfile.

3. git add and git commit the new requirements and Procfile and then git push the project to GitHub.

4. Create a new app on the Heroku website by clicking the "New" button in your dashboard. Give it a name and set the region to Europe.

5. From the heroku dashboard of your newly created application, click on "Deploy" > "Deployment method" and select GitHub.

6. Confirm the linking of the heroku app to the correct GitHub repository.

7. In the heroku dashboard for the application, click on "Settings" > "Reveal Config Vars".

8. Set the following config vars:

8. In the heroku dashboard, click "Deploy".

9. In the "Manual Deployment" section of this page, made sure the master branch is selected and then click "Deploy Branch".

10. The site is now successfully deployed.

• The icons are from font awesome.
• Picture used in the about us page is from: unsplash
• Pictures used as products in cards are from google

• Testing code is from Django
• Used the udemy video Build Ecommerce Website to Master Django and Python as reference.
• The email template sent to user is from udemy video Build Ecoommerce Webiste to Master Django and Python.
• The videos from Code institute.
• Card code is from official bootstrap website.

• My mentor Juan Monetti who helped and explained me alot.

• Special thanks to the tutor team of Code Institute to answer all my questions I had during this milestone project.

• And all the other staff at Code Institute!

• This website is build for educational purpose.