ScandiPWA
Create Magento AppCreate ScandiPWA AppUser ManualGitHub
  • Why Scandi
  • πŸš€Quick-start Guide
  • πŸ—ΊοΈRoadmap
  • Introduction to the Stack
    • CMA, CSA, and ScandiPWA
    • Challenges
  • Setting up Scandi
    • Storefront Mode Setup
      • Proxying requests to server
    • Magento Mode Setup
    • Existing Magento 2 setup
    • Magento Commerce Cloud setup
    • Updating to new releases
      • Storefront mode upgrade
      • Magento mode upgrade
      • CMA upgrade
      • CSA upgrade
      • Custom ScandiPWA composer dependency update
      • Local ScandiPWA Composer Package Setup
    • Docker Setup [deprecated]
      • Legacy Docker setup
      • Migrating to CMA & CSA
  • Developing with Scandi
    • Override Mechanism
      • Overriding JavaScript
        • Overriding classes
        • Overriding non-classes
      • Overriding Styles
      • Overriding the HTML / PHP
      • Parent Themes
    • Extensions
      • Creating an extension
      • Installing an extension
      • Migrating from 3.x to 4.x
      • Publishing an extension
      • Extension Terminology
    • Working With Magento
      • Magento troubleshooting
      • Working with Magento modules
      • Working with GraphQL
      • GraphQL Security
      • Working with "granular cache"
    • Developer Tools
      • Debugging in VSCode
      • ScandiPWA CLI
      • Configuring ESLint
      • CSA Commands
    • Deploying Your App
      • Build & Deploy Android app
      • Build & Deploy iOS app
  • Structure
    • Directory Structure
    • Building Blocks
      • Components
        • Styling Components
      • Routes
      • Redux Stores
      • GraphQL Queries
      • Global Styles
      • The Util Directory
      • Type Checking
    • Application assets
    • Code Style
      • JavaScript Code Style
      • SCSS Code Style
  • Tutorials
    • Customizing Your Theme
      • Styling
        • Customizing the Global Styles
        • Adding a New Font
        • Overriding a Components Styles
        • Extending a Component's Styles
      • Customizing JavaScript
        • Customizing the Footer Copyright
        • Adding a New Page
        • Adding a Section in My Account
        • Adding a Tab on the Product Page
        • Creating a New Redux Store
    • Payment Method Integration
      • Setting Up for Development
      • Redirecting to the Payment Provider
      • Handling the Customer's Return
    • Creating a Custom Widget
      • Scandi CMS System Overview
      • Creating a Magento Widget
      • Implementing the Rendering
    • Video Tutorials
      • #1 Setting up and talking theory
      • #2 Templating in React
      • #3 Overriding a file
      • #4 Styling the application
      • #5 Patterns of ScandiPWA
    • Dark Mode Extension
    • Deploying Native Apps
    • Product 3D Model Extension
      • Part 1: Magento 3D Model Uploads
      • Part 2: GraphQL API
      • Part 3: Scandi Frontend
    • Social Share, Full Extension Development
      • STEP-1 and 2 Creating Magento 2 Module
      • STEP-3 Backend Configurations Settings
      • STEP-4 Simple GraphQl and Resolver
      • STEP-5 Creating Extension, Base Redux Store
      • STEP-6 Extension plugins
      • STEP-7 GraphQL types, Helpers
      • STEP-8 Query Field and FieldList
      • STEP-9 render Plugins and MSTP Plugin, Component creation
      • STEP-10 SocialShare Component Development
      • STEP-11 SocialShare for CategoryPage
      • TASK-1 Changing LinkedIn to Twitter
      • STEP-12 Comments for Admin Users
      • STEP-13 Final, bugfixes
    • Accessing Magento 2 Controllers
      • STEP-1 Creating Magento 2 Module
      • STEP-2 - Create Magento 2 Frontend Route and Basic Controller
      • STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend
      • STEP-4 Creating ScandiPWA Extension with additional dependencies
      • STEP-5 Creating Plugin and Axios request
  • About
    • Support
    • Release notes
    • Technical Information
    • Data Analytics
    • Contributing
      • Installation from Fork
      • Repository structure
      • Code contribution process
      • Submitting an Issue
      • Publishing ScandiPWA
Powered by GitBook
On this page
  • Prerequisites
  • Creating a Module
  • Creating a New Table
  • Model & ResourceModel
  • Admin Panel Upload

Was this helpful?

  1. Tutorials
  2. Product 3D Model Extension

Part 1: Magento 3D Model Uploads

Adding 3D model upload functionality to the Magento Admin panel for products

PreviousProduct 3D Model ExtensionNextPart 2: GraphQL API

Last updated 3 years ago

Was this helpful?

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.

Prerequisites

This tutorial assumes you have an instance of Magento you can work with. We will be using the 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 .

Creating a Module

The first step is to 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 .

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.

Creating a New Table

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 :

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.

Model & ResourceModel

Now we have a table to store our 3D model data, but we would also like an easy way to work with this data.

Class

Purpose

A data class to represent a 3D model we can work with.

A collection of 3D models, so that we can fetch and work with multiple objects at the same time.

Admin Panel Upload

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.

Annoyingly, the word "model" has two different meanings in this context. A is a class that helps with accessing data in the database. A 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.

A responsible for loading & saving 3D models in the database

An implementation of the 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 , which configures a "3D Models" section in the product page on the fly. After configuring it in the , 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 and an observer that saves the upload files after the product has been saved.

create-magento-app (CMA)
developer documentation
create a Magento module
installing it as a composer local module
table in the db_schema.xml file
database model
3D model
product form UI Modifier
admin area etc.xml file
create
configure
Scandi\Product3DGraphQl\Model\Model3D
Scandi\Product3DGraphQl\Model\ResourceModel\Model3D
ResourceModel
Scandi\Product3DGraphQl\Model\ResourceModel\Model3D\Collection
Scandi\Product3DGraphQl\Model\Model3DRepository
Repository pattern