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

  • 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 NameField Descriptions
design_idDesign id
design_paramsDesign parameters
preview_urlsPreview urls
thumbnail_urlsThumbnail urls
wishlist_item_idRelated 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


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.