Chem-eShop

View the live project here

At the beginning of the pandemic, as sellers of PPE, Chemstore Group set up an online ecommerce store on the Shopify platform. While the Shopify platform is great it has its limitations and costs.

My project features a full ecommerce store that allows users to view chemical safety products. Users are able to fiter them by category, sort by price, name, category, and then add to their bag and checkout securely.

Users can also leave reviews on products, sign up to our newsletter and contact us regarding a product.

Index – Table of Contents

• User Experience (UX)
• Features
• Design
• Planning
• Technologies Used
• Testing
• Deployment
• Credits

User Experience (UX)

User stories :

• All user stories can be seen here Chem-eShop Issues

  Site User Stories

  • As a site user I want to be able to register for an account so that I can have a personal account with my delivery details saved

  • As a site user I want to be able to login and logout so that I can access my profile info

  • As a site user I want to be able to receive an email confirmation after sign up so that I can verify my account registration was successful

  • As a site user I want to be able to have a personalised user profile so that I can view my order history and delivery information

  • As a site user I want to be able to leave a product review so that I can advise potential customers with my advise

  • As a site user I want to be able to sign up to a newsletter so that I can get the latest news and offers

  • As a **site user ** I want to be able to **unsubscribe for the newsletter ** so that I can stop receiving emails

  • As a site user I can return to Home after http 404 or 500 response so that I feel I am still working within the website and can navigate easily

  Shopper User Stories

  • As a Shopper I want to be able to view a list of products so that I can select a product to purchase

  • As a shopper I want to be able to view individual products so that I can check price, description, images and sizes

  • As a shopper I want to be able to view my total cost so that I can I don't spend too much

  • As a shopper I want to be able to sort any list of products so that I can easily sort by price, best rated, etc

  • As a shopper I want to be able to sort products into categories so that I can split products into categories to make it easier to find what I want

  • As a shopper I want to be able to search a product by name so that I can easily find the product I am searching for

  • As a shopper I want to be able to select a specific size so that I can I can make sure the product will suit my needs

  • As a shopper I want to be able to view the items in my bag so that I can check out my bag contents and know exactly what I am buying

  • As a shopper I want to be able to adjust the quantity of items in my bag so that I can easily make changes

  • As a shopper I want to be able to enter my card details so that I can make a purchase

  • As a shopper I want to be able to view my order after I complete a purchase so that I can verify I have not made any mistakes

  • As a shopper I want to be able to receive an email confirmation after making a purchase so that I can keep the confirmation for any future needs

  • As a shopper I want to be able to contact Chemstore so that I can get in touch regarding a product/ issue, etc

  Admin Stories

  • As an admin I want to be able to add a product so that I can I can add new products my store

  • As an admin I want to be able to edit a product so that I can make changes to any product

  • As an admin I want to be able to delete a product so that I can remove an item that is no longer for sale

  • As an admin I want to be able to view all messages from the contact form so that I can communicate with customers in a timely manner

  • As an admin I want to be able to view all messages from the contact form so that I can communicate with customers in a timely manner

  • As an admin I want to be able to view a list of subscribers in my admin so that I can see the amount of subscribers we have

  • As an admin I want to be able to export a CSV list of my subscribers so that I can can use them in marketing campaigns using tools like Mail Chimp

Features

Existing Features

- Header

The header features the Chemstore logo, navigation for products in the centre and three icons to the right, a search icon, an account icon and a bag icon.

- Search Icon and Overlay

The search icon when clicked brings up a search input below, this can be used to search the site for all products. An autofocus was added so when the search icon is clicked the user's type is on the search input.

Account Dropdown

When clicked the account icon will display a dropdown list. Depending on the logged in status of the site user you will see different links. When the user is logged out they will see 'Register', 'Login' and 'Contact'. If the user is logged in they will see 'My Profile', 'Logout' and 'Contact'. Finally, if an admin user is logged in they will see 'Product Managment', 'My Profile', 'Logout' and 'Contact'.

Bag Notification

If the user currently has nothing in their bag they will just see a bag icon. If the user adds a product or products to their bag a green circle/ bubble will appear with the number of items in their bag.

Hero Section

The hero section is quite simple featuring an illustration of an ecommerce style image to the right and an a site intro on the left. The hero section also features a button to 'Shop Now' that takes the user to the all products page.

Product Categories

Below the hero section is a Product Categories section. This section features five cards with an image. Each card will grow on hover and when clicked will take the user to that product category.

About Us Section

Next we have the about us section. Again, another simple section featuring a small word on the company on the right and an image of a chemical safety worker on the right.

Our Client Carousel

At the bottom of the homepage is a carousel style section featuring some of Chemstore's previous clients. This has been animated to automatically scroll across the screen.

Footer

Finally the homepage features a footer. This footer is split into four sections. Firstly, the address section, then the products and account links. The fourth part of the footer features the Chemstore logo, a link to sign up to the newsletter below that and then social links.

