This document describes how one will integrate the Artifi Engine in Magento 2.4.0 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.0

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 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 default Magento 2 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 and Preview Link for personalized cart items.
4. Mini Cart : Added Edit Link (for editing personalized design) and and Preview Link for personalized cart items.
5. My Orders: On reordering orders which have personalized items, 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 personalized item from wishlist will result in personalized item reflected in cart

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

       10.Preview Personalized product

         Details: - Conditions are applied at template level so that wherever there is need to preview personalized product,                   magento initialize a call to artifi server with some basic details related to product like design id, website id so that 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 consist 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 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 below purposes
•      -Add custom option information to product.
•      -Product Validation for personalization requirements.
•      -Convert order item to quote item with 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 its need to setup Artification Js file through Magento Admin settings, provided by Artifi Labs along with web site id and web api client key, this helps Magento to talk with Artifi Engine.

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

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

As per the requirement, need to make calls on 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

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 or 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

If you are facing below error in Magento 2.3 then you can completely replace the new Artifi Magento Connector either replace the code from below modified file.

Edit personalized designed from the cart - Not working, getting some JS error (Cannot read property 'call' of undefined jquery validate).

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

           button.js - below are the modified code

_create: function() {

            abstractWidget.prototype._create.call(this);

            var addToCartForm = $(this.element).closest('form');

            this._subscribe(this.element, 'click', function (e) {

                var formData = {};

                if (addToCartForm.length) {

                    // var cartCheck used for checking cart page to avoid form validation

                    var cartCheck = $("#cart_page").attr("href");

                        if(cartCheck != "#cart"){

                            // Validate form data entry

                            if (!addToCartForm.valid()) {

                                return false;

                            }

                        }

                    formData = addToCartForm.serialize();

                }

                this._renderEditorHtml(formData, this._displayPopup.bind(this));

                return false;

            }.bind(this));

        },

      2..app\code\Artifi\Personalize\view\frontend\templates\cart\item\renderer\actions personalize.phtml