Configuring the IQ Connect Widget Code

Configuring the IQ Connect Widget Code


When setting up the IQ Connect Widget, you need to provide IQ with the name of the domain(s) that you are using to host the widget so we can Whitelist them within the database. (eg. www.YourCoDomain.com)

 

IQ will provide the HTML code that needs to be embedded into your web page(s).

Note – we do not style the widget. Any styling applied is done from your CSS for your site.

 

The Widget code is made up of four parts that we are concerned with; comments appear after //

 


The first part is the <head> part.

 

<head>

<title>Widget</title>

<link href=" https://gpo.printiq.com/bundles/css/cartwidget " rel="stylesheet" type="text/css
" />

>

<link href=" https://gpo.printiq.com/bundles/css/clientwidget " rel="stylesheet" type="text/css
" />

>

" />

 

</head>

 

This should be embedded into the <head> section of your web page.

There are NO edits required for these lines.

 




The second part of the Widget code defines the Widgets.

The order of these 2 lines will dictate the order of the Cart and Product as they appear on the Web page.

 

<div id="myCartWidget" class="piq-cart-widget-container"></div>

<div id="myClientWidget" class="piq-widget-container"></div>

 

Again, NO edits required for these lines

 





The third part of the Widget code is used to configure the Carts ’  behaviour.

 

