BigCommerce Installation

This document explains the step-by-step installation of the Artifi app into BigCommerce. It also includes post-installation steps to configure the necessary details for integrating Artifi with BigCommerce. Please follow the sequence of actions in the order provided to gain a clear understanding of the Artifi setup within BigCommerce.

Connector App Installation

Follow the below steps to install the Artifi connector from the the marketplace

Login to existing BigCommerce account.
Users will be logged into BigCommerce and redirected to the Marketplace page from menu Apps >> Marketplace
Search for Artifi in the Marketplace.
Click on Get This App.
Install with Existing or New BigCommerce website.
Users will click on the "Install" button, to install the app.
Once the installation is completed, click on the "Confirm" button.
After clicking confirm, the dashboard page will be displayed.
BigCommerce should provide the Ecommerce website URL to Artifi, so that it can be whitelisted to allow BigCommerce to access Artifi. Here is a link to whitelist the URL in Artifi admin.

Please reach out to Artifi at support@artifilabs.com for further configuration. There are two ways in which Artifi can be configured:
1. Iframe
2. Component
Following are the details BigCommerce will receive from Artifi to configure Artifi on BigCommerce website. The same configuration details will be applied to both iframe as well as component.
1. Application Configuration Details
2. Admin Credentials
3. A product should be created in Artifi admin, so that it can be mapped with a BigCommerce product. The Artifi team will help to create the product in Artifi.
When you configure Iframe, click on the Design Configuration tab to add the name of the personalize button that will be displayed on the PDP page and Save the page. This is not required for the component configuration.
After adding the configuration details and product in Artifi, click on the Manage Product tab in BigCommerce and set the product as personalized.
Note: The product set as personalized must be created in Artifi.
Following are the Actions explained that the BigCommerce user can set in admin.
- Unset As Personalize - If the personalize button is already set on the front-end (webstore) then setting it to “Unset As Personalize” will remove the Personalize button from the front-end PDP page.
- Set As Personalize -If the Set As Personalize option is selected by the user then the Personalize button would be included in the webstore PDP page.
- Optional - This option would allow the users to use both the Personalize as well as the Add-to-cart options to be used simultaneously on the webstore PDP page.
Click on the Personalize button to start personalization.

Integrate React component

Reference Code for product-view.html

File Path: templates\components\products\product-view.html=>

Utility:

To integrate the Artifi Component into Bigcommerce add the following component to the product-view.html page.

React Editor Component: <div id="artifi-editor"></div>

React Upload Image, Text & Price Component. Here is a list of all component that you can integrate (Click Here).

Upload Image Component: <div id="artifi-upload-user-image"></div>

Text Component: <div id="artifi-text-widget-open-list"></div>

Price/Design Updated component: <div id="artifi-design-updated"></div>

Edit mode

Reference Code for content.html

File Path: templates\components\cart\content.html=>

Replace the below code with <tr> having class cart-item.

Utility:

The following information is added to the cart item to capture the Product ID and current quantity when the user clicks the Edit link, as Artifi does not store the cart item quantity.

Reference Code for product.html

File Path:templates\pages\product.html=>

Below script is used on the PDP page to update the product quantity when the product is opened in Edit mode.

// To get the value of quantity of the product in edit mode.

document.addEventListener('DOMContentLoaded', function() {

// Function to get query parameters

function getQueryParam(param) {

var urlParams = new URLSearchParams(window.location.search);

return urlParams.get(param);

}

// Get the quantity parameter from the URL

var quantity = getQueryParam('quantity');

var variantId = getQueryParam('variant');

if (variantId) {

const variantElement = document.querySelector(`input[value="${variantId}"]`);

if (variantElement) {

variantElement.checked = true;

// Optionally, you may need to trigger change events if there are dependencies.

variantElement.dispatchEvent(new Event('change'));

}

if (quantity) {

var quantityInput = document.querySelector('input[name="qty[]"]');

if (quantityInput) {

quantityInput.value = quantity;

}

});

</script>

Illustration for the Product SKU-Product Code Match

The user should also make sure that the Product SKU in Bigcommerce maps with the intended product SKU in Artifi.

Illustration for the Variant SKU-Variant Code Match

Also the variant SKU in Bigcommerce must map with the Product code present for the same product in Artifi variants, this needs to be ensured. If a product needs to have variants then in such a case one variant should be set as default.

Product List Page

Once the product is set up on BigCommerce then we can see the product on the list page.

Product Display Page

Clicking the product on the PLP page will redirect you to the display page, where you can view the product along with its defined components and attributes.

Cart Details

Artifi Data in Bigcommerce Admin

Once the shopper is done with the Add-To-Cart then the Bigcommerce Administrator may fetch the Artifi details from the Bigcommerce Admin >> Order Section.

In the Order Section, following useful information will be displayed as shown in the below snippet.

Artifi Design ID
Artifi PDF URL
Artifi XML URL

Note : Artifi Design ID is the key to get the personalization details (like Add to Cart Json, XML etc) of the respective Product.