Universal Classification Widget Implementation guide

The widget is based on javascript and you only have to add a few lines of code (see below) to your website and you are all set.

Please note: Your webpage needs to have a doctype specified at the very top, otherwise some visual elements may be displayed incorrectly. Here is the example of a valid doctype: <!DOCTYPE html>

When inserting the widget into your workflow or CMS, you need to provide three input data fields when calling the widget, indicated in bold cursive yellow below.

1) Product description "dc_your_product_description": This is the description of the product that you would like to classify. The description provided will be prefilled in the product description field and used for auto-complete and auto-suggest of relevant categories.

2) DutyCategory ID "dc_duty_category_id": This is the classification result in case a product has been classified previously. It is our unique classification ID, that will allow you to power import duty & tax calculations or retrieve HS codes, duty & tax rates and import restrictions using our API services (parameter “cat”). The DutyCategory ID will be used in case the widget is called again to display the classification. If the product has not been classified you can leave this field empty.

3) Classification request ID “dc_classification_request_id”. In case help is required with a product classification, a user can request from the widget, by selecting “can’t find product”, the DutyCalculator team to classify a product. After the request is submitted this input field will be automatically filled with classification request id. When calling the widget again with prefilled Classification request ID it will either show a status of a request or final classification in case the product has been successfully classified by DutyCalculator experts and you can confirm classification. The user will receive an email notification at the provided address when the classification request is completed, or in case more information is required.

4) Additionally you may have “dc_hs_code” input field. When using outputParams='dc_id+hs_code' or outputParams=’hs_code'. Please note that it will add appropriate charges to your billing section. When requesting hs code it is also required that ‘countryToCode’ is set.

The Product description, DutyCategory ID and Classification request ID data fields function as output fields as well. The values that are provided by the widget have to be stored in your database every time a product classification is confirmed or the classification request is submitted. If the CMS page where the classification widget is installed is called up again, the input fields of the classification widget have to be provided so the classification can be displayed.

{API KEY} has to be replaced with a valid API key which can be obtained with a DutyCalculator API account.

In case of using the widget on the front-end, it is not safe to enter your API KEY. Instead, you may contact us to set up “autodetect” feature.

Widget is available in 2 designs templates - “standard” and “white” by setting up a  ”widgetTemplate” parameter. Additionally you may use your own CSS styles to override default styles outputed by DutyCalculator. Here is the example of small modification of a “white” template.

<style>

.dc-classification-widget .block .form label {font-size: 10px !important;}

.dc-classification-widget .block .txt {width: 267px !important;  height: 20px !important;  line-height: 22px !important;}

