Widgets

Include the Commerce7 Javascript and CSS snippets to every page on your site.

CSS

Add the following snippet to the </head> tag.

<link href="https://cdn.commerce7.com/beta/commerce7.css" rel="stylesheet">

Javascript

Add the following snippets above the closing </body> tag. Replace the tenantId with the id provided to you.

<script type="text/javascript" src="https://cdn.commerce7.com/beta/commerce7.js" id="c7-javascript" data-tenant="tenantId"></script>

Login/Logout at the top of the page.

(Will output "Hello Andrew | Logout") for a logged in user.

<div id="c7-login"></div>

Side cart where you want a cart to show on a page.

<div id="c7-cart"></div>

Output a personalization block on the homepage or other page.

Make sure you inject your personalization block code in the data-block-code.

<div class="c7-personalization" data-block-code="homepage"></div>

Output a list of products on a homepage or other page.

Make sure you inject your collection slug in the data-collection-slug.

<div class="c7-product-collection" data-collection-slug="slug"></div>

Output a button that will show either "Join Now" or "Edit Membership" based on customers status and a club.

Make sure you inject your club slug in the data-club-slug.

<div class="c7-club-join-button" data-club-slug="slug"></div>

You may optionally pass in a data-delivery-method="Pickup" to preset the signup to pickup.

Create a "buy" button on a product where the product is designed in the CMS.

Make sure you inject your sku in the data-sku or product slug in the data-product-slug.

<div class="c7-buy-variant" data-sku="sku"></div>

or

<div class="c7-buy-variant" data-product-slug="slug"></div>

Create a quick shop page with a list of products.

Make sure you inject your collection in the data-collection-slug.

<div id="c7-quick-shop" data-collection-slug="slug"></div>

Add a reservation widget anywhere.

This is ideal if you have a page talking about each of your reservation tastings and tours. Make sure you inject your reservation type slug in the data-reservation-type-slug.

<div class="c7-reservation-availability" data-reservation-type-slug="slug"></div>

Subscribe form anywhere on your site.

If you just want email use something like this

<div class="c7-subscribe"></div>

If you want firstname, lastname, and email try something like this

<div class="c7-subscribe" data-has-name-fields="true"></div>

General form anywhere on your site.

If your building a form in the 'marketing / form' area

<div class="c7-form-wrapper" data-form-code="code"></div>

You can pre-populate both meta data and questions in the forms by doing something like this:

<div class="c7-form-wrapper" data-form-code="code" data-field-meta-metacode="value" data-field-question-questioncode="value"></div>

Create account anywhere on your site.

If you want to create your own page for a create account, this widget will work

<div id="c7-create-account" data-redirect-to="/profile"></div>

Have a login anywhere on your site.

If you want to have a login form anywhere on your site, this widget will work

<div id="c7-login-form" data-redirect-to="/collection/wine"></div>