Integrating with BigCommerce

The Mulberry BigCommerce application requires a front-end JavaScript integration. This integration consists of displaying Mulberry warranty offers on the product page using our standard widgets and adding warranties to the BigCommerce shopping cart as custom items.

This can be done by editing the theme files in your BigCommerce storefront.

Adding the Mulberry SDK

In your base.html file, add the following snippet to the element.

<script src="https://app.getmulberry.com/plugin/static/js/mulberry.js"></script>

This will load the Mulberry SDK onto your site. To initialize the SDK, run the following JavaScript snippet:

await window.mulberry.core.init({
  publicToken: 'YOUR_PUBLIC_TOKEN_HERE'
});

Getting the offer information

To retrieve offers from Mulberry, you'll simply call:

let productInfo = {
  title: "{{product.title}}",
  id: "{{product.sku}}",
  price: "{{product.price.without_tax.value}}"
};
const offers = await mulberry.core.getWarrantyOffer({
  id: productInfo.id,
  title: productInfo.title,
  price: productInfo.price,
});

If Mulberry can provide coverage for the product an offer will be returned. The response should look something like this:

[
  {
    "cost": "189.00",
    "coverage_details": [
      {
        "long": [
          "Stains from food/beverage and human/pet bodily fluids",
          "Rips & tears",
          "Seam separation",
          "Burn or heat marks (up to one inch in length)",
          "Breakage of frames",
          "Any electrical components"
        ],
        "short": [
          "Stains, rips & tears",
          "Seam separation",
          "Burn & heat marks",
          "Frame breakage"
        ]
      }
    ],
    "created_date": "2019-08-02 11:17:31.035565+00:00",
    "customer_cost": "189.00",
    "duration_months": "36",
    "external_product_id": null,
    "id": "179115",
    "mb_category": "seating",
    "product": {
      "name": "Smokin' Sofa in Smoked Chrome Mirror",
      "price": "2995.00",
      "retailer": {
        "company_name": "Electroshop",
        "integration": "BigCommerce"
      }
    },
    "service_type": "Repair",
    "warranty_hash": "29e75e85d110c049c35cb72e4989e633f13e7dce74e38493ae64e4b0273ef139"
  }
]

If there is no coverage available, the response will be an empty array:

[]

Once we have this data, it's time to render it as an inline or modal offer or both.

Rendering the Inline

Once we've initialized Mulberry and fetched an offer, the next step involves passing the settings and offer data into the Mulberry inline container.

First, include an empty div where the inline should be populated on the product page template.

<div class="mulberry-inline-container"></div>

Then, load the product page inline with the offers you have already retrieved.

const { settings } = mulberry.core;
let selectedOffer;

window.pdpInline = await mulberry.inline.init({
  offers: offers, 
  settings: mulberry.core.settings,
  selector: '.mulberry-inline-container',
  onWarrantyToggle: async (warranty) => {
    mulberry.inline.isSelected = warranty.isSelected
    if(warranty.isSelected) {
      selectedOffer = warranty.offer
    }
    else {
      selectedOffer = null
    }
  }
})

Rendering the Modal

Once we've initialized Mulberry and fetched an offer, the next step involves passing the settings and offer data into the Mulberry modal.

Two things can happen once a modal is displayed for the customer: they can accept or decline the offer. If a user chooses to add the warranty to their purchase, the onWarrantySelect() callback will be fired with data about the warranty. Conversely, if the user opts out of the warranty, the onWarrantyDecline() callback will be called.

window.pdpModal = await mulberry.modal.init({
  offers: offers, 
  settings: mulberry.core.settings,
  onWarrantySelect: async (warranty) => {
    await mulberryAddWarrantyToCart(storeHash, cartId, selectedOffer);
    mulberry.modal.close();
    // Navigate to cart page or refresh cart here
  },
  onWarrantyDecline: () => {
    mulberry.modal.close();
    // Navigate to cart page or refresh cart here
  }
})

We are now ready to open the modal. Typically, when a customer clicks "Add to Cart" is when we want to trigger this modal, however, it can be triggered at any time. For the purposes of this document, let's assume we're going the standard "Add to cart" route.

