Introduction

The Vinoshipper Injector provides an easy way to implement Vinoshipper into your website.

By installing the Injector, your website will use the Vinoshipper Cart and allow you to implement components such as the Product Catalog, Available In, Club Registration, and Add To Cart where ever you want.

The Injector is actively maintained by Vinoshipper and will grow and adapt as your business grows, including new components and as your product offerings grow.

Implementing the Vinoshipper Injector

To use the Vinoshipper Injector, you will need an Account ID. This is a number made available to producers on the Vinoshipper platform, located at Account -> Profile in the Vinoshipper Producer login.

You can also find customized code samples under Account -> Integration - Injector. If you're a developer working for a producer, you only need the Account ID and this documentation.

Code examples using the Account ID will be denoted as 000. Replace this number with your Account ID.

Upgrading from a previous version?

If you are upgrading from a previous version, please follow the guide Transitioning from Previous Versions.

Injector Code

The following code block is needed in <body> of the HTML. This code must run in every page view only once.

Important: Replace 000 with your Account ID.

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

With this code, the Vinoshipper injector will load with default settings and include the Vinoshipper Cart and Cart Button. The injector will also render any additional Vinoshipper components defined in your HTML.

Instructions for Hosted Services

Theming & Styling

Vinoshipper Injector offers a simple and advanced ways to style Vinoshipper components to meet your needs. Checkout Styling to extend the look of your components.

Configuration

If you wish to extend the configuration of the Injector, including changing the basic color theme of Vinoshipper components, check out the Configuration documentation.

Check for Errors

When installing the Injector, it's highly recommended to open the developer console in the browser. The Vinoshipper Injector will report any errors and instructions to remedy issues.

HTML Code

To complete your Vinoshipper integration, you will need to include HTML code with the components you want. You can use as many of these components as you desire.

Product Catalog
- Provides a catalog of products that are approved for sale on the Vinoshipper platform.
Available In
- Renders a list of states and other conditions in which the producer can ship alcoholic products. If the availability of states changes for the producer, the widget will automatically update.
Add To Cart
- For more control per-product, you can include just the product quantity and button to add products to a cart.
Club Registration
- For Vinoshipper Club registration, you can provide a form for customers to sign-up or gift a club.