Guides

Transitioning from Previous Versions

Suggest Edits

❗️

Vinoshipper Injector V3 is unsupported; will be removed without warning

After over a decade of use, all previous versions of the Injector will stop working. You must upgrade to V4 as soon as possible.

The injector code received a major overhaul in October 2022 to fix long-standing bugs and allow Vinoshipper to adjust for future technology. All previous blocks of JavaScript code from V3 must be completely removed. Some HTML may need to be modified.

Upgrading from Hosted Services

If you are using a supported hosted service, you will still need to remove the previous code and replace with the updated V4 code. The following guides will help you update to V4 with these services.

Note: Wix does not support third-party commerce services and is not supported by Vinoshipper. Only the Vinoshipper Store Link is supported.

JavaScript Changes

🚧

All previous instances Vinoshipper injector code must be removed

If your website previously implemented the Vinoshipper injector, you will need to remove all <script> tags. Only Injector V4 should be used.

The previous Injector code required inclusion for every component used on the site, so the previous code block may appear in more than one place. Be sure to check everywhere!

Removing Previous Code Blocks

Search for instances of the following strings in your code and remove all Vinoshipper Injector <script> tags and their contents:

  • vsWineryId
  • vinoshipper.com/iframe/v3/injector.js
  • vinoshipper.com/iframe/v2/injector.js

For reference, this is a sample of the previous version's code blocks. There are likely differences in your existing code, but Vinoshipper Injector code the looks similar must be removed.

<!-- Vinoshipper Product List Integration -->
<script type="text/javascript">
var vsDisableResize = false;
var vsCssUrl = "/static/css/iframe/v2/wine-cards-regular.css";
var vsWineryId = "000";
function _0x4878(_0x277472,_0x251fd4){var _0x5a5f88=_0x5a5f();return _0x4878=function(_0x487867,_0x571734){_0x487867=_0x487867-0x8d;var _0x177852=_0x5a5f88[_0x487867];return _0x177852;},_0x4878(_0x277472,_0x251fd4);}var _0x1375ea=_0x4878;(function(_0x78b21c,_0x2502ff){var _0x169474=_0x4878,_0x3cbc9=_0x78b21c();while(!![]){try{var _0x203069=-parseInt(_0x169474(0x8e))/0x1+parseInt(_0x169474(0x96))/0x2+-parseInt(_0x169474(0x93))/0x3+-parseInt(_0x169474(0x8f))/0x4+parseInt(_0x169474(0x94))/0x5+-parseInt(_0x169474(0x95))/0x6+parseInt(_0x169474(0x8d))/0x7*(parseInt(_0x169474(0x9c))/0x8);if(_0x203069===_0x2502ff)break;else _0x3cbc9['push'](_0x3cbc9['shift']());}catch(_0x33c7c6){_0x3cbc9['push'](_0x3cbc9['shift']());}}}(_0x5a5f,0x78c0e));function _0x5a5f(){var _0x4e163b=['vsCartId','16rwNHXK','vsCartIdEvent','addEventListener','5586301YdfeMS','17051yIrDbW','2922956aexIzE','cookie','split','indexOf','221088iTyXKW','526420RjWzzR','4648140iqlEsu','778824wpbfaF','detail','length','replace',';path=/;samesite=none;secure;'];_0x5a5f=function(){return _0x4e163b;};return _0x5a5f();}var vsSetC=function(_0x51b8ef,_0x3120d7){var _0x4ae3ba=_0x4878;document['cookie']=_0x51b8ef+'='+escape(_0x3120d7)+_0x4ae3ba(0x9a);},vsGetC=function(_0x24f7ab){var _0x4ed835=_0x4878,_0x2846bb,_0x47a7c9,_0x48bf1e,_0x5e0843=document[_0x4ed835(0x90)][_0x4ed835(0x91)](';');for(_0x2846bb=0x0;_0x2846bb<_0x5e0843[_0x4ed835(0x98)];_0x2846bb++){_0x47a7c9=_0x5e0843[_0x2846bb]['substr'](0x0,_0x5e0843[_0x2846bb][_0x4ed835(0x92)]('=')),_0x48bf1e=_0x5e0843[_0x2846bb]['substr'](_0x5e0843[_0x2846bb]['indexOf']('=')+0x1),_0x47a7c9=_0x47a7c9[_0x4ed835(0x99)](/^\s+|\s+$/g,'');if(_0x47a7c9==_0x24f7ab)return unescape(_0x48bf1e);}},vsCartIdListener=function(_0x4376ac){var _0x5c76bf=_0x4878;!vsCartId&&(vsCartId=_0x4376ac[_0x5c76bf(0x97)],vsSetC('vsCartId',vsCartId));},vsCartId=vsGetC(_0x1375ea(0x9b));window['document'][_0x1375ea(0x9e)](_0x1375ea(0x9d),vsCartIdListener,![]);
</script>
<script src="https://vinoshipper.com/iframe/v3/injector.js" type="text/javascript"></script>
<!-- End Vinoshipper Product List Integration  -->

