Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Assuming product is a custom post type
- CMS
- Each product will have a "Product Attribute" ACF Group
- -- One row per property (we would prefill the properties; i.e. "Capacity", "Power", etc)
- -- Label: Property (i.e. "Capacity")
- -- Field: Value (i.e. "41")
- Client will fill in rows as needed (empty rows will print with an –)
- FRONTEND (Desktop)
- This will be a separate element than mobile
- This will be hidden at mobile via CSS
- Element will be solely one table
- Table head will print "Model", along with all properties from ACF Group
- 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
- FRONTEND (Mobile)
- This will be a separate element than desktop
- This will be hidden at desktop via CSS
- 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
- 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.
- Table will print each Property Name and Property Value side-by-side as a row
- 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