Hi there, Step 2. The app will need to be hosted somewhere secure and be password locked so only users that we give the password to can access it.

Transcription

1 Hi there, The web app we need is a custom fulfillment and inventory management system. We have one line of product that is fulfilled outside of our normal shipping facility, and we need an online system that pulls in orders from our store, displays them as a big list, and allows them to be edited. We ve built a very rough draft of what we need here ( best viewed in Chrome, note: our draft is not actually integrated with our Shopify store and we need the app to integrate). Here s an outline of what we need our web app to do: 1) Integrate with our Shopify store via the Shopify API. More information on that can be found here ( 2) Be password locked. 3) Pull data from orders with a series of specific SKUs ONLY, and then organize them by date in a table displayed in list form, like shown in the draft above. Please note that the older orders are displayed at the top and the background color shifts from green to red depending on how old an order is. 4) Each order should have 6 extra fields and all the data should be editable so that we can change the details of an order in the app if necessary. This means that a) all the text data fields should be editable, b) there should be a Notes section next to each order. The data MUST autosave so that any edits to the data are saved and kept. Have the ability to manually add or delete orders from the system. 5) Have a way to sort the order by certain tags (like age or wood type) and the ability to display orders with certain tags (like showing only orders that are assigned to Cyrus, Alex, or Chris). 6) Title links that show certain kinds of orders 7) Have a few displays at the top that summarize certain pieces of data, like the total number of orders currently in the system. 8) Keep Track of Inventory Step 1. We would imagine integrating with Shopify is pretty straightforward. We know we need to generate an API key for you, which is easy. If you have not integrated with Shopify before with an app or their instructions do not seem clear to you, maybe this is not the right project for us to pursue together. Step 2. The app will need to be hosted somewhere secure and be password locked so only users that we give the password to can access it. Step 3. We need the app to only pull orders containing our wooden hooks, and then only display the wooden hooks in an order. If an order does not contain any wooden hooks, it should not be showed in the system. If an order contains one or more wooden hook, the wooden hooks should be shown in the system. If an order contains both wooden hooks and other products, ONLY the wooden hook(s) from the order should be shown in the system.

2 The app needs to pull data about the following for each hook: 1) Order # 2) Date of Order 3) Wood Type of the Hook 4) Size of the Hook The Wood Type and Size of an order should be used to create tags that correspond to an order s details. For example, if an hook order is Tulipwood 5mm, it should be given two tags, Tulipwood and 5mm H. Please note that on the demo at ( you can edit the Wood Type and Size fields of an order to other things. A user should be able to change the fields to one of our accepted tags, and then the tag name should be changed. For example, if an order has Woodtype Tulipwood, a user should be able to change it to Blackwood. If a user changes the name, it should also change the hook s tag from Tulipwood to Blackwood so that the tag always fits the current hook details. If the user tries to change the name to Blcakwood or any other misspelling or other word, the app should refuse to change the details because it is not one of our wood type tags. Similarly, if an order has Size 5mm - H, a user should be able to change it to 5.5mm - I. If a user changes the size, it should also change the hook s tag from 5mm - H to 5.5mm - I so that the tag always fits the current hook details. If the user tries to change the size to 75mm - JJ or any other misspelling or other word, the app should refuse to change the details because it is not one of our size tags. After data is imported, the app needs to display the hooks from oldest in age to youngest in age. We should allow 40 hooks on each page. We will also need the Import Orders button to manually import any ONLY new orders. The Import Orders button SHOULD NOT import any orders or hooks that are already in the database. The app should also display the background color of each table row as a different color depending on the age of the order. The hex values for each color and dates are below. Orders that are: 0 days 1 day: #61FF82 2 days 3 days: #58FD60 4 days 5 days: #66FB50 5 days 6 days: #7CF948 7 days 8 days: #95F741 9 days 10 days: #B0F days 12 days: #CDF days 14 days: #ECF12A 15 days 16 days: #EFD days 18 days: #EDAA1B 19 days 20 days: #EB8214

