Sending carts and displaying the game

Steps and examples to send shopping carts and display the game.

Native JavaScript integration

Files location and description

- luckyclient.min.js : the JS library
javascript/lc_plugin_sample.html : an example of use

Integration steps

1. Install library

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

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

2. Initialize library and send data

Insert the following tag in your order confirmation page

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

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)

3. Display game

On the order confirmation page, add the following div where the game should be displayed:

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