Sign Up
  1. Artifi Labs
  2. Solution home
  3. Ecommerce Integrations
  4. BigCommerce

BigCommerce Installation

BigCommerce Support Document

In this document, all the installation steps for Bigcommerce store setup, Artifi Store to Bigcommerce store integration and some of the other post-installation processes are explained in the following sections. Please follow the sequence of actions to be taken as expressed in the subsequent sections to gain a perspective of all these setup related steps.

Connector App Installation

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

  1. Login to existing BigCommerce account.

  2. Users will be logged into BigCommerce and redirected to the Marketplace page from menu Apps >> Marketplace

  3. Search for Artifi in the Marketplace.

  4. Click on Get This App.

  5. Install with Existing or New BigCommerce website.

  6. Users will click on the "Install" button, to install the app.

  1. Once the installation is completed, click on the "Confirm" button.

  2. You will reach the following Welcome screen, here you will get the scripts which need to be copied for its use in the HTML/JS(Bigcommerce Store Theme) related code.

     

Below are the files in which need to update the above script for integration with the Artifi application.

  • File Path: templates\pages\checkout.html=>

This is used for showing the customized preview image on the checkout page.


  • File Path: templates\pages\order-confirmation.html=>

This is used for showing the customized preview image on the checkout(or the order confirmation) page.

  • File Path: templates\layout\base.html=>

  • File Path: templates\pages\account\orders\invoice.html=>

  1. Click on Application Configuration and add the configuration details. Please add the Website ID and WebAPI Client key as provided by Artifi. To configure the react head less component you need to use a component radio button. For customization to appear in a separate window upon clicking the "Personalize" button, choose the "Iframe" radio button.Also need to update the below details in application settings. 

React:-

Here is the Integration URL link: https://integrationcomponent.artifi.net/artifi-headless-releases/3.0/Artifi.headless.js

Here is the Production URL link: 

https://component.artifi.net/artifi-headless-releases/3.0/Artifi.headless.js

Iframe :-

Here is the Integration URL link: https://integrationdesigner.artifi.net/script/sasintegration/artifiintegration.min.js 

Here is the Production URL link: 

https://designer.artifi.net/script/sasintegration/artifiintegration.min.js 

Domain & Price Details

Go to Artifi Admin and whitelist your IP within the Website>>Basic Details>>Domain & Price Details. 

Please add the Price Integration URL with Store Hash. For example sharing a price integration URL with a Store hash(highlighted).

URL: https://bigcommerce.artifi.net/api/GetPrice/vbv5qu3sq3

This price integration results in showcasing the price associated with a particular product on the Artifi designer (please refer to the following snippet for more clarity).

If a particular product has a sale price only then we showcase this sale price else we show the default price. For instance with reference to the above snippet the price that has been highlighted may be a sale price or a default price.

Note : In above snippet User can multi select and perform the actions from dropdown. And by default Product List is sorted by modified date.

Description for Action options

  • Unset As Personalize - If the personalize button is already set on the front-end(of the store) then setting it to “Unset As Personalize” will unset the same from the front-end. As a result, the Personalize button would be removed from the demo store. 

  • Set As Personalize -If the Set As Personalize option is selected by the user then the Personalize button would be included in the demo store and the PDP. 

  • 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 demo store as well as the PDP.

Once we set this as personalize, after following all the steps we get to the following screen as an illustration of this process :

BigCommerce Store setup (HTML/JS settings)

Click on the “Make a copy” button in the above screen. 

Note : Before applying code updates to the core theme, it's recommended to create a copy of the theme and make your changes there.

Please enter the theme name in the following screen for a copied theme.

Click on the “Customize” button referring to the copied theme.

Click on advance and Edit theme files

Here the Light theme has been chosen by the user so as per the selection of the theme style the customization would apply as per the selection of the theme style. 

Any custom changes if required can be made based on the reference code.

1. Replace the Bigcommerce product image

Reference Code for order-contents.html

File Path: templates\components\account\order-contents.html=>     

<li class="account-listItem" data-order-item-id="{{order_product_id}}" data-product-sku="{{sku}}" ></li>

Utility: This code is used to replace the Bigcommerce order product image with customized/ Artifi personalized images and integrate a preview link on the order page.

2. Edit mode

Reference Code for content.html

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

<tr class="cart-item" data-item-row data-cart-item-id="{{id}}" data-product-id="{{product_id}}" data-product-sku="{{sku}}" data-product-link="{{url}}">

         

         

    <script type="text/javascript">

   BigCommerceArtifi.CartPage.init();

</script>


      

Utility:

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

  1. 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).

  2. Here the facility to edit the previously added decoration is presented along with the provision to preview the decorated product image.  

3.  Set Personalize Button on PLP

Reference Code for body.html

File Path: templates\components\common\body.html=>

<script>

    BigCommerceArtifi.Application.setPersonalizationButton();

</script>

Utility:

This code snippet is used to add the personalize button on the store PDP.

4.  Storing Details

Reference Code for subscription-form.html

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

<script>BigCommerceArtifi.Customer.init('{{customer.email}}');

</script>

Utility:

This is for storing customer details.

5. Associating the Artifi design ID

Reference Code for input-text.html  

File Path: templates\components\products\options\input-text.html=> 

