The Artifi plug-in is functional up to Magento version 2.4.4. Please contact our support team for guidance to upgrades or support beyond this version.

Disclaimer: Upgrading Artifi on your production environment without proper testing and support can be risky. To avoid any unforeseen issues, please try on non-production environment before upgrading directly on production.

This document describes how one will integrate the Artifi Engine into Magento 2.4.4 website. We assume that the customer has a Magento website ready and has the Artifi-Magento Module.

The first section ONE TIME INSTALLATION OF PERSONALIZE MODULE will walk you through the steps required for setting up the module in the Magento server.

The second section ADMINISTRATION AND PRODUCT SETUP tells you the steps required for linking a product with Artifi Engine.

And the last section MODULE FUNCTIONALITY IMPACT IN MAGENTO covers the impact or changes one will observe for Artifi products in the website, cart, and admin panel.

Magento Versions Used For Testing

• Community 2.4.4

Supported Magento Product Types

• Simple
• Configurable

Point to Consider

This module overrides the following views, so if any other Magento module is also trying to override any of these views then you may have to fix the conflicts between the two modules manually. Those views are:

• Product Listing/Category Page
• Product Detail Page
• Shopping Cart Page
• Checkout Success Page
• Admin Panel - Order Page
• Wishlist
• Mini Cart
• Order Details
• Search Results
• Customer - My Account Page
• Product Compare Page

TECHNICAL SPECIFICATION

For integrating Artifi with Magento, we have created Artifi Magento Module.

Module reflections within the default Magento 2.4.4 setup:

1. Product List / Search Result / Category Page: Added Personalize button for personalizable products depending on product personalization settings.
2. Product Detail Page: Added Personalize button for personalizable products depending on product personalization settings.
3. Shopping Cart: Added Edit Link (for editing personalized design) and Preview Link for personalized cart items.
4. Mini Cart: Added Edit Link (for editing personalized design) and Preview Link for personalized cart items.
5. My Orders: On reordering orders which have personalized items, the new design will be generated for the reordered cart items.
6. Order Detail Page: Preview link added for personalized order items.
7. Compare Products: Added Personalize button for personalizable products depending on product personalization settings.
8. Wish list :

          -Preview Link for personalized items.

          -Adding a personalized item from the wishlist will result in a personalized item reflected in the cart

        9. Personalization Popup: Popup appears with the click on personalize button. Here customization/personalization will take place using the Artifi engine. The initial call is set within this template where Magento calls/requests product personalization to the Artifi server. After customization is done, all product information is collected from the Artifi engine and added as product or quote item options to the ordered product item. The design information is saved to the artifi_personalize_design database table also. The same applies when any Personalized product is in the Edit state.

       10. Preview Personalized product

         Details: - Conditions are applied at the template level so that wherever there is a need to preview a personalized product, Magento initializes a call to the Artifi server with some basic details related to the product like design id, and website id so that the Artifi engine will identify product and will provide the product preview for the same.

ARTIFI_PERSONALIZE MODULE

All technical specifications are listed below:

App/code/Artifi/Personalize consists of custom module files.

• Api - Contains any PHP classes exposed to the API.
• Block - Contains PHP view classes as part of Model View Controller(MVC) vertical implementation of module logic.
• Controller - Contains PHP controller classes as part of MVC vertical implementation of module logic. Controllers added by the module are for Add, Edit Cart Item, Invoking Personalization Editor Etc.
• CustomerData - Contains LastOrderedItems class overriding default Magento class.
• etc - Contains configuration files.
• Helper - Contains Helper classes.
• Model - Contains PHP model classes as part of MVC vertical implementation of module logic.
• Observer - Contains all observer classes. There are three event observers added by the module on below three events. These are added to sync design id with order item or wishlist item.
•        -Checkout_cart_product_update_after
•        -Wishlist_product_add_after
•        -checkout_cart_product_add_after
• Plugin - Contains any needed plug-ins. For Ex. for the below purposes
•      -Add custom option information to the product.
•      -Product Validation for personalization requirements.
•      -Convert order item to quote item by modifying its design data
• Setup - Contains classes for module database structure and data setup which are invoked when installing or upgrading.
• View - Contains view files, including static view files, design templates, email templates, and layout files.
• registration.php - Module registration file.

