Basic Server-Side Implementation

In this guide, we'll walk through a basic integration of Quicklizard's SDK via server-side templates.

The guide will use Ruby on Rails as the server-side platform, running a store that sells consumer electronics.

Product Page

We begin by defining our controller code for the product page. Here we find a product in our DB, and define the template variables we'll use for the SDK.

app/controllers/products_controller.rb

class ProductsController < ApplicationController
  
  # GET /products/:id - renders product page
  def show
    @product = Product.find(params[:id]) # find product in DB
    # set view variables for SDK
    @productId = @product.ean # use the product's ean as the productId variable
    @shelfPrice = @product.shelfPrice
    @clientKey = 'myvirtualstore'
    
    render('show') # explicit call to render the product page view
  end
  
end

With our controller code in place, we can now modify our product page view to include QL's SDK

app/views/products/show.erb

<div>
  <h1><%= @product.name %></h1>
  <!-- rest of HTML is redacted for simplicity --> 
</div>
<!-- ADD QL's SDK at the bottom of the page template -->
<script>
  window.QLAsync = function(QL){
    var clientKey  = '<%= @clientKey %>',
        productId  = '<%= @productId %>',
        shelfPrice = '<%= @shelfPrice %>',
        permalink = '<%= product_url(@product.id) %>'; // product_url is a function provided by Rails to get the product's permalink
    QL.init(clientKey);
    QL.sendProductEvent(productId, parseFloat(shelfPrice, 10), permalink);
  }
</script>
<script src="//d3jdlwnuo8nsnr.cloudfront.net/sdk/v2.1/ql.js"></script>

Payment Confirmation Page

With our product page code in place, we can now implement the controller and view code for the payment confirmation page.

app/controllers/checkout_controller.rb

class CheckoutController < ApplicationController
 
  # GET /checkout/finish - renders successful checkout
  def finish
    id = session[:productId] # read checked-out product id from session
    @product = Product.find(id) # find product in DB
    # set view variables for SDK
    @productId = @product.ean
    @salePrice = session[:salePrice] #read product sale price from session
    @clientKey = 'myvirtualstore'
    
    render('finish') # explicit call to render the payment confirmation view
  end
 
end

With our controller code in place, we can now modify our payment confirmation view to include QL's SDK

app/views/checkout/finish.erb

<div>
  <p>Your payment has been received!</p>
  <!-- rest of HTML is redacted for simplicity --> 
</div>
<!-- ADD QL's SDK at the bottom of the page template -->
<script>
  window.QLAsync = function(QL){
    var clientKey  = '<%= @clientKey %>',
        productId  = '<%= @productId %>',
        salePrice  = '<%= @salePrice %>';
    QL.init(clientKey);
    QL.sendConfirmationEvent(productId, parseFloat(salePrice, 10));
  }
</script>
<script src="//d3jdlwnuo8nsnr.cloudfront.net/sdk/v2.1/ql.js"></script>

With the basics in place, you can now continue to read about checking out multiple items