window.CartWidget_Config = PrintIQ.CartWidget.Init({

appKey: "ABCDEFGH-1234-IJKL-5678-MNOPQRSTUVWX",        // appKey from tblAPI_Application for CART widget

UserId: "ZYXWVUTS-9876-RQPO-5432-NMLKJIHGFEDC",        // udUserID from tblUserDetail for WIDGET user

container: document.getElementById("myCartWidget"),

hideCartIfEmpty: false ,                                              //when true, hide the cart icon when there are no products

useCookies: true ,                                                    //when true, users cart will be persisted across page refresh

checkoutUsesSimplified: true                                         //when true, user will be taken to QuoteDetails page, otherwise they’ll be taken to the simplified page with their product set

includeGst: false 

 

The first four rows must not be changed, or the Widget will not work.

The only settings to be changed are highlighted above.

 


When making changes to these settings there are a few rules you must adhere to:

·         They MUST be in lower case
·         They MUST have a comma after them
·         The LAST setting in this part does NOT have a comma after it.
·         The setting keyword MUST use a capital letter for each new ‘Word’ within it – except for the first letter.





 
The final part of the Widget code is where the main Widget behaviour is configured.

 

container: document.getElementById("myClientWidget"),         // where to build the widget

appKey: "A1B2C3D4-E5F6-G7H8-I9J0-K11L12M13N14",               // appKey from tblAPI_Application for Client Widget

userId: "ZYXWVUTS-9876-RQPO-5432-NMLKJIHGFEDC",               // udUserID from tblUserDetail for WIDGET user

treeNodeId: null,                                             //tree node to pre-select

showTreeNodeSelector: true,                                   //allow user to select different tree nodes (visible yes/no)

isParentTreeNodeSelected: false,

shortCodes: "",                                               //short codes which pre-select various options

showSignIn: true,                                             // Allows user to login to Widget screen to get their pricing.

showPrice: true,                                              //user can show price and then proceed to quote, else user will proceed to quote and see price in PIQ

includeGst: false,                                            //include GST in the price shown to user

showKinds: false,                                             //prompt user for number of kinds

kindsLabel: "Versions",                                       // string, sets the label for kinds control

showOtherQuantity: true,                                      // Allow 'Other' quantity

showAnotherProductButton: true,                               // Used when you are not using the Cart. Add to Cart becomes ‘Another Product’

delayAddingProductToCart: true,                               // Prevents the products being added to the Cart automatically

allFiltersMandatory: true,

allFiltersMandatory_ErrorMessage: 'Please fill out all selectors',

clearFilterValuesOnProductChange: false,               // Whether or not to clear selected values. False allows user to order multiple 'kinds'

clearSubsequentFiltersOnFilterOpened: true,                   // when True it resets all the following filters on the Widget

quantitiesBasedOnTreeNode: false,                      // Determines whether to use the quantity list or the quantities on the product CSV.

hideGetPriceButtonWhenPriced: false

 

Note: The same editing rules specified above apply to these entries.

 

There is nothing to edit on the 1 st 3 lines above.



treeNodeId
 Options for this field are a Tree Node ID or ‘NULL’

The Tree Node ID is the ID number of the product on the Product Category. Obtain it from Admin ==> Factory Capabilities ==> Manage Product Categories and open the relevant node.

The product ID ( circled) can be seen to the left of the product name when the node is opened.

 

 








If set to NULL the whole tree is presented to the online user, allowing them to drill-down into the product(s) they wish to access.

When set to a product category ID number, the Widget opens up with this product selected.
See related settings isParentTreeNodeSelected and showTreeNodeSelector
below.

 

showTreeNodeSelector
will show or hide the product selector. If your web site has separate pages for each product, you may wish to hide the Product Selector altogether. This setting requires that the treeNodeId setting has a value that points to a simplified product session.

 

isParentTreeNodeSelected
‘false’ allows the user to navigate away from the product set on the treeNodeId setting above.
‘true’ prevents the user from going higher in the product category. When treeNodeId is set to null, this setting should be set to false.

 

shortCodes
Located under the menus Admin > Factory Capabilities > Short Codes
These allow you to set ‘default’ filter values for the Widget products.

 

showSignIn
This turns on or off visibility of the ‘Guest’ login button under the cart.

 

showPrice
Turns on pricing visibility. Some sites may wish to ‘vet’ potential customers before exposing their pricing.

 

includeGst
Is the price shown to include GST. Most sites set this to false.

 

showKinds
Expose the ‘Kinds’ field. Again this option is set to false on most Widget sites.

 

kindsLabel
Allows renaming ‘Kinds’ (to ‘Versions’ for example)

 

showOtherQuantity
Allows the user to select ‘Other’ and free type in a quantity.

 

showAnotherProductButton
When Cart is active, this button is Add to Cart. If the cart is NOT active this button becomes ‘Another Product.
 

delayAddingProductToCart
If set to false, the products are added to the cart as soon as a price has been generated.
 

allFiltersMandatory
Whether or not all filters are required to be selected.
 

allFiltersMandatory_ErrorMessage
Message to display if the above setting is true and not all filters have been selected.
 

clearFilterValuesOnProductChange
True clears all the selected filters when the product is added to the cart. If false, the filter values are retained allowing the user to make a minor change and add it to the cart again.
 

clearSubsequentFiltersOnFilterOpened
This option will control resetting filters below a changed filter. This forces the user to re-select filters that may have become invalid due to a previous filter changing.
 

quantitiesBasedOnTreeNode
Determines if the quantity list should use the list specified on the Tree Node, or use the quantities uploaded with the product definition.
 

hideGetPriceButtonWhenPriced
As it says, hides the Get Price button when the product has priced.


Please note single products and kits are not supported through the widget                                                 


    • Related Articles

    • IQconnect OnlineWidget Setup

        IQCONNECT SMARTSITE MODULE   OVERVIEW IQconnect SmartSite solves the age old problem of how to take your complex print business online and offer print products with all their diversity. With SmartSite you use the right tool for the right job. This ...

    • IQconnect-XMPie

      IQconnect-XMPie Overview IQconnect-XMPie allows you to connect XMPie directly to printIQ via an XML push. With this seamless integration printIQ will consume the XMPie XML and generate a Job or Sales Order (pick & pack) directly in printIQ. printIQ ...

    • IQconnect-Esko Product Setup scenario

      High level overview of workflow scenario Static Products may be ordered via the Simplified Products screen. Users may filter by specific Site or Customer, and then navigate via categories down to Product Ordering level. Users may also Search via the ...

    • IQconnect-Esko module

      The IQconnect-Esko module utilises printIQ's existing Production Integration API to send and receive information to Esko Automation Engine. The Production Integration API will send Job XML and Quote Artwork from the printIQ site to an FTP server on ...

    • IQconnect-Enfocus SWITCH on Simplified and Custom Quoting

      High Level Overview The IQconnect-enfocus SWITCH module allows administrators to integrate an Enfocus workflow within printIQ. By combining printIQ with the Enfocus product bundle you have the framework to build a dedicated workflow to match a range ...