Skip to content

Instantly share code, notes, and snippets.

@iamskok

iamskok/gist:47149a1a4f2914646931ebb05dde6c95

Last active September 7, 2020 13:18
Show Gist options
  • Save iamskok/47149a1a4f2914646931ebb05dde6c95 to your computer and use it in GitHub Desktop.
Save iamskok/47149a1a4f2914646931ebb05dde6c95 to your computer and use it in GitHub Desktop.
Download ZIP
New Dev Sandbox
Raw
gistfile1.txt
# DEV Sandbox
## Objective
Learn Shopify and practice JavaScript by following BVA styleguide.
Some designs might be simplified along the way.
## Links
### Git
- [Repo](https://github.com/bvaccel/dev-sandbox)
- [Testing branch](https://github.com/BVAccel/dev-sandbox/tree/testing-vlad)
### Shopify
- [Shopify store](https://new-dev-sandbox.myshopify.com)
- [Shopify theme](https://new-dev-sandbox.myshopify.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=44685623347)
- [Old Shopify theme(gulp)](https://new-dev-sandbox.myshopify.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=40014282803)
### Designs
- Homepage design
- [mobile](https://projects.invisionapp.com/d/main#/console/12756912/267224650/inspect)
- [desktop](https://projects.invisionapp.com/d/main#/console/12756912/267224649/inspect)
- Collections design
- [mobile](https://projects.invisionapp.com/d/main#/console/12756912/267513179/inspect)
- [desktop](https://projects.invisionapp.com/d/main#/console/12756912/267513180/inspect)
- Inline cart design
- [mobile](https://projects.invisionapp.com/d/main#/console/12756912/268550171/)
- [desktop](https://projects.invisionapp.com/d/main#/console/12756912/268550169/inspect)
### Asana
- [Asana main task (used time tracking)](https://app.asana.com/0/1118740324426411/1118719133271260)
- [Asana collections](https://app.asana.com/0/1118740324426411/1118722627102835)
- [Asana inline cart](https://app.asana.com/0/1118740324426411/1118722521568323)
- [Asana homepage](https://app.asana.com/0/1118740324426411/1118722347137883)
## Time estimate
### Homepage
- Promo bar (theme settings + styles) [5h]
- Header [15h]
- styles [4]
- js [4]
- main nav (linklist) [2h]
- extra nav [5h]
- nav list (linklist) [2h]
- search [3h]
- Slider [11h]
- Loop over collection's product images [3h]
- Javascript [4h]
- Styles [4]
- Popular Products [7h]
- Loop over popular collection product images [3h]
- styles [4h]
- Footer [12h]
- styles [3h]
- main nav (Linklist) [2h]
- extra nav [7h]
- sign up form [3h]
- social media (theme settings) [4h]
- QA 10%
- Padding 20%
Total: 65 hours
### Collections
- Navbar [11]
- Filter [12h]
- styles [3h]
- js [2h]
- markup [1h]
- Sort [5h]
- styles [1h]
- js [3h]
- markup (hardcoded) [1h]
- Awesome photos (section) [12h]
- styles [3h]
- markup (section) [3h]
- js [6h]
- Pagination [8h]
- markup [6h]
- styles [2h]
- Cards [16h]
- markup (loop over product color values) [6h]
- styles [6h]
- js [4h]
- QA 10%
- Padding 20%
Total: 62 hours
### Inline cart
- Markup [4h]
- header
- header button
- title
- card
- collapse container
- quantity component
- remove from cart
- checkout
- paypal checkout
- Styles [8h]
- JavaScript [16h]
- QA 10%
- Padding 20%
Total: 36hours
### Research [5h]
**Total: 174 hours**
@dlerm
Copy link

dlerm commented Aug 30, 2019 •
edited
Loading

@iamskok

  1. If you want to use slate, you will need to start all new branches. To do so, you should clone the blank-slate repo and set your .ENV to point to the dev sandbox store.

  2. Do not use Thrive's store, you need to build all sections and products yourself (or use a few of the basic ones in the demo shop).

  3. Ignore the elements of these designs where mobile and desktop re-order themselves. For mobile, just stack things and get as close to the design as possible.

  4. Header search should use a form that leads to Shopify search page (no need to build this page, just have the form redirect the user with the query attached to the url - method:GET).

  5. Footer signup form does not need to have any real functionality, just styles and semantic markup.

  6. Collection filters component will utilize Shopify's built-in product tag filtering. No need to use JS for most of this.

  7. Collections sorting will use Shopify built in URL param sorting feature. Slight JS involved.

  8. Collection pagination will use Shopify's built-in pagination tags.

@iamskok
Copy link
Author

iamskok commented Sep 6, 2019

DEV Sandbox

Objective

Learn Shopify and practice JavaScript by following BVA styleguide.
Some designs might be simplified along the way.

Links

Git

Shopify

Designs

Asana

Time estimate

Homepage

  • Promo bar (theme settings + styles) [5h]
  • Header [15h]
    • styles [4]
    • js [4]
    • main nav (linklist) [2h]
    • extra nav [5h]
      • nav list (linklist) [2h]
      • search [3h]
  • Slider [11h]
    • Loop over collection's product images [3h]
    • Javascript [4h]
    • Styles [4]
  • Popular Products [7h]
    • Loop over popular collection product images [3h]
    • styles [4h]
  • Footer [12h]
    • styles [3h]
    • main nav (Linklist) [2h]
    • extra nav [7h]
      • sign up form [3h]
      • social media (theme settings) [4h]
  • QA 10%
  • Padding 20%

Total: 65 hours

Collections

  • Navbar [17]
    • Filter [12h]
      • styles [3h]
      • js [8h]
      • markup [1h]
    • Sort [5h]
      • styles [1h]
      • js [3h]
      • markup (hardcoded) [1h]
  • Awesome photos (section) [12h]
    • styles [3h]
    • markup (section) [3h]
    • js [6h]
  • Pagination [8h]
    • markup [6h]
    • styles [2h]
  • Cards [16h]
    • markup (loop over product color values) [6h]
    • styles [6h]
    • js [4h]
  • QA 10%
  • Padding 20%

Total: 68 hours

Inline cart

  • Markup [4h]
    • header
      • header button
    • title
    • card
    • collapse container
    • quantity component
    • remove from cart
    • checkout
    • paypal checkout
  • Styles [8h]
  • JavaScript [16h]
  • QA 10%
  • Padding 20%

Total: 36hours

Research [5h]

Total: 174 hours

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment