Skip to content
This repository was archived by the owner on Dec 22, 2021. It is now read-only.

Commit 4397833

Browse files
author
Hannes Schippmann
committed
Generated gh-pages for commit f38aa05
Merge: 2b861fb 095c107 Author: Hannes Schippmann <hannes@schippmann.tv> Merge pull request #1 from virtusize/feature/move-integration-guide
1 parent a925b5d commit 4397833

26 files changed

Lines changed: 3072 additions & 5 deletions

_sources/ig/integration.txt

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
Integration
2+
============
3+
4+
**Dependencies**
5+
6+
At this moment, the integration has only one dependency, jQuery 1.3 or later.
7+
If jQuery is not found on the page, the integration script will asynchronously
8+
load jQuery from the Google CDN (this will not slow down the page as it is done
9+
asynchronously and most clients already have it cached).
10+
11+
**Asynchronous loading**
12+
13+
All script loading is done asynchronously, minimizing the impact on the load
14+
speed of the product page. The integration snippet is inspired by the
15+
asynchronous loading done by Google Analytics, FB Connect, Google+ and others.
16+
In the unlikely event of Virtusize servers experiencing down time, the product
17+
page will not be impacted other than that the button won't show.
18+
19+
.. _label-single-product-integration:
20+
21+
Single Product Integration
22+
--------------------------
23+
24+
Embedding the integration snippet
25+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
26+
27+
Integrating the Virtusize Widget requires embedding an integration
28+
script on the product page. The code is very similar to Google Analytics
29+
or Facebook Connect.
30+
31+
.. gist:: https://gist.github.com/butschi/5619646
32+
33+
.. note::
34+
Note that line 5 defines an API key to use. The value within quotes should
35+
be your actual API key that you get when you sign up for Virtusize.
36+
37+
38+
Positioning the button
39+
^^^^^^^^^^^^^^^^^^^^^^
40+
41+
The position of the button is configured by including an empty div
42+
element with id "#vs-widget-button-container" anywhere on the product
43+
page.
44+
45+
.. gist:: https://gist.github.com/butschi/5619736
46+
47+
The button will be created inside the #vs-widget-button-container
48+
element. The integration script is responsible for creating the button.
49+
50+
For the standard integration, the measurements are provided to Virtusize via
51+
the Virtusize admin interface (see :ref:`label-providing-measurements`), and
52+
the integration snippet only needs the unique product ID to identify what
53+
measurements to use. That is what line 6 does. The value ``PRODUCT_ID`` should
54+
be the actual identifier of the product.
55+
56+
.. note::
57+
Note that for best results, the product id should be an identifier that
58+
identifies the product regardless of size and color.
59+
60+
No button will be visible on the product page until the integration snippet can
61+
find the measurements for the product (until they are provided to Virtusize via
62+
our admin or via the measurements feed).
63+
64+
65+
Multiple Product Integration
66+
----------------------------
67+
68+
It is possible to have widget buttons for more than one product per page. This
69+
is needed for "Buy-this-outfit" kind of pages, for example.
70+
71+
The integration is very similiar to the one for single product pages. All you
72+
have to do, is supply the product ids and corresponding button position
73+
strategies, to indicate, which button is used for which product.
74+
75+
The ``vsWidgetAsyncInit`` variable, that is a function in the single product
76+
case, also accepts an array of functions.
77+
78+
.. gist:: https://gist.github.com/butschi/5619699
79+
80+
Make sure the products exist in the Virtusize database and the button
81+
containers containers exist on your page.
82+
83+
Assisted Integration
84+
--------------------
85+
86+
Assisted integration is similar to our :ref:`label-single-product-integration`,
87+
but is stripped to the core. This integration is very easy, however it does
88+
require some work on our end. If you are interested in this integration, please
89+
`contact us <http://www.virtusize.com/contact>`_.
90+
91+
.. gist:: https://gist.github.com/butschi/5620294
92+
93+
Once you have embedded the integration snippet, contact us and we will
94+
activate your API key and set up additional parameters.
95+
96+
97+
Using a custom button
98+
---------------------
99+
100+
You can use any DOM element on your website as the Virtusize button.
101+
This gives you full control over the design of the button.
102+
103+
The Virtusize integration script still performs all product data and
104+
environment checks prior to showing the button. The button will behave
105+
the same way as the default one.
106+
107+
.. note::
108+
The button will be set to ``visibility: hidden;`` on load. Only when all
109+
checks pass will the button be shown. To prevent some flickering that may
110+
occur you can set the initial visibility of the button to hidden.
111+
112+
113+
Example integration:
114+
^^^^^^^^^^^^^^^^^^^^
115+
116+
.. gist:: https://gist.github.com/butschi/5684927
117+
118+
Here the convenience method ``setButton(…)`` is used. To find out what other
119+
methods exist on the VirtusizeWidget object, go to :ref:`label-javascript-api`.
120+
121+
122+
Staging Environment
123+
-------------------
124+
125+
We have a staging environment that can be used during the development
126+
and testing phase. Just point the integration script to:
127+
128+
::
129+
130+
staging.virtusize.com
131+
132+
instead of:
133+
134+
::
135+
136+
api.virtusize.com
137+
138+
139+
Here is a sample how to configure this so the environment is controlled
140+
by a variable:
141+
142+
143+
.. gist:: https://gist.github.com/jtsoi/2173ec22f70e8eee5664
144+
145+
146+
Troubleshooting
147+
---------------
148+
149+
Verifying integration
150+
^^^^^^^^^^^^^^^^^^^^^
151+
152+
To check if the integration is successful or not, navigate your browser
153+
to a product page. Append the string ``#hasVsWidget?`` to the url in the
154+
address bar.
155+
156+
For example:
157+
158+
::
159+
160+
http://www.example.com/products/28657
161+
162+
becomes:
163+
164+
::
165+
166+
http://www.example.com/products/28657#hasVsWidget?
167+
168+
Press the enter-key to confirm and then hit the reload button on the
169+
browser to reload the page. If the integration was successful, you will
170+
get a popup indicating precisely that.
171+
172+
Button not showing
173+
^^^^^^^^^^^^^^^^^^
174+
175+
The button is only shown, if there is a valid product found in the
176+
Virtusize database or supplied in any other way. Make sure that there is
177+
a valid product.
178+

_sources/ig/introduction.txt

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Introduction
2+
============
3+
4+
Virtusize is a virtual fitting solution that helps retailers to visually
5+
illustrate the size and fit of clothing online.
6+
7+
Virtusize allows customers to compare specific measurements of an item
8+
they are looking to buy with those of a similar item they already own.
9+
10+
Displaying and overlaying silhouettes of both items then allows
11+
customers to easily compare sizes and choose the one that would fit them
12+
the best. Virtusize is accessed through a button located on the product
13+
page at the retailer.
14+
15+
Read more about Virtusize and our solution at http://www.virtusize.com.

0 commit comments

Comments
 (0)