3 21 days 22 days: #E9580D 23 days 24 days: #E72C06 25 days 26 days: #BB days 28 days: #A6030E 29 days and up- #870D15 Step 4. Along with the data that each hook is pulled in with, each hook must also have these 7 extra fields. By default, all hooks should also be given 4 default tags, Not Made, Not Shipped, Not Received, and Not Archived. 1 Assigned- The assigned field is a text field that shows to whom an order is assigned. By default, the orders should be imported with the user tag Unassigned. When this field is edited and the hook is assigned to someone, it should add the tag that corresponds to that name. For example, if a user chooses Chris from the dropdown, the tag Chris should be added. Once an order is assigned to someone, it must be autosaved. If the user tries to change the name to Crhis or any other misspelling or other user name or other words, the app should refuse to change the details because it is not one of our user tags. 2 Made- The made field should be a checkbox that tells us whether or not a hook has been made yet. By default the hooks are not made, meaning the checkbox is unchecked. When the made box is checked, the default tag Not Made should be removed from the hook, and the tag Made should be added to the order so we can sort by orders with the tag Made. If this checkbox is unchecked after being checked, its current tag should be removed and its default tag should be added again. 3 Shipped- The shipped field is another checkbox field that tells us whether or not a hooks has been shipped. By default the hooks are not shipped, meaning the checkbox should be unchecked when orders are imported. When the shipped box is checked, t he default tag Not Shipped should be removed from the hook, and the tag Shipped should be added to the order so we can sort by orders with the tag Shipped. If this checkbox is unchecked after being checked, its current tag should be removed and its default tag should be added again. Once an order has both the Made and Shipped tags, it should not show on the home page and should only show on the Shipped page. 4 Received- The received field is another checkbox field that tells us whether or not we have received the hook after it was made. By default the hooks are not received, meaning the checkbox is unchecked. When the received box is checked, the default tag Not Received should be removed from the hook, and the tag Received should be added to the order so we can sort by orders with the tag Received. If this

