Club Based Settings

Most of the settings for a club are managed in the Vinoshipper Producer Tools. This is located at each individual club's "Settings" tab and include allowing gift memberships, allowing pickups, and other settings.

The Club Registration form will automatically adapt to settings made on Vinoshipper without the need of modifying your website's code.

HTML Settings

The following settings can be set for each individual HTML code and are reactive.

data-vs-club-allow

Type: Numbers, separated by commas.
Example: 123,124,125

This will filter of available clubs for the form.

Providing one club number will lock the form to register for that single club. The user won't be able to select any other club from this form.

Providing more than one club will will narrow down the list of available clubs. The user will need to select a club, unless the data-vs-club-default setting is provided.

Important: Clubs that are private or archived will never display in this form, even if the club ID is included in this setting.

Example

<!-- This will lock the form to only club #123. -->
<div class="vs-club-registration" data-vs-club-allow="123"></div>

<!-- This will lock the form to only clubs #123, #124, and #125 -->
<div class="vs-club-registration" data-vs-club-allow="123,124,125"></div>

data-vs-club-default

Type: Number, optional.

Pre-selects a club as the default selection. If data-vs-club-allow is also defined, the default club must be included in the list.

Example

<!-- This will pre-select club #123, but all public clubs are selectable. -->
<div class="vs-club-registration" data-vs-club-default="123"></div>

<!-- This will pre-select club #123 and clubs #123, #124, and #125 will be selectable. -->
<div class="vs-club-registration" data-vs-club-default="123" data-vs-club-allow="123,124,125"></div>

data-vs-club-headline

When defined, overwrites the headline of club signup.

If the value is defined as 0, false, or null, then NO headline will show up on the club registration form.

Example

<!-- This will replace "Join the Club" to "Register for our Clubs!" -->
<div class="vs-club-registration" data-vs-club-headline="Register for our Clubs!"></div>

<!-- This will remove the "Join the Club" headline and no headline will display. -->
<div class="vs-club-registration" data-vs-club-headline="false"></div>

data-vs-theme

Type: String | undefined
Default: undefined

Overwrites the global theme setting for the particular component instance.

Methods

clubRegistrationClubSet

clubRegistrationClubSet (clubId : number, domId : string | undefined = undefined) : void

Sets the given club ID to either all rendered Club Registration instances, or to a specific ID.

If domID is not defined, ALL instances of club registration elements will be set to the given club ID.

This method is located in the main Vinoshipper window object. In order to properly address the correct window object, we highly recommend calling window.top.Vinoshipper.

/** This line sets all currently rendered Club Registration components to a club ID of 1. */
window.top.Vinoshipper.clubRegistrationClubSet(1)

/** This line sets the Club Registration component with the ID "club-registration-main" to a club ID of 1. */
window.top.Vinoshipper.clubRegistrationClubSet(1, 'club-registration-main')

If the club ID is not in the list of clubs, the club will not be set and no error will be returned. This can happen when:

• The club ID doesn't exist in the producer account.
• The data-vs-club-allow attribute is defined and does not include the given club ID.