<div class="form-field" data-product-attribute="input-text">

    {{#if this.display_name '!=' 'Artifi Design Id'}}

        <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_text_{{id}}">

            {{ this.display_name }}:


            {{#if required}}

                <small>{{lang 'common.required'}}</small>

            {{/if}}

        </label>


        <input class="form-input form-input--small" type="text" id="attribute_text_{{id}}" name="attribute[{{this.id}}]" value="{{this.prefill}}" {{#if required}}required{{/if}} {{#if max_length}}maxlength="{{max_length}}"{{/if}}>

    {{else}}

        <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_text_{{id}}" style="display: none;">

            {{ this.display_name }}:


            {{#if required}}

                <small>{{lang 'common.required'}}</small>

            {{/if}}

        </label>


        <input type="hidden" class="form-input form-input--small" type="text" id="attribute_text_{{id}}" name="attribute[{{this.id}}]" value="{{this.prefill}}" {{#if required}}required{{/if}} {{#if max_length}}maxlength="{{max_length}}"{{/if}}>

    {{/if}}

    </div>

Utility:

With this code, we are associating the Artifi design ID with the product. This details we need to store to utilize when a user add to cart the product.

6. Enable and disable the Personalize button

Reference Code for add-to-cart.html

File Path: templates\components\products\add-to-cart.html=>

     

         <div id="artifi-personalize-button-container" class="form-action">

         <input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" class="button button--primary" type="submit" style="display: none"

            value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">

            

         </div>

Utility:

This code helps in enabling and disabling the Personalize button on the store PDP.    

7. Enable and disable the Personalize button

Reference Code for card.html 

File Path: templates\components\products\card.html=>            

<a href="{{url}}" data-art-selector="btn-personalise" data-product-id="{{id}}" data-product-sku="{{sku}}" data-event-type="product-click" class="button button--small card-figcaption-button" style="display: none;">{{lang 'Personalise'}}</a>

Utility:

This code helps in enabling and disabling the Personalize button on the store PDP.    

8. Add Personalize button

Reference Code for grid.html

File Path: templates\components\products\grid.html=>          

<script>BigCommerceArtifi.Application.setPersonalizationButton(); 

</script>

Utility:

This code snippet is used to add the personalize button to the store.

9. Integrate React component

Reference Code for product-view.html

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

<form id="bigCommerceAddToCartForm" class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"

           

<script> BigCommerceArtifi.ProductPage.init({'productId':'{{product.id}}','customerEmail':'{{customer.email}}'});

</script>

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

React Price Event Listener

Get design Id for Edit mode in React    

10.  Customers order details

Reference Code for details.html

File Path: templates\pages\account\orders\details.html=>

<script>

    BigCommerceArtifi.CustomerOrder.init();

</script>


Utility:    

This code is used to store the customers order details.

11. Include Arifi connector Script

Reference Code for invoice.html

File Path: templates\pages\account\orders\invoice.html=>                 

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

            <script src="https://bigcommerce.artifi.net/library/script/DE9DB5C82210BE20FFF9F850BE9D7DD6/bigcommerce.artifi.connector.js"></script> 

Utility:

This is the sample code snippet. The Bigcommerce user needs to copy the code snippet from the Artifi connectors installation page(as shown on page number 22 in this document). This code basically integrates Artifi with Bigcommerce.

Reference Code for checkout.html

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://bigcommerce.artifi.net/library/script/DE9DB5C82210BE20FFF9F850BE9D7DD6/bigcommerce.artifi.connector.js"></script>   

<script>

BigCommerceArtifi.Application.updateCheckoutPage();

</script>

Utility:

This is used for showing the customized preview image on the checkout page.

Reference Code for order-confirmation.html

File Path: templates\pages\order-confirmation.html=>                    

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

            <script src="https://bigcommerce.artifi.net/library/script/DE9DB5C82210BE20FFF9F850BE9D7DD6/bigcommerce.artifi.connector.js"></script>

            <script>

            BigCommerceArtifi.Application.updateCheckoutPage('orderconfirmation');

            </script>

 

Utility:

This is used for showing the customized preview image on the checkout(or the order confirmation) page.

Reference Code for base.html

File Path: templates\layout\base.html=>

NOTE : Library/script URL for each Store is different, thus use the url you get at the time of Connector App installation.(Below is sample library url)

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://bigcommerce.artifi.net/library/script/DE9DB5C82210BE20FFF9F850BE9D7DD6/bigcommerce.artifi.connector.js"></script>

Utility: This is the sample code snippet. The Bigcommerce user needs to copy the code snippet from the Artifi connectors installation page(as shown on page number 5 in this document). This code basically integrates Artifi with Bigcommerce.

12. Artifi integration

Reference Code for product.html

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

<div id="bigCommerceProductView" itemscope itemtype="http://schema.org/Product"></div>

Utility:

This is used for Artifi integration. 

13. Artifi React event Listeners

Below, we'll explore how to listen for Artifi events such as "Add to Cart" success or failure events, as well as the Artifi initialization event.

14. Preview design

Reference Code for cart-preview.html

File Path: templates\components\common\cart-preview.html=>    

Replace “<div class="previewCartItem-image">” with below code

<div class="previewCartItem-image" data-preview-design-id="{{#if options.length '>' 0}} {{#each options}}

{{#if name '===' 'Artifi Design Id'}}{{#if value '>' '0'}}{{value}}{{/if}}{{/if}}

{{/each}} {{/if}}">  

Utility:

This is used to update preview design in mini cart preview. 

Finalization Process

Save the theme file and apply it.

Final Verification

Just to check if the changes done by the user are in sync, we go to the Artifi connector page to verify the same. If the user wishes to check this he/she may go on to change the Personalization through the following screen.

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 personalize button 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. 

As shown in the following snippet the useful information like the :

  • Artifi Design ID 

  • Artifi PDF URL

  • Artifi XML URL

 are made available to the Bigcommerce Admin through the View Orders screen, as indicated below:

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

Did you find it helpful? Yes No

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

BigCommerce