bean-la / insheepsclothing Goto Github PK

Add the new sidebar feature

• Add a Wordpress taxonomy under Products for Format
• Remove text-based input for Format under Settings section of Product Edit screen
• Update Shop frontend to use new Format taxonomy instead of the previous text-based input

• Price typography: Body bold on desktop, and small body bold on mobile

• STORE needs to be centered on mobile

• Replace the + and - signs with the ones in design

• Reduce padding between product image and product artist to 8px (currently 20px)
  

• Reduce padding between product album and format information to 8px
  

• Reduce vertical padding between products from 20px (currently 40px)
  

• Text in Sort By dropdown should have 12px margin on left side

• Sort by dropdown right edge should right align to the arrow / product grid
  

• On mobile, the results and sort by dropdown need to be moved above the grid. On mobile, they do not need the container border. They should sit 12px above products and have 40px of space between itself and the JOIN THE RECORD CLUB button
  

• Mobile JOIN THE RECORD CLUB button should have this layout (should not be full width)
  

• Mobile PRE-ORDER button needs to over hang on the right the same distance as it is above
  

• Mobile: Price on product cards needs to be below all of the product information. Please refer to this screenshot for spacing of mobile cards
  

• Cart icons should be 20px wide, and cart quantity is ROM condensed size 24
  

• On mobile only, the Categories should be in a drawer as well, and the default state should be SHOP ALL when the user gets to the page.

• The number to indicate number of genres/formats selected, should be body bold

• The grey line underneath format and genre moves underneath all the categories in that section when it is expanded
  

• Backend: Create new Store Options settings page in Wordpress
• Backend: Add store filtering options for sidebar (Genre, Format)

Design in Figma

Note that when you click into a text element on Figma while in Dev Mode, you can view the Typography to the right. Example:

• SHOP text should be H1
• Change language from SHOP to STORE (my bad, sorry!)
• Missing the STORE header on mobile
• Results text should be Body Small
• "Format" and "Label" should be Body Small Bold
• Format and Label dynamic text should be Body Small
• "PRE-ORDER" should be size 14pt on desktop and Body Small on mobile

• On desktop, display 50 results and then have pagination

• On mobile, display 10 search results and then have pagination

• On the first page of results, this is indicated with a bold, and underlined number 1, and then only a right arrow is displayed.
  

• On the 2nd page of results and all thereafter, left and right arrows are displayed, and the currently viewed page is in the middle of the 3 numbers, and underlined / bold
  

Desktop Spacing

Mobile Spacing

Designs in Figma (make sure you are looking at the page "Approved Designs" linked here)

Desktop Filter Design

Mobile Filter Design

COLOR STYLES for both desktop / mobile

Desktop Typography

Mobile Typography

• Desktop Spacing (tip in case you don't know: if you switch on Dev Mode in Figma - you'll see all of these spacing notes in detail
  
  

• Mobile Spacing

FUNCTIONALITY

• When a user comes to the Shop page, all products are displayed in the results, as indicated by the SHOP ALL category highlighted in bold in the filter/category section.

• These Shop All results are sorted by Featured first, Newest, then Oldest
  
  

• The Genre filter should be customizable for the admin, as new genres may be added/removed regularly

• When a user clicks either Genre, or Format, the dropdown expands, the + icon transforms into a –

• User can select as many options as they want from the Genre and Format options. The square selectors next to the options fill black to indicate that they are active and a number in parenthesis updates next to the filter category to indicate how many total selections in that category are active
  

• The results automatically update as user selects / deselects filtering options

• In the Category filter (shop all, new this week, back in stock etc), user can only select ONE at a time.

• Active category selected is indicated by bold text
  

• On mobile, if the user collapses the category filter, the active category filter is shown
  

SORT BY FILTERING

• Default selection is to filter by Featured - which means that the results are ordered by most recently featured first, then newest then oldest
• Users can also then sort by Newest and Oldest from the dropdown
  desktop dropdown
  

• Mobile dropdown
  

Notes from Phil when it Monsterinsight stopped working

•MonsterInsights was working fine until we had to renew our license.
•I had to renew the license with a different account because the other one was created by an ex-employee.
•Once the license was renewed, MonsterInsights stopped working.
•I've tried to relaunch setup through the Wordpress Wizard, but I feel like it needs to be connected manually through code since most of our plugins are custom and not done through the Wordpress dashboard.

Current host is GoDaddy - doesn't offer modern development workflow tools using GitHub / etc.

Switching hosts can save ~50% of your monthly hosting fees, comparing the WPEngine pricing to GoDaddy.

I'm not sure if this logic will be implemented later and for the sake of functionality it just hasn't been accounted for yet, but we're going to display 50 search results per page on desktop, and then 10 for mobile.

• First page shows pagination like this where the number one is to the left side and bold. Only 3 pages are shown
  

• And then when you are on page 2 and onwards, it is centered and left arrow is visible
  

• Backend: Create new custom post type on Wordpress for "Product Lists" which allows user to select any number of internal products
• Frontend: On new shop page, create new section for Product Lists titled Categories which displays all published Product Lists
• Frontend: Add functionality to select any item from Categories and have the relevant products displayed accordingly

• Frontend: Create new Shop page
• Frontend: Add header with total results
• Frontend: Add top filtering dropdown
• Frontend: Add left sidebar, and 3-column grid layout for product listing
• Frontend: Add pagination
• Backend: Wire up logic for header results
• Backend: Wire up logic for sidebar
• Backend: Wire up logic for filtering dropdown
• Backend: Wire up logic for pagination

Designs in Figma

• Entire page has background HEX# F1F1F1
• There's a bar below that contains the header SHOP and search results number. The Sort By is on the right hand side.

• Desktop layout shows 3 columns of products. Tablet down shows 2 columns.

• Anatomy of the desktop product cards:
  

• Anatomy of mobile product cards:
  

• Products tagged as "Preorder" have a tag at the upper right hand corner. See below screenshot for placement and spacing. Text style desktop is Body Copy Small
  

Out of stock state

• Underneath the filters/categories, lives a button that links people to the Record Club page. ISC Admin has the ability to turn this button on and off at their discretion.

Desktop

Mobile

When the user is browsing through collections,features,shop, events etc their place is not saved when clicking on an item and then going back. User is automatically sent to the top/start of the page.

We are seeing products appear in search results through the public Shopify theme (which is themed to club.insheepsclothinghifi.com) How do we have it so that search results appear with the correct shop theme?

• Frontend: Add button to bottom of shop page sidebar
• Backend: Add a Wordpress setting for toggling the button on and off

• Show Out of Stock text instead of pricing for products with the Sold Out setting selected

• Show cart icon in header at all breakpoints

[] Backend: Create setting for pre-order on product edit screen
[] Frontend: Add floating tags / badges over product items on shop page where the Pre-order setting is checked

the screenshot below shows current state, with the setting missing: