Guides

Getting Started with Vinoshipper Injector

The Vinoshipper Injector is a tool for including various components for your website. The setup is easy to get going, and extendable for advanced control.

Suggest Edits

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, Announcement, Available In, Club Registration, Product Item, 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

📘

Upgrading from a Previous Version?

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

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.

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

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

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.
    • Defaults include both Available In and Announcement components.
  • Announcement
    • When a producer creates an announcement on the Vinoshipper platform, this component will display and render that announcement with no additional code changes required.
  • 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 component will automatically update.
  • Product Item
    • Renders one product item, similar to the look of Product Catalog.
  • 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.

Updated 4 months ago