4 checkbox is unchecked after being checked, its current tag should be removed and its default tag should be added again. Also, the Received checkbox should only be editable when an order has the Made and Shipped tags, so that we can only add the Received tags to orders that are already Made and Shipped. When a hook is tagged as received, the Archived checkbox (discussed in as field 6 below) should become editable. 5 Notes- The notes field is a text- area field that should be editable and have autosave so that we can add specific notes to an order. There is also a save button in the far right column (the actions column, #7, discussed below) for back up. Once someone types in notes and clicks save or by autosave the notes should stay in the note box. 6 Archive- The archive field is a checkbox which tells us if an hook has been made, shipped, received, and is archived. When the Archive checkbox is clicked, the default tag Not Archived should be removed from the hook, and the hook order should be tagged with the tag Archived. If this checkbox is unchecked after being checked, its current tag should be removed and its default tag should be added again. When a user clicks the archive button- the small box icon in the header cell of the Archive column- we need to create a PDF containing all the orders that are currently tagged as Archived. For example, if order #1235, #1235, and #1236 were all tagged as Archived and someone clicked the Archive button, the resulting PDF should look like this. (note: we are open to exporting other file formats, we just chose PDF. If it is easier to export to another file format, let us know).

5 Once the PDF has been generated, it should be stored as a file in the Archives page. All the orders that were just archived should then be deleted from the shipped page and should not appear in the system anymore. All orders that are not Archived SHOULD NOT be archived or added to the PDF, they should just stay where they are. 7 Actions- The actions column contains two icons, the Save icon and the Delete icon. The Save icon should force a save of everything on the page and refresh the page. Even though we need an autosave on all fields, this button is to force a save in case a user wants to be extra sure they ve saved something. The Deleted icon should delete an order line from the system. The Deleted icon should ONLY effect the row that it is on and not any others. In the header of the actions column is a Plus icon. The plus icon should allow users to manually add orders. A form should open with fields where a user can create a new hook order with its own order #, age, wood type, and hook size. When a user is done entering its info into the form and clicks create, a new row should be added to the list with all the details of the hook that was just created. As final notes about the data rows for each hook order, all fields must be editable and must have autosave on everything.

6 Step 5. At the top bar there is a search bar which we need to work to search orders by their age, their order number or order tags. For example, a user should be able to search for 1235 and find all hooks that have the order number Examples of search tags include Tulipwood, which is a wood type tag, 5mm H, which is size tag, Chris which is a user tag, and Made, Shipped, or Received, which are fulfillment tags. Here s a full list of our tags: Wood type tags Tulipwood Olivewood Blackwood Rosewood Bloodwood Cocobolo Purpleheart Size Tags 3.25mm - D 3.5mm - E 3.75mm - F 4.0mm - G 4.5mm G+ 5.0mm - H 5.5mm - I 6.0mm - J 6.5mm - K 7.0mm - L 8.0mm - M 9.0mm - N 10.0mm - P 13.0mm PP 15.0mm Q User Tags Unassigned Chris Alex Cyrus Fulfillments Tags Not Made Made Not Shipped Shipped Not Received

7 Received Not Archived Archived When a user searches for any of these tags, the system should display only hooks with the tags. In the future we may have more users, other wood types, and more sizes, so we will need someway to add more tags, even if this is just access to the original code files. Step 6. Around the top search bar are also 5 other title links. The title links should display certain hooks or perform certain actions depending on what they are. Home- The home page should be the default page. This page should show all hook orders that have not been archived or shipped and should paginate by 40 hook orders. When an order is made and shipped it has its Made AND Shipped checkboxes checked- meaning that the tags Not Made and Not Shipped are removed and the tags Made and Shipped are added- it should not show on the homepage and should only show in the Shipped page. Again, the homepage should display all orders except those with Made and Shipped tags. Shipped- This page should show all hook orders that have not been archived but have been shipped and should paginate by 40 hook orders. If an order has its Made and Shipped boxes unchecked, it should not show on the Shipped page any more and should return back to the Home page. When an order is made, shipped, and archived, it should be removed from the Shipped page and it should not show on the homepage. It will be added to a PDF and then displayed on the Archive page. Archives The archives should only show the PDFs that have been created and filled with archived orders. It should display them as text links that bring up the PDFs in a new page. Users You can see that if you click on the Users link it displays our 3 assigned users, Chris, Cyrus and Alex. If a user click on one of their names, we need the app to show only the orders that have been assigned to them. For example, if a user click on Chris the app should only show orders that have the Chris tag. Import Orders If a user clicks on the Import Orders button, it should manually bring in any new orders. The Import Orders button SHOULD NOT bring in any orders that are already in the system, only new ones.

8 Step 7. Under the title links are 3 blocks that show live information about our hooks. These 3 blocks should on every page. Total Hooks The total hooks block should display the total number of hooks that have not been shipped yet (i.e. the total number of hooks that have the Not Shipped tag). Hooks over 10 days This block should display the total number of hooks that have not been shipped yet that are more than 10 days old. Hooks over 20 days This block should display the total number of hooks that have not been shipped yet that are more than 20 days old. Step 8. We need an area to keep track of the inventory for each turner. You can see on the demo by clicking on Inventory that this is just a simple table that stores values for each wood type and each turner. We do not need this to sync with the rest of the app, it can be a stand- alone table that is editable. The inventory section should also have the ability to add Turners or Woodtypes (indicated by the small pluses on the table headers). If a Turner or Wood type is added, the new turner name or wood type name should be added as a tag so that users can search through orders for them. If a turner has been added, the new turner name should show up as a list item under the turners tab in the top navigation. Other notes: Our draft on Codepen should be used a rough template for the html and css. If you want to use that structure that s fine. We will need all files made available and editable to us so we can change the html, css, (we will definitely be making styling changes in the future) and add to any other code if necessary. If you have any questions during the creation process, please Harrison@furlscrochet.com as soon as possible. SKUs and Their Tags All of the SKUs we need importing from Shopify come from one product- our Alpha Series Wooden hooks. These products have two variants, wood type and size, that are denoted by two different SKUs. For example, if a customer orders a Tulipwood, 5.0mm hook, their order will have the SKU CHRFFCRO- TUL and the SKU All the SKUs and their associated variants/tags are below:

9 Wood Types: Tulipwood- CHRFFCRO- TUL Olivewood- CHRFFCRO- OLI Blackwood- CHRFFCRO- BLA Rosewood- CHRFFCRO- ROS Purpleheart- CHRFFCRO- PUR Bloodwood- CHRFFCRO- BLO Cocobolo- CHRFFCRO- COC Sizes: 3.25mm- 3.5mm- 4.0mm- 4.5mm- 5.0mm- 5.5mm- 6.0mm- 6.5mm- 7.0mm- 8.0mm- 9.0mm- 10.0mm- 13.0mm

10 15.0mm Because each hook contains two SKUs, the Shopify integration must find the Wood Type SKU and then the associated Size SKU to create the full hook details. Most of our orders contain more than one wooden hook and more than one product, so the integration must leave out all other products that are not wooden hooks AND it must put the proper wood type SKU and size SKU together so that the customer gets the hook they ordered. In some cases, our Shopify storefront will glitch and a customer checks out with ONLY a wooden type SKU (and no size) or ONLY a size SKU (and no wood). If they check out with only a wooden type SKU, the order should show up in the app, just with no size. This will prompt our team to inquire with the customer about what size they want. If a customer checks out with only a size SKU, or has one woodtype SKU and two size SKUs in their order, the app should only pull the woodtype and the size associated with the woodtype.