Sending carts and displaying the game

Steps and examples of how to use the chosen integration technology or language to send shopping carts and display the game.

Server-side Integration: Native JavaScript

 

Files location and description

javascript/luckyclient.min.js: la library JavaScript
javascript/lc_plugin_sample.html: an example of use

Integration steps

1. Library installation

Insert the JavaScript library at the top of the confirmation page by using the specific URL given by Lucky Cart:

<!-- Include library using the URL provided by Lucky Cart -->
<script src="/path/to/luckyclient.min.js" type="text/javascript"> </script> 

2. Library initialisation and sending data

Insert the following script tag which will contain the library initialisation code and then send the data.

Be careful: the loading time of this script through the position of its tag on the page’s code is crucial and specific to each retailer! It must be loaded early enough for the game to be displayed quickly but also late enough for all the related data to be available (including cart data and luckygame div allowing to locate the game’s position)

<script type="text/javascript">
// Create a Lucky Cart object with your key and secret
  var client = new Luckycart('key', 'Secret');

  // Create an array of data to send to associate with the token.
  // Assuming data from the site are store in customer and cart data. 
  var data = {
    // mandatory data
    customerId: customer.getId(),
    cartId: cart.getId(),
    ttc: cart.getTtc(),
    ht: cart.getHt(),
    country: customer.getCountry(),
    email: customer.getEmail(),
    payment: cart.getPayment(),
    firstName: customer.getFirstname(),
    lastName: customer.getLastname(),
    codePromo: cart.getCode(),
    currency: cart.getCurrency(),
    lang: customer.getLanguage(),
    shopId: cart.getShopId(),
    optin: customer.getOptin(),
    products : [
      {uid: cart.products[0].getId(), ttc: cart.products[0].getTtc(),
        ht: cart.products[0].getHt(), qty: cart.products[0].getQty(),
        brand: cart.products[0].getBrand(), cat: [6]},
      {uid: cart.products[1].getId(), ttc: cart.products[1].getTtc(),
        ht: cart.products[1].getHt(), qty: cart.products[1].getQty(),
        brand: cart.products[1].getBrand(),  cat: []},
      {uid: cart.products[2].getId(), ttc: cart.products[2].getTtc(),
        ht: cart.products[2].getHt(), qty: cart.products[2].getQty(),
        brand: cart.products[2].getBrand(),  cat: [1,5]},
    ]

    // add here any other specific data
  };

  client.init(function(){
    client.plugin(data, 1, function(res){
      // Callback called once data have been sent
      if(!res.script) return;
      res.script = res.script.replace(/\<[^<>]+\>/g,"");
      var lc_script = document.createElement('script');
      lc_script.innerHTML += res.script;
      document.body.appendChild(lc_script);
    })
  });
</script>

3. Game display

Completed by positioning the following containers on the order confirmation page where the game must be displayed:

<div id="luckygame">
  <!-- Luckycart plugin will be displayed here -->
</div>