Eldridge Music Book Emporium - Introduction
Eldridge Music Book Emporium is dedicated to spreading the love and appreciation of music through the exchange of used and new music books. We are a small shop that is entering the 21st century with our first e-commerce store! Currently we have plans to expand our music selection to include music books for instruments other than the piano in the future. Until then, please spend a moment to peruse our selection and hopfully give some lightly used music books a life!
-
As a shopper I want to view all the merchandise in the store.
- I opened the home page of Eldridge Music Book Emporium. I clicked on Music Books on the header and I saw a drop-down menu. I then clicked on, All Music Books and saw a list of all the music books on the site.
-
As a shopper I want to view detailed information about a piece of merchandise.
- I opened the home page of Eldridge Music Book Emporium. I clicked on Music Books on the header and I saw a drop-down menu. I then clicked on, All Music Books and saw a list of all the music books of the site. I found a book I liked and clicked on the merchandise card and found all the detailed information I needed.
-
As a shopper I want to see all discounted merchandise.
- I opened the home page of Eldridge Music Book Emporium. I clicked on Specials on the header and was taken to a page containing all the discounted music books.
-
As a shopper I want to view all the items in my cart.
- I was shopping and need to know the total of all my selected merchandise. I clicked on the cart button in the top right corner of the page and I'm taken to a page where I could see all the items in my cart and the total cost.
-
As a shopper I want to be able to search available products by their category.
- I opened the home page of Eldridge Music Book Emporium. I clicked on Music Books on the header and I saw a drop-down menu. I then was able to select which category of music books I wanted to view.
-
As a shopper I want to be able to search for an item by its name or composer.
- I opened the home page of Eldridge Music Book Emporium. I saw a user input search bar and input the composer I was searching for. I was taken to a page that contains all available books composed by this composer.
-
As a shopper I want to receive a confirmation email upon checkout.
- As I finish shopping I clicked the Go to secure checkout button and I am taken to a form that I must complete to check out. I finish the form and I submit it. I checked my email account and found an invoice with detailed information about my purchase.
-
As a new user I would like a create an account.
- I opened the home page of Eldridge Music Book Emporium. I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and I clicked, Create Account. I was taken to a page where I started the process of creating an account.
-
As a new user I would like to receive a confirmation email after registering.
- I opened the home page of Eldridge Music Book Emporium. I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and I clicked, Create Account. I was taken to a page where I started the process of creating an account. I checked my email account and found a confirmation email regarding my newly created account.
-
As a returning customer I would like to rate products I have purchased.
- I opened the home page of Eldridge Music Book Emporium. I entered the title of a book I purchased in the user input search bar and clicked on the merchandise card to get its Details View. I clicked on Click to Rate. I entered my rating in the text box that appeared and clicked Rate me!. I was able to see the updated average rating.
-
As a returning user I would like to easily login or logout.
- I opened the home page of Eldridge Music Book Emporium. I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and I clicked, Login. I was taken to a page to login.
-
As a returning user I would like to recover my forgotten password.
- I opened the home page of Eldridge Music Book Emporium. I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and I clicked, Login. I was taken to the login page and I clicked the Forgot Password? button. This button sent me to a password reset page.
-
As a returning user I would like to have a personalized profile that has all my previous invoice information.
- I opened the home page of Eldridge Music Book Emporium. I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and I clicked, Login. I was taken to the login page. After I finished logging in, I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and I clicked profile. Once on the profile page, I saw all of my previous invoices.
-
As a returning user I would like to update my shipping information.
- I opened the home page of Eldridge Music Book Emporium. I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and clicked, Login. I was taken to the login page. I finished logging in, then I clicked on the profile button on the top right corner of the page. A drop-down menu appeared below the profile button and I clicked profile. Once on the profile page, I saw all of my shipping information. I updated my shipping information and submitted the changes.
-
As a store manager I want to be able to add merchandise.
- I logged in with my store manager account. I clicked on the profile button and selected, Merchandise Management. I was taken to a page where I could add a merchandise items.
-
As a store manager I want to be able to edit merchandise.
- I logged in with my store manager account. I searched for and found the item that needed editing. On the top right corner of the merchandise card, I saw a button that said, edit. I clicked this button and I edited all the fields of the merchandise item.
-
As a store manager I want to be able to delete merchandise.
- I logged in with my store manager account. I searched for and found the item that needed to be removed from the store. On the top right corner of the merchandise card I saw a button that said, delete. I clicked the delete button and the item was removed from the store.
- Logo was given a layered effect which gives it a textured look.
- The user search bar can be used to search for a composer or name of an item.
- The profile button allows users to access log in/out functions, superuser functions, and their user profile.
- The cart button shows users the total cost of the selected items and will take them to their cart.
- The specials header bar displays the site's current specials or deals.
- A musically themed hero image is used.
- A single container is used on this page to show the current specials. This container displays the site's new or discounted items to help give the site a hook.
- Allauth's templates were used with Bootstrap 4's styling. This greatly simplified the programming process.
- Additional styling was added to give the templates a more unique look.
- A warm and inviting linear gradient was used for the background.
- Each merchandise item has its own card that helps it stand out from the background.
- A used and discount banner are added to merchandise with those tags. This helps users identify discounted books.
- Each card features general text, an image of the product, and a product rating which gives users all the necessary information at a glance.
- All merchandise information is limited to a maximum character count to keep cards brief.
- Each card is fitted with some superuser edit/delete options for ease of inventory management.
- A star rating feature allows users to see total ratings and the average rating of a product.
- A view that returns only discounted merchandise for the user to see in the same format as the merchandise view.
- A view that returns only used merchandise for the user to see in the same format as the merchandise view.
- A warm and inviting linear gradient was used for the background.
- A single card is featured here with its unabbreviated content.
- A used tag is added to any used merchandise.
- A discount tag is added to all merchandise that is being sold at a discounted value.
- Any item being sold at a discounted value shows both the old price and the new price.
- Each card is fitted with some superuser edit/delete options for ease of inventory management.
- A star rating feature allows users to see total ratings and the average rating of the product.
- If a user is logged they can rate products.
- With nothing in the cart, this view directs users back to the merchandise view.
- This view allows users to see each item, its quantity, and subtotal, before preceding to the checkout.
- A remove button is placed in the quantity column for users to easily remove an item from their cart.
- A pair of quantity adjustment buttons are in each merchandise item row for users to easily adjust the amount of a merchandise item they want.
- A update button is placed in the quantity column for users to easily update an item's quantity in their cart.
- This view calculates the totals of each merchandise item and the delivery fee into a grand total.
- This view calculates the totals of each merchandise item and the delivery fee into a grand total.
- A Crispy Form that users must fill in with basic shipping and payment information.
- If the user is signed in, the invoice form will be prepopulated from the users preferred shipping information located on their profile view.
- The Crispy Form will allow users to update their preferred shipping information when they submit an invoice.
- This view allows users to see their basic shipping information and all previous invoices.
- Two buttons located at the top of the form allow users to select if they want to view their shipping information, previous invoices, or both.
- Users can update their shipping information from the preferred shipping form on this view.
- The add_merch view (Merchandise Management) returns a blank merchandise model so a superuser can create a fully functional new merchandise item.
- The edit_merch view returns a prefilled merchandise model so a superuser can edit any field of the item.
- The delete button removes the merchandise item from the database without a secondary view.
- Each email has a custom appearance which includes the user's name, all their invoice information, and shipping address.
- Each confirmation email includes a customer support email on it.
- Curley brackets found on wireframes will detail JS or button function.
- Balsamiq was used for the planning process and wireframe creation.
- Wireframes were made for all predetermined size variations of the application.
- Click here to view all the wireframe images associated to this project.
- Click here to view all the wireframe files associated to this project.
- A fully functioning application can be found here, on Heroku.
- VSCode IDE was used for the programming process.
- GitHub houses the master branch.
- Music books for other instruments could be added to expand the ecommerce shop.
- The home page could have a second merchandise special container that features a single special. This special could be a captioned image, for a specific product, with a timer to help entice users to make an impulse purchase.
- Allow images to show an image modal when clicked.
- Add a warning modal for superusers when they click the delete merchandise button. This could stop accidental deletions.
- A counter that tells the user how many merchandise items are being displayed in the current search or on the current page.
- Add different ways of sorting displayed merchandise items. These could include: price, composer, etc....
- Add ability to calculate tax.
- Rating system:
- Change number rating to a star count. This would look better and remove the need for a text input.
- This system could have its numbers updated to use a standard 5 or 10 star system.
- Add a validation system to allow only those who have purchased a product to rate it.
- Change number rating to a star count. This would look better and remove the need for a text input.
- HTML - Skeleton frame of the application.
- CSS - Beautifies the skeleton (HTML).
- JavaScript - Allows for user interaction and dynamic function on the application.
- Python - Allows dynamic function and back end programs to run. These programs (frameworks, libraries, and databases) are:
- Django - Allows use of templating, security, and other critical functions.
- Allauth - An app that allows logging in, logging out, password recovery and more.
- Stripe - An app that allows users to securely pay online with credit cards.
- Postgres - A type of SQL server used to store information.
- Crispy Forms - Allows for forms to be easily, quickly, and neatly created and configured.
- Django - Allows use of templating, security, and other critical functions.
- AWS - A Server used to store static and media files.
- The Testing documentation can be found on TESTING.md.
- Roman numerals in names for merchandise items display inaccurately.
- Caused by:
- The use of Django's tag title
{% | title %}
.
- The use of Django's tag title
- Thought(s):
- If Django's title tag (
{% | title %}
) is removed from the name templating and superusers enter merchandise information in with 100% accuracy this could be avoided. - If a
text-transfrom: uppercase
css command is used, it would solve this problem but this solution creates an overall poorer user experience.
- If Django's title tag (
- Caused by:
- Checkbox on superuser/admin add/edit merchandise will not style border.
- Caused by:
- Unknown.
- Thought(s):
!important
was used to attempt to override any existing style, but this did not work. All the class styles were analyzed though from browser inspect and a problem could not be found.
- Caused by:
- On Safari browsers, the invoice view doesn't open to the correct responsive size.
- Caused by:
- Safari.
- Attempted fix(s):
- Various snippets of code from Stack Overflow.
- Thought(s):
- The problem seems to be a combination of having an HTML table in a responsive bootstrap design.
- Caused by:
- Scroll bar doesn't show up in the success toast on Safari browsers.
- Caused by:
- Safari.
- Attempted fix(s):
- Various snippets of code from Stack Overflow.
- Thought(s):
- May be caused by a setting in Safari.
- Caused by:
- Scroll bar doesn't show up in the success toast on Firefox browsers.
- Caused by:
- Firefox browser or missing vendor extensions.
- Attempted fix(s):
- None.
- Thought(s):
- The addition of
-webkit-
or-moz-
vendor extensions to the scroll bar styles could fix this issue.
- The addition of
- Caused by:
- Bootstrap's toasts do not show up on screen.
- Caused by:
- jQuery error.
- Fix:
- Wrote custom JS script to reveal any toasts.
- Caused by:
- An active link header was originally used to display the name of the item a user was viewing, however, some names proved to be too long.
- Caused by:
- Names longer than 15 characters.
- Fix:
- Removed the active link that showed users the name of the product they were on.
- Caused by:
- User search bar on the fixed header was askew from center.
- Caused by:
- Responsive design header that used Bootstrap's
col
and possibly other issues.
- Responsive design header that used Bootstrap's
- Fix:
- A combination of
display: flex
and left/right percent margins.
- A combination of
- Caused by:
- Favicon doesn't show up on all views.
- Caused by:
- Inability to push
MEDIA_URL
to all views for use.
- Inability to push
- Fix:
- Added
MEDIA_URL
to all views possible.
- Added
- Thought(s):
- Still does not display correctly on all views because of an inability to push
MEDIA_URL
to Allauth templates.
- Still does not display correctly on all views because of an inability to push
- Caused by:
- Create new account focuses on middle input when page opens.
- Caused by:
- Allauth.
- Thought(s):
- The focus could be changed with JS or locating where Allauth assigns focus.
- Caused by:
- Phone landscape view is limited.
- Caused by:
- App header and phone on-screen keyboard.
- Thought(s):
- JS could be used to allow the header to scroll out of view until it is needed.
- This could conflict with Bootstrap's and Jquery's function.
- This could be implemented on all mobile sized screens and would greatly increase the viewable real-estate.
- JS could be used to allow the header to scroll out of view until it is needed.
- Caused by:
- User rating's Rate Me! button will not submit after it has been clicked once.
- Caused by:
- JS validation designed to stop users from submitting multiple ratings at a single time.
- Thought(s):
- Back end logic prepared to handle multiple submissions would make this JS validation obsolete.
- Caused by:
- Go to the location of the original repository in GitHub, https://github.com/Richardaeld/Eldridge_Music.
- Click on the Code button to get the drop-down menu.
- Copy the HTTPS address provided.
- Create a new GitHub/GitPod project (to house the new clone) and then open this new project.
- Go to the Bash and type,
git clone <HTTPS>
, paste the HTTPS address found in the GitHub page (don't forget the space after "clone") and press enter. - A clone will be created within a new folder called "Eldridge_Music" (name of the original repository).
- Unpack everything from this new folder to the root of the GitPod project tree and the foundation of the project will be setup.
- Log into Heroku.
- Create a new app on Heroku by clicking New and following the directions.
- Log into Heroku.
- From the Personal Apps page, click on the new app that was just created in Heroku.
- Click on Deploy.
- Click on GitHub from Deployment Method section.
- Enter your GitHub information and the name of the cloned repository into the "Connect to GitHub" section.
- From your new apps base page, click on Resources.
- Click on Find More Add-Ons.
- Select Postgres.
- Finish setup.
- Automatic Deployment:
- Click on Deploy.
- Click on Enable Automatic Deploys in Automatic Deploys section.
- Click on Deploy Branch in Manual Deploy section to start initial deployment.
- Manual Deployment:
- Click on Deploy Branch in Manual Deploy section any time there is content you want to update the active app with.
- Go to Stripe.com and click Start Now.
- Create a new account.
- Click Developer tab.
- Click API Keys to find Publishable Key and Secret Key.
- Click Webhooks tab.
- click Add Endpoint and enter the new apps Heroku address with /invoice/wh/ at the end of the address.
- Stripe will now provide you with a Signing Secret Key.
- Go to aws.amazon.com.
- Create a new account.
- Log in and click, My Account and then AWS Management Console.
- Search for and select service S3.
- Click Create Bucket.
- Name the new bucket and uncheck Block All Public Access.
- Click Create Bucket.
- Configure bucket:
- Click on newly created bucket's name.
- Click on Properites tab.
- Click on Static Website Hosting.
- Click on Use This Bucket To Host A Website and fill out index/error document with default information and save.
- Click on Permissions tab.
- Click on CORS Configuration and paste in code CORES config.
- Click on Bucket Policy tab and then click Policy Generator.
- For Type of Policy select S3 Bucket Policy.
- For Principal enter
*
. - For Actions select GetObject.
- Enter the buckets ARN into this forms ARN input.
- Click Add Statement then Generate Policy and copy the policy generated.
- Paste this copied policy into the Bucket Policy.
- add a
/*
onto the end of the value of the key Resource.- Ex.
"Resource": "<bucket ARN>/*"
- Ex.
- Click save.
- Click Access Control List tab.
- Click on Public Access and set List Objects and save.
- Go to services menu and select IAM.
- Under Access Management click Groups and the Create A New Group.
- Enter a name, select Next Step twice, and then Create Group.
- Under Access Management click Policies and then Create Policy.
- Click JSON tab and then click Import Managed Policy.
- Search for S3, select AmazonS3FullAccess, and click Import.
- Replace the value of Resource with IAM JSON Resource.
- Click Review policy.
- Give the policy a name and description.
- Click Create policy.
- Under Access Management click Groups.
- Click recently created group and Attach Policy.
- Search for policy that was just created, select this policy, and click Attach Policy.
- Under Access Management click Users and then Add User.
- Create a name for user (add suffix '-staticfiles-user'), give them Programmatic access, and click Next.
- Put newly created user in IAM Group and keep clicking Next until user has been created in IAM Group.
- Download .csv and save this file. You will not be able to download it again.
- Log into a Gmail account.
- Go to Settings and click Accounts and Import.
- Under Change Account Settings click on Other Google Account Settings.
- Click on the Security tab, click on 2-Step Verification, and then Get Started.
- Verify your setting choice and turn on 2-Step Verification.
- Go back to Other Google Account Settings and click Security.
- Click on App Passwords.
- Select Mail for the app.
- Select Other for the device and enter Django.
- Gmail will provide you with an app password.
- Share
env.py
information with Heroku.- Click on Settings.
- Click on Reveal Config Vars from Config Vars section.
- Add all of the
env.py
key and value pairs without their quotations.- Ex. (key) == (value)
- Development == 0
- USE_AWS == True
- DATABASE_URL == (key provided from Postgres server)
- SECRET_KEY == (any Django secret key)
- STRIPE_PUBLIC_KEY == (provided by Stripe as Publishable key)
- STRIPE_SECRET_KEY == (provided by Stripe as Secret Key)
- STRIPE_WH_SECRET == (provided by Stripe as Webhook Signing Secret)
- AWS_ACCESS_KEY_ID == (provided by AWS .csv as Access Key Id)
- AWS_SECRET_ACCESS_KEY == (provided by AWS .csv as Secret Access Key)
- EMAIL_HOST_USER == (Gmail address return email will be sent from)
- EMAIL_HOST_PASS == (provided by email provider as As Password)
- Open the core django app.
- Open the settings.py file:
- Adobe Color Wheel
- Used to help pick color schemes.
- Amazon Web Services
- Used to store static and media files.
- Balsamiq
- Used to produce the wireframes.
- Bootstrap
- Used as framework.
- BrowserStack
- Used to check for compatibility errors.
- Django Secret Key Generator
- Used to create random secret key for Django.
- Font Awesome
- Imported icons are from here.
- GitHub
- Used for version control and deploys application information to Heroku.
- Google Fonts
- Imported font families found here.
- Heroku
- Site where application is deployed.
- Inkscape
- Used to create scalable vector graphics (SVG).
- Jigsaw (Validation Service)
- Used to identify errors in CSS.
- JSFiddle
- Used for tinkering and creating CSS art.
- JSHint
- Used to identify errors in JavaScript.
- JSON formatter
- Used to read long strings of JSON
- jQuery
- JS library used with Bootstrap.
- Lighthouse
- Used to check for performance, accessibility, best practices, and SEO.
- PEP8 online
- Used to identify errors in Python.
- Pingdom
- Used to check load time.
- Stripe
- Used to allow users to make payments with credit cards.
- Techsini
- Used for their viewable responsiveness PNG.
- TinyPNG
- Used to Minimize KB load per image.
- VSCode
- Integrated development environment used.
- W3C Validator
- Used to identify errors in markup.
- Allauth
- Used for all login, logout, and account management.
- Bootstrap
- A framework used to help speed up development and provide a better overall UX.
- MDN Web Docs
- Invaluable source of information about JavaScript, HTML, and CSS.
- Stack Overflow
- A great source of information to find a starting place for research.
- TestLodge
- Used to help formulate the test syntax structure.
- W3Schools
- Extremely helpful for explaining base HTML, CSS, and JavaScript principles.
- World Wide Web Consortium (W3C)
- Used to understand basic standardization practices for web-based apps.
- Django
- A through guide to this intricate frame work.
- Code Institute
- Code Institute's Boutique Ado for a great foundation to make a ecommerce site
- Emily Eldridge for help with revising the grammar and flow of this README document.
- Felipe Souza Alarcon for his suggestion of simplifying this project, his help, and guidance.
- JoGorska_5p for being a great tester.