Collection page review (June 2021)

[dhmacs]

Here's a review of the collection page status:

inkOfPixel todos

• Add search functionalities of parts collection page #11
• Improve filtering and browsing product experience #33
• Add "Documents" section into collection page [SOMEDAY MAYBE] #28
• Add product list subnavigation #8 [BLOCKED]
• Implement sorting into Algolia hooks #13
• Add "Popular Fix kits" section into parts collection page #29

Blocked on iFixit

• Improve collection data fetching #31
• Intermediate collection page content #32
• Implement tools collection page #26
• Add "Schematics" section into collection page #15
• Add "Related News Stories" section into collection page #14
• Wide aspect images on collection pages #16
• Collection descriptions don't match the collection #34

[kwiens]

Wikis API has documents: https://www.ifixit.com/api/2.0/doc/Wikis#content

Schematics are not in the API but will be.

[evannoronha]

Schematics are not in the API but will be.

I'm not sure what you mean by this, but Schematics are currently served by the API. They are just not documented. The endpoint is available to the public: https://www.ifixit.com/api/2.0/diagrams/418

[kwiens]

Sweet! How do you get a list of diagrams for a device?

[evannoronha]

Sweet! How do you get a list of diagrams for a device?

CR this pull to find out: https://github.com/iFixit/ifixit/pull/38255

[dhmacs]

Sweet! How do you get a list of diagrams for a device?

CR this pull to find out: https://github.com/iFixit/ifixit/pull/38255

Hi @evannoronha, I don't have access to this repo. Can you give me instructions on how to use this endpoint?

[evannoronha]

Sure thing! As of right now, I don't think you'll get much use out of it because the set of devices for which we have schematics and parts to sell may be empty.

Regardless, here's the basics. We can break this discussion into two bits: data and rendering

Data

Some of our device pages have schematics on them. For example:
https://www.ifixit.com/Device/Makita_Chain_Saw_EA6100PR_2017
https://www.ifixit.com/Device/Toro_Stump_Grinder_22615HD_2018
https://www.ifixit.com/Device/Dewalt_Impact_Wrench_DCF899HB_2016

On ifixit, we also can link to a specific diagram:
https://www.ifixit.com/Device/Makita_Chain_Saw_EA6100PR_2017#diagram/16072

Schematics are comprised of 0-n diagrams and an additional list of parts not associated with a diagram. They are represented by the diagrams field on the API endpoint for devices:
https://www.ifixit.com/api/2.0/wikis/CATEGORY/Barreto_Trencher_E718MTH4S_2016
https://www.ifixit.com/api/2.0/wikis/CATEGORY/Makita_Chain_Saw_EA6100PR_2017

That endpoint should give you enough information to render a summary view of a schematic:

Each diagram contains an image and a set of data points that indicate what each component on the diagram is. You can fetch all this information about a diagram from the diagrams endpoint:
https://www.ifixit.com/api/2.0/diagrams/16072

The diagram endpoint returns JSON that looks like this:

That should give you enough information to render a full diagram view:
https://www.ifixit.com/Device/Makita_Chain_Saw_EA6100PR_2017#diagram/16072

The data field on the digrams endpoint represents the coordinates on the image. Each coordinate has an X-Y location and radius which represents where the data point is on the image. There can also be 1 or more items on the data point. An item represents a physical part that goes in a device, like a battery, belt, bolt, wheel, screen, etc. Generally, those are the things we sell. Every item on a diagram has a corresponding Item wiki (https://www.ifixit.com/Item/Makita_Suction_Head_Dpc7001_010114010):

Rendering

Okay, so we have all this great structured data that represents what parts go in which devices. How do we display it all?

We built a custom diagram viewer to address this solution. We've been wanting to open source it for a couple months, however the issue to actually make that component available has not been prioritized. We can look at getting that done soon. CC @jarstelfox @MilesRobinson

[dhmacs]

Sure thing! As of right now, I don't think you'll get much use out of it because the set of devices for which we have schematics and parts to sell may be empty.

Ok then I'll pause this task until we figure out the data side.

On ifixit, we also can link to a specific diagram:
https://www.ifixit.com/Device/Makita_Chain_Saw_EA6100PR_2017#diagram/16072

Oh wow, this is really cool! 💯 I like the idea, it looks like a great shopping experience too 👍