4.1 Controllers Description

Controller	Description	Reason for Extending/Creation
1. Order.js	Handles order-related functionalities. Extends the base order controller.	To call a custom hook (app.artifi.order.status) to update the status of customized products and to log errors if the hook fails.
2. Personalize.js	Manages product personalization features.	To render a custom ISML template (personalize/iFramePersonalization) for product customization and to handle reorder functionality by validating the logged-in user and fetching order details.
3. Cart.js	Deals with cart-related operations. Extends the base cart controller.	To clear the cart and remove product line items while handling custom attributes related to product design, and to call a custom service (deleteAPIService) to delete design data when a product line item is removed.
4. Account.js	Manages user account-related functionalities. Extends the base account controller.	To update user IDs during registration and login by calling a custom helper (artifiHelper) and to log errors if the user ID update process fails.
5. Product.js	Handles product-related operations. Extends the base product controller.	To render custom HTML for product personalization based on product attributes, and to handle product variations and include custom attributes for personalized products.
6. CheckoutServices.js	Manages checkout-related services. Extends the base checkout services controller.	To update user IDs during customer login by calling a custom helper (artifiHelper) and to log errors if the user ID update process fails.

Summary (Controllers): The primary reason for extending the base controllers in this SFCC B2C integration cartridge is to incorporate custom logic specific to the Artifi integration. This includes handling product personalization, updating user IDs, managing custom attributes, and ensuring seamless integration with the Artifi services.

4.2 Helper Files Description

Helper File	Description	Reason for Creation/Extending
1. cartHelpers.js	Contains functions for cart operations (adding products, handling customization, managing quantities).	To handle the addition of customized products with specific attributes, manage product quantities, and integrate custom logic for product customization details.
2. artifiHelpers.js	Manages the updating of user IDs on the Artifi side and handles reorder functionality.	To provide a centralized function for updating user IDs during registration/login, log errors, and integrate with the Artifi API. Also, to facilitate the reorder process by creating new product line items and managing customized product details.

Summary (Helper Files): The primary reason for creating these helper files is to encapsulate custom logic specific to the Artifi integration, ensuring efficient management of cart operations, user ID synchronization, and reorder functionality, all integrated with standard SFCC processes.

4.3 Services Description

The artifiApi.js file contains multiple service definitions using LocalServiceRegistry.createService to interact with the Artifi API.

Service Name	Description	Reason for Creation	Common Functions
1. UpdateOrder	Updates the status of multiple customized product orders to "Placed" in Artifi.	To ensure the status of customized product orders is updated correctly in the Artifi system after SFCC order placement.	createRequest,  parseResponse
2. deleteAPIService	Handles the deletion of resources or data in the Artifi system.	To maintain data consistency when resources are deleted in SFCC (e.g., removing a line item).	createRequest,  parseResponse
3. reorderAPIService	Handles product reordering specifically for the iframe approach.	To facilitate reordering for iframe products, ensuring customization details are preserved.	createRequest,  parseResponse
4. componentReorderAPIService	Handles product reordering specifically for the component approach.	To facilitate reordering for component products, ensuring customization details are preserved.	createRequest,  parseResponse
5. updateUserId	Updates the user ID in the Artifi system.	To synchronize user ID changes between SFCC and Artifi for consistent user information.	createRequest, parseResponse

Summary (Services): These services are essential for facilitating reliable and consistent communication with the Artifi API, handling specific operations like order status updates, data synchronization, and product reordering.

4.4 Custom Templates

Template	Purpose	Reason for Creation
1. deleteAllProduct.isml	Renders a button or interface element to delete all products from the cart or wishlist.	To provide a quick and convenient way for users to clear their cart/wishlist, enhancing the user experience.
2. iframePersonalization.isml	Embeds personalized content within an iframe on a webpage.	To integrate third-party personalization services (Artifi) and isolate personalized content for security/performance.
3. component.isml	A generic component template to render reusable UI components.	To promote code reuse, maintainability, and standardize the look and feel of UI elements.
4. iframe.isml	Adds the Guest user Input UI (e.g., email address) before clicking the Personalization button.	To make guest user email input mandatory or conditionally display it based on session data.
5. personalizationType.isml	Renders different types of personalized content based on the selected approach (Iframe or component).	To dynamically display content tailored to the configured personalization type.
6. ReorderButton.isml	Renders a "Reorder" button.	To provide a convenient way for logged-in users to reorder past purchases, increasing customer retention and repeat purchases.
7. CartRemoveAllProductModal.isml	Remove All Product From The Cart	To provide a quick and convenient way for users to remove all their cart items, enhancing the user experience.

Conclusion (Templates): These ISML templates enhance the platform's functionality and user experience by supporting personalization, modularity, and user convenience.

Base Cartridges Template Modification In Artifi Cartridge

1. cart.isml
Purpose: This code adds custom cart styling and personalization JavaScript, displays a “Delete All” option with a confirmation modal.
UI Appearances

Code Modification Compare To Base Cartridges

2. cartProductCard.isml
Purpose: This update replaces the default product image block with logic that displays a customizable product image and provides appropriate redirect links (iframe, component, or normal PDP) based on the item’s personalization approach type.
UI Appearances

Code Modification Compare To Base Cartridges

3. cartProductCardEdit.isml
Purpose: This update replaces the default “Edit Item” link with dynamic personalization edit links that redirect to either iframe, component, or standard PDP editing flow based on the product’s customization approach type.
UI Appearances

Code Modification Compare To Base Cartridges 

4. cartProductCardProductPrice.isml
Purpose: This code used to for custom prize shown on cart
UI Appearances

Code Modification Compare To Base Cartridges
 

5. confirmationDetails.isml
Purpose: This script code is used for reorder functionality references.
Code Modification Compare To Base Cartridges

 

6. productCard.isml

7. productDetails.isml
Purpose: This code is used for Artifi personalize button , and component rendering
UI Appearances

Code Modification Compare To Base Cartridges

8. quickView.isml
Purpose: This code is used to restrict users directly Add to cart if product customization is required.
UI Appearances: Customized Required Product

UI Appearances: Not required or optional product

Code Modification Compare To Base Cartridges

9. addToCartProduct.isml
Purpose: This code is used to add Artifi data in the cart button.
UI Appearances

Code Modification Compare To Base Cartridges

10. imageCarousel.isml
Purpose: This code is used for rendering the Artifi editor component. 

Code Modification Compare To Base Cartridges
 

 
Solution Design for Product Price with Customization:

1. For the iframe based approach we have created two custom attributes one at product level and other at global level in which one price will be added for all the customizations type.

2. If price is set at both product as well as global level than product level price will be applied and if price is set at global level then it will be applied

3. For component based approach we have listen an event from Artifi side

     window.addEventListener('artifi-design-updated', function (e) 
    {
     priceEvent = e.detail.data;  // storing in a variable
     });

4. Data comes from that event stored in a variable and according to that data we are calculating price in cartHelper.js file        

5. Created a custom attribute in product line item and stored custom price in this attribute for both iframe and component in this file

6. In case of iframe only a single price will be added by merchant for customized price both at global and product level but in case of component , text price is different and image price is different which is stored in a json format.
At Global Level: 

At Product Level:

JSON for component :

                     {
                        "text": 15,
                        "image": 5
                      }

7. In calculate.js file adding this customize price to main price(storing custom price coming from product line item in a variable named custPrice and adding this price to original price)