Part 1: Magento 3D Model Uploads
Before we can display any 3D models on the frontend, we need the backend to be able to store these 3D models, and the administrator to manage them. Since this functionality is not provided in Magento by default, we will be creating a custom Magento module to implement this.
This part of the tutorial is intended to be a quick run-through of the Magento module. We will not go too much in-depth, as the primary focus of this tutorial is on Scandi, which we will cover in Parts 2 and 3.
This tutorial assumes you have an instance of Magento you can work with. We will be using the create-magento-app (CMA) scripts for simplicity, but you can use any other setup – though you might need to adapt your workflow in that case, so we suggest to use CMA unless you know what you're doing.
It is desirable to have a basic understanding of how Magento works, especially it's common design patterns and concepts such as dependency injection. If you get lost, you can consult the developer documentation.
The first step is to create a Magento module where we can define our functionality in. You can either initialize it in app/code, or symlink a directory anywhere in your file-system, by installing it as a composer local module.
Since all the backend functionality is exposed to Scandi through GraphQL, the convention is to name these backend modules with the -graph-ql postfix; hence we name our module product-3d-graph-ql. However, note that our module will include some additional functionality, such as the admin panel configuration.
We want to be able to store multiple 3D models for each product, so we need a table to store this data. We can declaratively specify this table in the db_schema.xml file:
product-3d-graph-ql/etc/db_schema.xml<?xml version="1.0"?><schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd"><table name="scandi_product_3d_model" resource="default" engine="innodb"comment="3D models associated with products"><column xsi:type="int" name="id" unsigned="true" nullable="false" identity="true"comment="ID"/><column xsi:type="int" name="product_id" unsigned="true" nullable="false"/><column xsi:type="text" name="url"/><column xsi:type="text" name="file"/><constraint xsi:type="primary" referenceId="PRIMARY"><column name="id"/></constraint><index referenceId="MODEL3D_PRODUCT_ID" indexType="btree"><column name="product_id"/></index></table></schema>
Here, we define a new table called scandi_product_3d_model, which has 4 columns. Each row has its own ID as well as a product ID that we will use to associate each 3D model with a product. In addition, the file column will be used for storing the original filename, and url will specify the location where this model is currently stored.
Now we have a table to store our 3D model data, but we would also like an easy way to work with this data.
Annoyingly, the word "model" has two different meanings in this context. A database model is a class that helps with accessing data in the database. A 3D model is a computer representation of a three-dimensional object. To avoid confusion, we will always refer to 3D models by prefixing "3D". All other uses of "model" refer to the database model.
Class | Purpose |
A data class to represent a 3D model we can work with. | |
A ResourceModel responsible for loading & saving 3D models in the database | |
Scandi\Product3DGraphQl\Model\ResourceModel\Model3D\Collection | A collection of 3D models, so that we can fetch and work with multiple objects at the same time. |
An implementation of the Repository pattern for 3D models |
We want the admin to be able to upload new models for each product. This is a bit tricky, since Magento offers no easy way to add file upload attributes to products. However, we can work around this by creating a product form UI Modifier, which configures a "3D Models" section in the product page on the fly. After configuring it in the admin area etc.xml file, the 3D Models sections is visible in the admin panel.
However, our custom UI modification does not currently handle saving the file uploads. For this, we need to create and configure an observer that saves the upload files after the product has been saved.
Now, the Magento admin panel configuration is implemented! The user is able to upload and remove 3D Models. Next, we will implement displaying these models in Scandi.