Removing all previous versions of Vinoshipper Injector JavaScript blocks is required.

Adding Injector V4 JavaScript

Once all the old code blocks are removed, you can now include the new code block. Unlike before, this block of code needs to load only once on the page.

Replace 000 with the Account ID. The value of vsWineryId without quotes replaces 000.

<script type="text/javascript">
    window.document.addEventListener('vinoshipper:loaded', () => {
        window.Vinoshipper.init(000, {})
    }, false);
</script>
<script src="https://vinoshipper.com/injector/index.js"></script>

There are different and optional Configuration parameters available in Injector V4. Some previous settings from v3 are moved to attributes in the HTML code. See each component's documentation for more information.

See more information on installing for hosted services.

HTML Component Changes

The various components will also need HTML changes. Here we'll outline the old components and how to replace the new components.

Product Catalog

Previously known as "Product Cart" or "Product List", the Product Catalog requires changing the HTML code.

<!-- Previous Version, do not use. -->
<div id="vs-winelist"></div>

V4 now uses class names to identify components. This allows for any number of components to be used on the page.

<!-- New Version, List Layout -->
<div class="vs-products"></div>

Cards Layout

Previously a CSS URL was optionally required to change from List to Cards layouts. This is now handled by the optional data-vs-cards="true" attribute, as outlined below.

<!-- New version, Cards Layout -->
<div class="vs-products" data-vs-cards="true"></div>

Custom & Brand Catalogs

Previously, the global variable vsWineListId was used to define a custom catalog. This is now defined as an HTML attribute. We use 000 as an example.

<div class="vs-products" data-vs-list="000"></div>

Additional Configuration

See Product Catalog for a full explanation of additional options.

Available In

The Available In component is new to Vinoshipper Injector V4. If you were manually including a list of shippable states in your website, we highly encourage you to use the new Available In component instead.

This widget constantly updates the states licenses and delivery methods available with your Vinoshipper account without updating your code for each change. Allowing for always accurate information to your customers without making additional code changes.

Add To Cart

The HTML code for "Add To Cart" buttons has some minor changes.

The data-* attributes changed to data-vs-*:

  • data-product-id="" -> data-vs-product-id=""
  • data-product-units="" -> data-vs-product-units=""
  • data-account-id="" -> data-vs-account-id=""
<!-- Previous version, do not use -->
<div class="vs-add-to-cart" data-product-id="000"></div>

<!-- New Version -->
<div class="vs-add-to-cart" data-vs-product-id="000"></div>

See Add To Cart for a full explanation of additional options.

Club Registration

Previously known as "Wine Clubs", Club Registration requires changing the HTML code.

<!-- Previous version, do not use -->
<div id="vs-wineclub-signup"></div>

<!-- New Version -->
<div class="vs-club-registration"></div>

See Club Registration for a full explanation of additional options.

Check for Errors

Vinoshipper Injector V4 will check for problems when loaded into your website. Make sure to navigate to every page on your website to insure every component is working properly.

Developer Tools

You will need to open your browser's development tools (also known as Inspector Tools) and view the browser's console to see them.

  • On Windows, most browsers will open the Developer Tools when hitting the key: F12
  • On macOS, most browsers will open the Developer tools when hitting the key combination: Fn + F12

Injector V3 Still In Use

If you have Injector V3 still on your website, your console will display this error:

Console output when previous Injector version is detected.

This means that your website still has the previous version of Injector on your website. Continue looking for and remove any code from the previous version.

Multiple Injector Versions

If you have both a previous and current versions running at the same time, your console will display this error:

This means that your website still has the previous version of Injector on your website. Continue looking for and remove any code from the previous version.

More Than One Current Version

If you load the current Injector more than once, you will see this error message:

This means you have included the current version of the Injector code more than once. You must include the JavaScript code only once for the entire website.

Updated 5 months ago