There is also a link to the privacy policy at the bottom.

All Products Page

The all products page displays every product on the store as cards in rows of max 3. This page has a sort by field that allows a user to sort by price, name, rating and category. The produuct cards display the product image, title, price, rating and category below it.

The rating shown is an average of all user ratings for that product.

If the user is an admin they will see two icon buttons to edit and delete a product.

Edit Product

This feature is only available to admin users, when the edit button is clicked whether from the products page or product detail page it will take you to the edit product page.

An alert displays to notify the admin that they are currently editing a product. The edit product page features a rich text editor thanks to django-ckeditor.

Delete Product

When the delete button is clicked the admin user will have a modal appear to confirm if the admin wants to delete the product.

Product Detail Page

The product detail page features an image to the left and then on the right there is the product title, price, rating, description, the quantity and then two buttons 'Keep Shopping', that will take the user back to the products page. The 'Add to Bag' button will add the product to the user's bag.

The rating shown is an average of all user ratings for that product.

If the user is an admin they will again see two icon buttons to edit and delete a product.

User Added to Bag:

If the product has sizes a sizes option will also appear on the product detail page.

Product Reviews

Below the product container on the product detail page is the reviews section. When a user is signed in a product review form will show on the left side. The user reviews are then displayed on the right. These reviews have the review title, body, the user it was left by and the rating they gave.

Only the user that made the review or an admin has the ability to edit or delete it.

Edit Review Page

When the user clicks the edit button they are taken to a page with the edit form prefilled with their previous details. At the bottom there is two buttons. The first is to 'Delete Review', this will again take the user to a modal again to confirm delete. Then there is an 'Update Review' button that updates the review.

Add Product

As well as admin users having the ability to add products in the django admin they can also add them in the front end site. This page also features a rich text editor.

Bag Page

When the user is ready to progress on to the bag page they can either click the 'Go to Secure Checkout' button on the pop up that appears after adding an item to the bag or by clicking the bag icon.

The bag page features each product as displayed as a line item. The user can edit quantites or remove items from their bag with the buttons displayed.

Checkout Page

The checkout page has a form to fill out the user's delivery details and card details. On the right is an order summary with the total cost.

Checkout Success

Following a successful checkout process the user will be taken to a success screen. There is an alert with the confirmation number and email the confirmation was sent to. This page displays a summary of the order info, details, delivery details and the amount they were charged.

Profile Page

On the my profile page the logged in user can see their saved delivery details to the left and their order history on the right. Clicking the green highlighted order number will take the user to the order confirmation history with an alert that they are viewing an old order history.

Contact Page

The contact page has an embedded Google Map on the left of the location of Chemstore. Next to it is a contact form with the option to select a product if their query relates to a particular product.

Newsletter Page

The newsletter sign up page features a simple input field for users to type their email address and be signed up. When submitted the user will get an alert saying that they are now signed up and receive a confirmation email.

Unsubscribe Page

Near identical to the sign up page, the unsubscribe page has a single input field to delete their email address from our database. When submitted the user will get an alert saying that they are now unsubsribed and receive a confirmation email.

Newsletter Admin Page

When an admin user navigates to the user page he will also see an export button. When clicked a CSV file of all newsletter sign ups will be exported for use on Chemstore's email marketing service, Campaign Monitor.

Custom 404 Page

Finally, I have set up a custom 404 error page (as well as 403, 405 and 500). This presents the user with a relevant image and a link to take them back to the homepage.

SEO and Web Marketing

SEO

I have taken several steps to help with the sites SEO:

1. All images have descriptive alt tags.
2. Meta desciptions are generated for each product using their product description.
3. Meta keywords for homepage of site.
4. SEO friendly description and slogan.

Email Marketing

1. A newsletter has been set up to capture emails.
2. This can easily be exported to a CSV file from either the front-end or back-end.
3. When exported Chemstore can use their email marketing service, Campaign Monitor.

Social Media

1. Although less useful for B2B products, A Facebook page for Chemstore exists.

Link here: Chemstore Facebook Page

Chemstore's main audience can be found on LinkedIn, as they predominantly operate in the B2B space.

Link here: Chemstore LinkedIn Page

Features which could be implemented in the future

Below are some of the features that I will be working on over the next few weeks.

• Draft Orders

Due to the nature of what Chemstore sell many of their customers do not know exactly what product they need. Often times customers contact them about this. On Shopify the sales person can make create a draft order that is then sent to the customer directly to pay.

• Order Collection

A few Chemstore customers would prefer to collect their products from the Chemstore factory, this a feature Chemstore can offer on Shopify that I would like to implement in the future.

• Stock/ Inventory Management

Another feature that I would like to implement in the future is an option to import an inventory file for product management.

• Product Gallery

Next I would like to have a product gallery on the product detail page.

• Shipping Costs

