BigCommerce Installation

BigCommerce Support Document

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.

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.

BigCommerce should provide the Ecommerce website URL to Artifi, so that it can be whitelisted to allow BigCommerce to access Artifi..

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

Script 1. To integrate the Artifi Component into Bigcommerce.

Script 2. To initialize the product page with product Id and customer details.

React Editor Component

React Upload Image, Text & Price Component

Edit mode

Reference Code for content.html

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

Utility:

This code is useful to carry out following activities simultaneously which are listed below:

Once the product is added into the cart the associated decoration gets carried along with the product into the PLP (which is the Add-to-cart page).
Here the facility to edit the previously added decoration is presented along with the provision to preview the decorated product image.

Reference Code for subscription-form.html

File Path: components\common\subscription-form.html=>

</script>

Utility:

This is for storing customer details.

Reference Code for product.html

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

// 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.