Technologo vSample Pro, v. 2.1
Overview
vSample Pro solution allows Technologo customer to display the product images with the logo (a Virtual Sample) directly on customer’s website.
Products have to be set up in the Technologo system by the customer prior usage. Desired logo can be uploaded by end user at any time.
Traditional practice was to open a Virtual Sample application in a separate pop-up window or fit it into iFrame.
With Pro solution you place an HTML <img> tag wherever you want directly on your web page, refer its ‘src’ attribute to Technologo, and Virtual Sample will be generated and returned from Technologo as a regular image. By adding the Virtual Sample to the web page, the website owner continues to keep full control over design, structure and functionality of that page.
Starting from version 2, vSample Pro utilizes new technologies such as HTML5 and CORS. That makes implementation much easier without the necessity of using any additional libraries. The simplest demo, which functionality is based on pure JavaScript code only, can be viewed online at:
http://www.technologo.com/eodpro/vSamplePro_v2-Demo-Generic_2-Products.html
or downloaded and opened in the browser on your local computer:
http://www.technologo.com/eodpro/vSamplePro_v2-Demo-Generic_2-Products.zip
Comparison of the simplest “Generic” and “Full” implementations
Generic implementation allows to deploy vSample Pro with minimal time (and functionality).
It displays Virtual Sample using default color/style of the product and applying a default technique. For this you need to know just a product “sku”, which was assign to product during setting it up to Technologo system. This is typically employed on “Standard” items.
Later, depending on your necessity, you can add some additional functionality. In particularly, if product has multiple colors and/or different techniques, you can use them as well. This is what we call Full implementation and while typically deployed on “MAXed” items, can also be used for Standard items.
In other words, Full implementation is just an extended version of Generic one. Working on it you will need to get from Technologo and store somewhere on your side some additional information for each product. That will allow you to display more color/style and technique options for the products.
Generic implementation
You will need to add some additional code to your existing web product pages. This includes the “Logo Upload” form and a JavaScript code that submits selected logo to the Technologo server, receives a response and then replace the original product image with the Virtual Sample.
Using "Logo Upload" form user selects the desired logo file from their computer. User’s click on the Upload Logo button which triggers the JavaScript code to submit the selected file to Technologo server. The file will be saved under a randomly generated name. This name will be returned back to JavaScript in response to logo uploading. JavaScript code, using this name as an URL parameter, will replace the existing product image to the Virtual Sample image with the logo applied.
Our online demo (see location at the top of this document) demonstrates how it works.
Notice that the default product image without logo is not being served from Technologo server (from www.911logo.com in our demo). But as soon as the logo upload has taken place, the image ‘src’ attribute is changed by JavaScript and new URL referencing to Technologo server.
The URL that calls Technologo to generate a Virtual Sample has the next pattern:
http://vscl.technologo.com/EODProManager?action=getProductWithLogo&accid=<customerAccountId>&accesskey=<customerAccessKey>&sku=<productSku> &clickpath=<uploadedLogoFileName> &ver=eodpro&width=<widthOfVS>&height=<heightOfVS>&fixed=true
, where:
accid – your account ID, provided by Technologo; AccountID: 80857658528895
accesskey –provided by Technologo. For the security reasons, this may be changed by Technologo periodically, with the prior notification. Do not hardcode this in URL. Declare this value in your web server environment and add it to URL using the script language (ASP, JSP, PHP and so on); ACCESS KEY: acc975778
sku – product sku which was entered by customer during product setup;
clickpath – the logo file name that was just uploaded and saved on Technologo server. This value was returned back to JavaScript code after logo uploading;
width and height – desired width and height of VS image in pixels. Please use the same values for both of them.
Note. Please note that “accid” and “accesskey” used in our demo code belong to demo account. Each Technologo customer will be provided with their own accid and accesskey which have to be used. Please, implementing Pro solution on your website, don’t use accid and accesskey from our demo code.
Full implementation
The fully featured implementation allows you to use not only default product’s color and technique. You can use all available colors and techniques for Virtual Sample, specified in your Technologo account for each product.
To use another color or/and technique, you just need to add 1 or 2 additional parameter(s) to the link above:
&styleid=<styleOfProduct>
&techid=<techniqueOfProduct>
Online demo can be viewed at:
http://www.technologo.com/eodpro/vSamplePro_v2-Demo-Full_1-Product.html
or downloaded:
http://www.technologo.com/eodpro/vSamplePro_v2-Demo-Full_1-Product.zip
Available values for <styleOfProduct> and <techniqueOfProduct> have to be received from Technologo for each product and stored somewhere on your side. For instance, they can be saved in Database and then read by scripting language used on your website (ASP, PHP and etc.).
This information for each product can be received from Technologo in XML format by calling the next link:
http://www.technologo.com/EODProManager?action=getProductInfo&accid=<customerAccountId>&password=
<customerPassword >&sku=< productSku>
, where:
accid – your account ID, provided by Technologo; AccountID: 97577805291034
password – The PRO Upgrade password (Not the vSAMPLE password), provided by Technologo in order to access this information; PRO PASSWORD: FOCUS51029150
sku – product SKU.
For instance, to receive information for the product used in our online demo (which sku is “demoProd1”) the next link has to be called:
The XML information returned looks like:
<product>
<productSku>demoProd1</productSku>
<fwid>988241646</fwid>
<productType>maxed</productType>
<productStyles>
<style>
<styleId>3808831</styleId>
<styleName>Red</styleName>
…
</style>
<style>
<styleId>4232809</styleId>
<styleName>Blue</styleName>
…
</style>
…
</productStyles>
<productTechniques>
<technique>
<techniqueId>254645</techniqueId>
<techniqueName>Full Colour</techniqueName>
</technique>
<technique>
<techniqueId>268607</techniqueId>
<techniqueName>Embossing</techniqueName>
</technique>
…
</productTechniques>
</product>
As you can see, the <productStyles> section contains a list of styles/colors available. Each of these lists has such tag as <styleId> and <styleName>. <styleId> should be used as a value for ”&styleid=” parameter. <styleName> can be used as a style/color name when you display this style option to the user.
The <productTechnique> section contains list of techniques available. <techniqueId> should be used as an value for the “&techid=” parameter. The <techniqueName> can be used as technique name for this option.