With the products that Chemstore offer varying so much in size and weight I would like to have a feature that an admin can set a product's shipping cost.

• Featured Product

Another feature I will be implementing will be the ability to have a featured product in any given category like in my wirefreames.

Design

Wireframes

Below are all the wireframes that I created for this project:

Entity-Relationship diagram for DBMS

Below is an image of my entity-relationship diagrams:

Planning

For this project I used Github Projects as an agile tool. I created user stories and moved them along the progression boards as I was at different stages.

Link can be found here: Chem-eShop Github Project

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Python

Frameworks, Libraries & Programs Used

• Google Fonts used for the Poppins and Open Sans fonts.
• Font Awesome was used to add icons for aesthetic and UX purposes.
• Git was used for version control by utilising the Gitpod terminal to commit to Git and Push to GitHub.
• GitHub is used as the respository for the project code after being pushed from Git. In addition, for this project GitHub was used for the agile development aspect through the use of User Stories (GitHub Issues) and tracking them on a Kanban board.
• Django was used as the framework to support rapid and secure development of the application.
• Bootstrap was used to build responsive web pages.
• Django allauth used for account registration and authentication (version 0.41.0 installed because of project dependencies).
• Pillow - Python Imaging Library used for image handling.
• Django ckeditor - Renders rich text editor for various forms.
• jquery library - for various pieces of functionality including adding and removing items from the shopping cart and handling the increment and decrement of the quantity control.
• Django crispy forms used to simplify form rendering.
• Django import export used to export list of newsletter subscribers.
• Stripe used for secure payments (referenced in base.html).
• Stripe install library used for secure payments.
• Django Countries used on checkout page to pass valid country code to Stripe.
• Gunicorn was used as the Web Server to run Django on Heroku.
• dj_database_url library used to allow database urls to connect to the postgres db.
• psycopg2 database adapter used to support the connection to the postgres db.
• Amazon S3 used to store static files and images.
• Boto3 the Amazon Web Services (AWS) Software Development Kit (SDK) for Python.
• django_storages used to connect django to S3.
• Heroku - used to host the deployed application.
• Heroku Postgres - SQL database service provided by Heroku used to store models and data.
• Balsamiq was used to create the wireframes during the design process.
• Grammarly was used to proof the content of my project and README.
• Beautifier.io was used to beautify html and css.
• W3 HTML Validator was used to validate HTML.
• W3 CSS Validator was used to validate CSS.
• Adobe Photoshop was used to create the images for category products.

Testing

Validator Testing

W3 HTML Validator found a few issues that I am going to classify as bugs.

1. Products page found an error Duplicate ID exampleModalLabel.

• This is due to me having a modal to confirm that the user wants to delete a product or review. The modal has to be in my for loop for it to work.

2. Edit product page found multiple errors.

• These errors are being caused by a django installation, ckeditor and not due to my code.

3. Product detail page found multiple errors.

• These are again being caused by django-ckeditor.

Pages Checked

• Home Page
• Products Page
• Product Detail Page
• Add Product Page
• Edit Product Page
• Edit Review Page
• Profile Page
• Sign Up Page
• Unsubscribe Page
• Contact Page
• Bag Page
• Checkout Page
• Checkout Success Page
• Sign Up Page
• Login Page
• Logout Page
• 404 Page

W3 CSS Validator found no issues.

All code has been beautified with Beautifier.io

All code has been made PEP8 compliant.

Manual Testing Test Cases and Results

Below are the series of user testing that I carried out on my site.

Known bugs

I had a an issue with my webhooks not working and confirmation emails subsequently not being sent. To fix this issue I had to copy over the entirety of Boutique Ado's checkout code. I then could not migrate these model changes to Heroku. This was eventually fixed but I thought that I should make note of it just in case.

Deployment

# Cache control
AWS_S3_OBJECT_PARAMETERS = {
    'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
    'CacheControl': 'max-age=94608000',
}

# Bucket Config
AWS_STORAGE_BUCKET_NAME = "chem-eshop"
AWS_S3_REGION_NAME = "eu-west-1"
AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID")
AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY")
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'

STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

<summary>Add Stripe Config Vars and Webhooks</summary>

Credits

Code

• I created the bulk of this project following the 'Boutique Ado' walkthrough project and had to copy the entire checkout section, which is documented in my bug errors.
• A lot of my newsletter code came from here: Newsletter Code 1 | Newsletter Code 2
• A lot of the import/ export came from here: Export Code | Review Stars Code
• The icon carousel came from tiktok user @tomisloading

Content

• Much of the content for products came from Chem-eShop. Which I used as my base idea but with the idea of improving as I went.
• The about us content came directly from Chemstore Ireland
• My hero image and many of the error page illustrations came from Many Pixels

Acknowledgments

• Thank you to my mentor Brain Macharia for his help and feedback throughout this project.
• Thanks to the Code Institute tutors that also helped me in this project.