It's likely that when you click "Add to cart" on your theme that either a form POST or ajax request is made. Instead of this default behavior, you'll need to instead make a call to the modal to display it.

$("form[action='/cart/add']").submit(async function(){
    if(offers.length === 0) {
      return
    }

    if(selectedOffer) {
       await mulberryAddWarrantyToCart(storeHash, cartId, selectedOffer);
       // If you have an ajax cart slideout, you would also want to refresh your cart here
    }
    else {
      window.pdpModal.open()
    }
  })
}

Unlimited Subscription in Modal

If Unlimited Subscriptions are enabled, it is very important that when the activation flow succeeds for enrollment, we check if payment is completed, and if so, we update the warranty to reflect it as such. This is to ensure the user activates their subscription without paying extra on final checkout.

onWarrantySelect: (warranty) => {  
  if (warranty.paymentComplete) {  
    warranty.customer_cost = "0.00"  
  }  
  window.selectedOffer = warranty  
  window.mbResume = true  
}

Adding Warranties to Cart

Mulberry's /api/bigcommerce/carts/custom-items endpoint will add the dynamically generated warranty offer to the BigCommerce cart. The following is a sample function you can leverage for this:

let jsContext = JSON.parse("{{jsContext}}");

function mulberryAddWarrantyToCart(storeHash, cartId, offer, quantity=1) {
    let apiUrl = "https://mb-shim.getmulberry.com/api/bigcommerce/carts/custom-items"
    let response = fetch(apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            storeHash: jsContext.storeHash,
            cart_id: jsContext.cartId,
            custom_items: [{
                sku: offer.warranty_offer_id,
                name: "Mulberry Protection",
                list_price: offer.customer_cost,
                quantity: quantity
            }]
        })
    })
    return response
}

Putting it All Together

let jsContext = JSON.parse("{{jsContext}}");

async function mulberryAddWarrantyToCart(storeHash, cartId, offer, quantity=1) {
    let apiUrl = "https://mb-shim.getmulberry.com/api/bigcommerce/carts/custom-items"
    let response = fetch(apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            storeHash: jsContext.storeHash,
            cart_id: jsContext.cartId,
            custom_items: [{
                sku: offer.warranty_offer_id,
                name: warranty.product.name,
                list_price: warranty.product.price,
                quantity: quantity
            }]
        })
    })
    return response
}

async function mulberryInit() {

  await window.mulberry.core.init({
    publicToken: 'YOUR_PUBLIC_TOKEN_HERE'
  });

  let productInfo = {
    title: "{{product.title}}",
    id: "{{product.sku}}",
    price: "{{product.price.without_tax.value}}"
  };
  const offers = await mulberry.core.getWarrantyOffer({
    id: productInfo.id,
    title: productInfo.title,
    price: productInfo.price,
  });

  let selectedOffer;

  window.pdpInline = await mulberry.inline.init({
    offers: offers, 
    settings: mulberry.core.settings,
    selector: '.mulberry-inline-container',
    onWarrantyToggle: async (warranty) => {
      mulberry.inline.isSelected = warranty.isSelected
      if(warranty.isSelected) {
        selectedOffer = warranty.offer
      }
      else {
        selectedOffer = null
      }
    }
  })

  window.pdpModal = await mulberry.modal.init({
    offers: offers, 
    settings: mulberry.core.settings,
    onWarrantySelect: async (warranty) => {
      await mulberryAddWarrantyToCart(storeHash, cartId, selectedOffer);
      mulberry.modal.close();
      // Navigate to cart page or refresh cart here
    },
    onWarrantyDecline: () => {
      mulberry.modal.close();
      // Navigate to cart page or refresh cart here
    }
  })

  $("form[action='/cart/add']").submit(async function(){
      if(offers.length === 0) {
        return
      }

      if(selectedOffer) {
         await mulberryAddWarrantyToCart(storeHash, cartId, selectedOffer);
         // If you have an ajax cart slideout, you would also want to refresh your cart here
      }
      else {
        window.pdpModal.open()
      }
    })
  }
}

$(document).ready(), () => {
    mulberryInit();
})