.dc-classification-widget .btn-a {background: #3E53A4 !important; border-radius: 50px;}

.dc-classification-widget .btn-a .i {background: #3E53A4 !important; border-radius: 50px;}

.dc-classification-widget .wid_ibtn {background:  #3E53A4 !important;}

.dc-classification-widget .wid_ibtn .i {background: -999px -999px no-repeat !important;}

.dc-classification-widget .block .block-content p a, .dc-classification-widget .block .block-content p a:hover,.dc-classification-widget .block .block-content p a:visited {color:#3E53A4 !important}

.dc-classification-widget .block .block-content p a.no-link, .dc-classification-widget .block .block-content p a.no-link:hover,.dc-classification-widget .block .block-content p a.no-link:visited {color:#3E53A4 !important}

.dc-classification-widget .btn-a .i input {vertical-align:top !important;  color: #FFFFFF;  display: inline-block;  font: bold 14px/30px 'PT Sans', sans-serif, Helvetica;  height: 30px;  overflow: visible;  text-transform: uppercase;  padding: 0 11px 0 13px;}

</style>

Here is the basic code of the widget:

<input type="hidden" name="dc_duty_category_id" id="dc_duty_category_id" value="{EMPTY WHEN PRODUCT HAS NOT BEEN CLASSIFIED BEFORE OR INSERT DUTYCATEGORY ID WHEN THE PRODUCT HAS BEEN CLASSIFIED BEFORE}"/>

<input type="hidden" name="dc_your_product_description" id="dc_your_product_description" value="{IF A PRODUCT HAS NOT BEEN CLASSIFIED BEFORE INSERT VALUE FOR A PREFIL IN PRODUCT DESCRIPTION FIELD OR IN CASE A PRODUCT HAS BEEN CLASSIFIED BEFORE INSERT THE OUTPUTTED PRODUCT DESCRIPTION}"/>

<input type="hidden" name="dc_classification_request_id" id="dc_classification_request_id" value="{IF A СLASSIFIACATION REQUEST FOR A PRODUCT HAS BEEN CREATED, INSERT CLASSIFICATION REQUEST ID VALUE TO SHOW THE REQUEST STATUS OR FINAL CLASSIFICATION IN CASE THE PRODUCT HAS BEEN SUCCESSFULLY CLASSIFIED BY EXPERTS}"/>

<input type="hidden" name="dc_hs_code" id="dc_hs_code" value="{THE VALUE OF HS CODE OF CLASSIFIED PRODUCT WILL BE OUTPUTTED HERE}"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

var dc$ = jQuery.noConflict();

function dc_LoadWidget(){

        var apiKey='{API KEY or autodetect}'

        //in case hs code is required in output - ISO 3166-1-alpha-3 or ISO 3166-1-alpha-2 country code

var countryToCode='US'

        var dcIdInputField='dc_duty_category_id'

        var dcDescInputField='dc_your_product_description'

        var dcIdClassificationRequestInputField='dc_classification_request_id'

        var widgetMountPointId='dc_UniversalWidget'

var hsCodeInputField='dc_hs_code'

//what information to output. each output param adds charges.

//if left empty - dc_id is used.
//all possible values are: dc_id, hs_code, dc_id+hs_code
var outputParams='dc_id'
//standard or white
var widgetTemplate='standard'

   var host=(("https:" == document.location.protocol) ? "https://www.dutycalculator.com/" : "http://www.dutycalculator.com/")

   var url = host+"widget_universal_classify/"+apiKey+"/get-widget/?dc_id_input="+dcIdInputField+"&dc_desc_input="+dcDescInputField+"&dc_classification_request_id_input="+dcIdClassificationRequestInputField+"&dc_hs_code_input="+hsCodeInputField+"&dc_country_to="+countryToCode+"&dc_output_params="+outputParams+"&dc_widget_template="+widgetTemplate+"&callback=?"

        dc$.getJSON(url, null, function(response) {

           dc$('#'+widgetMountPointId).html(response.html)

        });

}

dc$(document).ready(function(){

        dc_LoadWidget()

})

</script>

<div id="dc_UniversalWidget">Loading universal classification widget...</div>

Step by step guide:

If you are experiencing difficulties with implementation of the widget. This step by step guide should help.

Step 1: Additional inputs on product edit page

Lets suppose that you have the following input fields in you product edit page:

Product name,

Product description,

Product price,

Product image,

And few other input fields.

Save button

After you open the page, you see pre-populated data in the above fields. When you hit save button - the data is saved into your database. And the next time you open the page - it shows changed data.

Actions for the first implementation step:

Add 3 additional text input fields which look and act the same way as a product name field that you already have.

Both “id” and “name” attributes of the first input field should be: dc_duty_category_id

Both “id”, “name” of second input field should be: dc_your_product_description

Both “id”, “name” of third input field should be: dc_classification_request_id

You need to make sure that:

* when you hit save - the data from these fields is saved into database

* when you open the page - you can see the changes which have been applied previously to these fields.

The html code may look the following way:

<p>

<label for=”dc_duty_category_id”>Duty Category ID: </label>

<input type="text" name="dc_duty_category_id" id="dc_duty_category_id" value="{VALUE FROM DATABASE}"/>

</p>

<p>

<label for=”dc_your_product_description”>Your Product Description:</label>

<input type="text" name="dc_your_product_description" id="dc_your_product_description" value="{VALUE FROM DATABASE}"/>

</p>

<p>

<label for=”dc_classification_request_id”>Your Classification Request ID:</label>

<input type="text" name="dc_classification_request_id" id="dc_classification_request_id" value="{VALUE FROM DATABASE}"/>

</p>

Step 2: Finalizing implementation

Actions for the second implementation step:

Put the remaining code below your new input fields:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

var dc$ = jQuery.noConflict();

function dc_LoadWidget(){

        var apiKey='{API KEY}'

        var dcIdInputField=’dc_duty_category_id’

        var dcDescInputField=’dc_your_product_description’

var dcIdClassificationRequestInputField='dc_classification_request_id'

        var widgetMountPointId='dc_UniversalWidget'

   var host=(("https:" == document.location.protocol) ? "https://www.dutycalculator.com/" : "http://www.dutycalculator.com/")

   var url = host+"widget_universal_classify/"+apiKey+"/get-widget/?dc_id_input="+dcIdInputField+"&dc_desc_input="+dcDescInputField+"&dc_classification_request_id_input="+dcIdClassificationRequestInputField+"&callback=?"

        dc$.getJSON(url, null, function(response) {

           dc$('#'+widgetMountPointId).html(response.html)

        });

}

dc$(document).ready(function(){

        dc_LoadWidget()

})

</script>

<div id="dc_UniversalWidget">Loading universal classification widget...</div>

Step 3: Making sure that all works

You should be able to see the widget, select relevant categories from it and when you hit “confirm classification” button - it should automatically populate your input fields (created on step 1).

Next time when you visit product edit page - you should be able to see the changes.

You may leave input fields (from step 1) visible or hide them by setting the attribute “type” from “text” to “hidden”. If product add page is different from product edit page - the above instructions should be applied to it as well.