APPROVE for BigCommerce

BigCommerce Overview

Integrating APPROVE into your BigCommerce site is fairly straight forward. We have options created to cater to every level of expertise, and every business size. The following table will help you choose the right BigCommerce integration solution for your business.

BigCommerce Solution Technical Level Integration Into Your Site Requirements
BigCommerce Theme Integration Familiarity with basic BigCommerce theme customization and an understanding of basic to intermediate javascript / jquery is needed
Custom (We create a solution specifically for you) Contact KWIPPED for a quote

BigCommerce Theme Integration Details

The steps needed to integrate with the shopify theme are summed up below.

  1. Add the contents of approve-bigcommerce-plugin.html into BigCommerce
  2. Retrieve your APPROVE code snippet
  3. Place the APPROVE finance button code in the BigCommerce cart and product page(s).
  4. Edit the kwipped_approve.bc_app.config settings as needed
  5. Add a jquery or javascript trigger if needed.
  6. Done.

{danger} The following code and information are EXAMPLES ONLY and should only be used as a general reference. Due to the complexities of BigCommerce and inconsistencies in variable naming and structure from theme to theme you should consult with a developer who is very familiar with BigCommerce and javascript/jquery to integrate.

STEP 1: Add the contents of approve-plugin.html into BigCommerce

GoTo: Admin Dashboard -> Storefront -> Script Manager

  • Click on "Create a Script"
  • Give this script a name something like "APPROVE-Plugin-Script"
  • Give the script a helpful description.
  • Under "Location on page" choose footer
  • Under "Select pages where script will be added" choose Store pages
  • Under "Script category" choose Functional
  • Under "Script type" chose script
  • Under "Script contents" copy the contents of approve-bigcommerce-plugin.html, or copy the block below and paste its contents in this section.

  • Click "Save"

STEP 2: Retrieve your APPROVE code snippet

{warning}

Before you add your APPROVE code snippet you must first insure that you are using a copied theme for your site so that your additions are not overwritten.

If your theme is not a copy you need to make a copy before you can continue.

  • To make a copy of your theme, go into the Admin Dashboard -> Storefront -> My Themes
  • With the currently selected theme, click on "Advanced" and go down to "Make a Copy"
  • Once the copy has been made you can make it your current theme.


Retrieve your APPROVE <approve-widget></approve-widget> code snippet from KWIPPED

  1. Log into KWIPPED and go to APPROVE Plugin Configurator in APPROVE > Settings.

  2. Locate the section Copy Plugin Code

  3. In the box below the Copy Plugin Code header, select the entire section of code for <approve-widget></approve-widget> and copy it to your clipboard

  4. In your BigCommerce Admin Dashboard GoTo: Admin Dashboard -> Storefront -> My Themes

  5. In the active theme click on "Advanced" and select "Edit Theme Files"

  6. The main template should be in a folder labeled templates and inside there, either in that directory or in a directory named layout, you should see a file named something like base.html, default.html or products.html

{info} If you want the plugin to appear on the cart, you will need to place the <approve-widget></approve-widget> tag on either the master template that is used for both products and carts OR you will have to also include it in the cart template.

  1. Once you determine the template file that is loaded for your main product pages and/or cart pages, open it in the editor.

  2. Look for the tag {{{footer.scripts}}} inside the template file and paste your APPROVE code snippet right above this tag.

  3. Save the changes to the template.

At this point the widget has been added to the template. Now we need to add in the buttons in the appropriate places.

STEP 3: Place the APPROVE finance button code in the BigCommerce product and cart page(s).

Place the APPROVE finance cart button snippet code found in the file approve-button-cart-template-example.html in the appropriate BigCommerce cart theme file where you want the APPROVE finance button to appear.

Place the APPROVE finance product button snippet code found in the file approve-button-price-template-example_html in the appropriate BigCommerce product theme file where you want the APPROVE finance button to appear.

EXAMPLE PRICE BUTTON OPTIONS:

Price Range Template File

Place the APPROVE finance product button snippet code found in the file approve-button-price-range-template-example.html in the appropriate BigCommerce product theme file where you want the APPROVE finance button to appear.

Product View

Place the APPROVE finance product button snippet code found in the file approve-button-product-view-template-example.html in the appropriate BigCommerce product theme file where you want the APPROVE finance button to appear.

STEP 4: Edit the config settings as needed

Set all appropriate settings and jQuery element tags in the installed script

To do this you will need to edit the Script added in the first step under Admin Dashboard -> Storefront -> Script Manager


Set your approveid in the installed script

Locate the following section in this script

    kwipped_approve.approve_id = "your+approve+id+goes+here";

Replace your+approve+id+goes+here with your approveid

To retrieve your approveid, login to your account and go to APPROVE Settings > Web Integration > General.


Set the appropriate jquery element tags needed in the javascript object kwipped_approve.bc_app.config

Locate the following section in this script:

    kwipped_approve.bc_app.config = {
        button_amt_threshold: 2000,
        cart_amt_threshold: 2000,
        product_info_wrap: ".productView",
        product_price_ele: ".productView [data-product-price-without-tax]:first",
        qty_ele: 'input[name="qty[]"]',
        qty_down_ele: 'button[data-action="dec"]',
        qty_up_ele: 'button[data-action="inc"]',
    }
  • button_amt_threshold: This should be set to the product price minimum to show the APPROVE finance button.
  • cart_amt_threshold: This should be set to the cart price minimum to show the APPROVE finance button.
  • product_info_wrap: Set to product view wrapping element that contians both the APPROVE finance button as well as the qty and price elements.
  • product_price_ele: Set to the price element jquery ID or class tag to retrieve the base price on a single APPROVE finance button product page.
  • qty_ele: Set to the quantity element jQuery class or ID tag that contains the qty increase/decrease selectors.
  • qty_down_ele: Set to quantity down click element jquery class tag to set the current quantity for the APPROVE finance button.
  • qty_up_ele: Set to quantity up click element jquery class tag to set the current quantity for the APPROVE finance button.

STEP 5: Add a jquery or javascript trigger if needed.

To fully integrate into a BigCommerce theme, you will want to create custom code to handle any option changes or any additions to the products attached to a APPROVE finance button. This can be done with javascript/jQuery and update the buttons accordingly.

The below is an example of how to attach the qty up/down click into the APPROVE finance button (a modified version of this code is at the time of this writing included in the approve-bigcommerce-plugin.html file):


var cur_qty_count = 1; // set to starting qty for product

$(" #qty_down_button ").click(function () {
    cur_qty_count = (cur_qty_count > 1) ? Number(cur_qty_count) - 1 : 1;
    if (product_approve_single_button.length > 0) {
        product_approve_single_button.attr("approve-qty", cur_qty_count);
        kwipped_approve.bc_app.approve_button_show_hide(product_approve_single_button);
    }
});

$(" #qty_up_button ").click(function () {
    cur_qty_count = Number(cur_qty_count) + 1;
    if (product_approve_single_button.length > 0) {
        product_approve_single_button.attr("approve-qty", cur_qty_count);
        kwipped_approve.bc_app.approve_button_show_hide(product_approve_single_button);
    }
});

STEP 6: Done.

BigCommerce Theme Integration Details

Contact KWIPPED for a quote