|
| 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 | + |
0 commit comments