ARTIFI_PERSONALIZE_DESIGN - DATABASE TABLE FOR ARTIFI MODULE

Field Name	Field Descriptions
design_id	Design id
design_params	Design parameters
preview_urls	Preview URLs
thumbnail_urls	Thumbnail URLs
wishlist_item_id	Related wishlist item id

SYNCHRONIZATION BETWEEN ARTIFI ENGINE AND MAGENTO

As it needs to set up the Artification Js file through Magento Admin settings, provided by Artifi Labs along with website id and web API client key, this helps Magento to talk with Artifi Engine.

The Artifi module includes the Artifi js file and is thus able to make direct calls to Artifi Engine.

Through each call to the Artifi engine, Magento sends some parameters to Artifi Engine by which Artifi Engine precedes its functionality and sends data back to Magento accordingly.

As per the requirement, need to make calls on the following states to Artifi Engine through Magento:

1. Personalization
2. Editing Personalized product
3. Preview personalized product
4. Update product details after checkout

Product Personalization Call

The initial call to personalize any product through Artifi Engine:

Artifi.Initialize(productCode, websiteId, userId, divId, webApiclientKey, isGuest, width, height, designId, sku, extraQueryString, cartQueryString)wd

• sku_call – product sku ( in case of configurable product, its configurable product’s sku)
• website_id – website id set from Admin settings provided by Artifi engine
• userId_call – User / customer Id (in case of guest, guest session id)
• flag_call – true / false (Guest / Not a Guest)
• containerId – Id for container (div) where Artifi Product will be load.
• designId_call – design Id (if personalized product is in editing mode)
• webApiclientKey – web api client key set from Admin settings provided by Artifi engine.
• child_sku – child’s product’s sku (in case of configurable product)
• height – Height of Container
• width – Width of container

Product Preview Call

Call to preview personalized product:

Artifi.PreviewPopUp(productCode, websiteId, userId, isGuest, width, height, designId, sku, webApiclientKey, extraQueryString, cartQueryString)

Parameters, same as mentioned in Artifi.Initialize call.

Checkout Success Call

On checkout success for any order :

Artifi.UpdateMultipleCustomizedProductOrderStatus(customizedProductIds, websiteId, successCallback, errorCallback)

• customizedProductIds – All Artifi products designs related to successful order placed.
• websiteId - website id set from Admin settings provided by Artifi engine
• successCallback – success callback from Artifi engine
• errorCallback – error callback from Artifi engine

Update customer/user id to Artifi engine

Artifi.UpdateUserId(newUserId, oldUserId, IsGuest, websiteId, successCallback, errorCallback)

• newUserId – New user id to update
• oldUserId – Old user id which was used to replace
• IsGuest – true or false (is guest / not a guest)
• websiteId - website id set from Admin settings provided by Artifi engine
• successCallback – success callback from Artifi engine
• errorCallback – error callback from Artifi engine

Modified Files

While checking the compatibility of the Artifi_Magento_2.4.0 with the latest version of Magento 2.4.4. We have found an issue with the reorder from the customer account and a redirect issue while updating the design from the cart.

Reorder & Redirect Issue

Reorder from the customer account - This is found while we have successfully placed a personalized order in Magento. After login into the customer account, reorders were redirected to the cart page with empty data. The expected result was the old personalized data should get added to the cart.

Redirect issue - When we added a personalized design to the cart and tried to update the design from the cart page the page was not redirecting.

To resolve the issue we have modified the below files and added a screenshot for your reference.

\app\code\Artifi\Personalize\etc\di.xml

\app\code\Artifi\Personalize\Block\Cart\Item\Renderer\Actions\Generic.php

\app\code\Artifi\Personalize\view\adminhtml\web\js\section-config.js

\app\code\Artifi\Personalize\view\frontend\web\js\editor.js

\code\Artifi\Personalize\Block\Customer\Wishlist\Item\Column\Preview.php