Magento 2.3.7

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

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

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.

IMPORTANT NOTES

Magento Versions Used For Testing:

Community 2.3.7

Supported Magento Product Types

Simple
Configurable

Points 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 setup:

Product List / Search Result / Category Page: Added Personalize button for personalizable products depending on product personalization settings.
Product Detail Page: Added Personalize button for personalizable products depending on product personalization settings.
Shopping Cart: Added Edit Link (for editing personalized design) and and Preview Link for personalized cart items.
Mini Cart: Added Edit Link (for editing personalized design) and and Preview Link for personalized cart items.
My Orders: On reordering orders which have personalized items, new design will be generated for the reordered cart items.
Order Detail Page: Preview link added for personalized order items.
Compare Products: Added Personalize button for personalizable products depending on product personalization settings.
Wish list:
- Preview Link for personalized items.
- Adding personalized item from wishlist will result in personalized item reflected in cart
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.
Preview Personalized Product: 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.

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 the 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:

Personalization
Editing Personalized product
Preview personalized product
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

Where,

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 engineuserId_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 Containerwidth – 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)

Where,

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 / UserID to Artifi engine

Artifi.UpdateUserId(newUserId, oldUserId, IsGuest, websiteId, successCallback, errorCallback)
Where,
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.7 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).

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));

        },



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