Advertisement
Guest User

Untitled

a guest
Mar 22nd, 2018
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.63 KB | None | 0 0
  1. Assuming product is a custom post type
  2.  
  3. CMS
  4. Each product will have a "Product Attribute" ACF Group
  5. -- One row per property (we would prefill the properties; i.e. "Capacity", "Power", etc)
  6. -- Label: Property (i.e. "Capacity")
  7. -- Field: Value (i.e. "41")
  8. Client will fill in rows as needed (empty rows will print with an –)
  9.  
  10. FRONTEND (Desktop)
  11. This will be a separate element than mobile
  12. This will be hidden at mobile via CSS
  13. Element will be solely one table
  14. Table head will print "Model", along with all properties from ACF Group
  15. Table body will contain a separate row for each Product. First column contains the Product's name. Following columns will print that Product's Property Value according to the Property Label listed in the table head at the top of the column
  16.  
  17. FRONTEND (Mobile)
  18. This will be a separate element than desktop
  19. This will be hidden at desktop via CSS
  20. Top element: a <select> input item with each Product as an <option>. Each option will have a data-attribute or similar method useable by JS to reference the corresponding Product Table below
  21. Bottom element: all Product Tables will print on page load, but be hidden (i.e. "display: none;"). Each table will have an ID or data-attribute like "product-{product-name}" that corresponds with the Product's <option> in the select above.
  22. Table will print each Property Name and Property Value side-by-side as a row
  23. When a user opens the <select> input and selects an option, Javascript will be used to hide the currently displayed Product Table through CSS, find the Product Table that matches that option's data-attribute, and show that table through CSS
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement