PLT Usage

PLT is designed to be very easy to use. The designer is an HTML5 widget that can be plugged into any website with few lines of code.

Getting Started/Installation

Include in your HTML

Link to the necessary files from the PLT server. Add the following code near the end of your document body.

<script src="http://202.79.33.217:9999/dist/bundle.js" id="pf-widget-embedder"></script>

Create a new PLT object

  <script>
    var myLogoTool = new LogoTool({
      clientId: 'ab498p10-c742-a90c-b57a-7041d13da22a'
    });
  </script>

clientId is your application id, generated when your application is registered with PLT server, which is required when initializing PLT object, otherwise your request to the server will not be authorized.

Show Designer Modal

showEditor(deco_id)
Shows designer modal window and loads the canvas with the provided decoration id(deco_id).

• deco_id
  • Type: String
  • Required

Bind an event to your button to show the designer modal

<script> 
       document.getElementById('show-designer-button').addEventListener('click', function(){
         myLogoTool.showEditor('10039701_1_2004_1075'); // decoration_id passed as parameter
      });
</script>

Save Design

You can add graphics to product image using decoration information available for the product and save the final design using PLT designer tool. Once the design is saved, you would want to save the design id in your database, so you can retrieve the design information when you need it.
You can extract design id from the save design response using a callback event onSave()

Logo Visualizer

Logo visualizer lets you visualize uploaded graphics on multiple products.

In your product list HTML markup, the images to be replaced with canvas should have id as id_[product decoration id]

  <img  id="id_10030901_1_1175_43" 
        src="product-image-01.jpg" alt="" />;

Execute the following functions to visualize graphics on the product images.

getProductList(decoration_id_list)
Gets the decoration information using the list of provided decoration ids.

• deco_id_list
  • Type: String (Comma separated list of decoration ids of all products in page)
  • Required

createQuickVisualizer()
Creates the visualizer widget.

• Takes no parameter

<script>
  // get the decoration information
    myLogoTool.getProductList('10030901_1_1175_43,10039701_1_2004_1070,10210403_1_1466_575,10222205_1_8_676,10415000_6_2153_1278,10615003_1_1306_503'); 

  // create the widget
  myLogoTool.createQuickVisualizer();
</script>