Guides

Widgets

Suggest Edits

Use widgets to place specific Commerce7 functionality throughout your website. While you should always include the basic widgets for Account Login and Side Cart, the others are optional ways for you to pull information and functionality from the Commerce7 platform.

All standard Commerce7 pages such as your product list page, customer profile pages, and cart + checkout pages, are automatically generated and output wherever <div id="c7-content"></div> is added to your page HTML. Widgets do not need to be added for these. Learn more here.

Widget List

If you haven't already, include the Commerce7 CSS and Javascript snippets to every page of your site, learn how to do so here. These are needed in order for the widgets to function.

Account Login

  • For a logged out user, this will output a "Login" link
  • For a logged in user, this will output "Hello Andrew" with a dropdown containing the profile pages. If there are any notifications on the account, the user will see a dot to the right of their name.
<div id="c7-account"></div>

Side Cart

  • Place where you want the cart link to appear
  • Clicking the link will open the cart summary on any page
<div id="c7-cart"></div>

By default, the side cart will open on an "Add to Cart" action, but you have the option to manually trigger a cart open or reload with the following:

  • window.c7action.showSideCart(): Open side cart
  • window.c7action.reloadCart(): Reload side cart

Personalization Block

  • Place to output a personalization block on any page
  • Make sure you update the data-block-code to your specific Personalization Block "Code"
<div class="c7-personalization" data-block-code="homepage"></div>

Personalization blocks are a great way to target content based on your specific website user. This content can be set up in the form of products, an upcoming club shipment, text content or a subscribe form.

To learn more about personalization blocks, read our documentation site:

Product List

  • Output a list of products on a homepage or other page
  • Make sure you update the data-collection-slug to use the "Slug" from your specific Collection
<div class="c7-product-collection" data-collection-slug="slug"></div>

Club Button

  • Outputs a button for the user to sign up for a club
  • Make sure you update the data-club-slug to use the "Slug" for your specific Club
  • If the user is logged in and is already signed up for that club, the button will instead display "Edit Membership" and link to the club in their account. 
<div class="c7-club-join-button" data-club-slug="slug" data-join-text="Join Club" data-edit-text="Edit Club Membership"></div>

This widget should be added when you are not using the standard club list page.

Custom Form

  • Outputs forms built under Marketing > Form
  • Make sure you update the data-form-code with the "Code" for your specific form
<div class="c7-custom-form" data-form-code="code"></div>

Pre-Populate Form Values

Optionally pre-populate values for meta data and/or custom form questions by adding the following:

  • Meta Data: Inside the form tag, add data-field-meta-metacode="value", replacing "metacode" with the code of your meta data type and "value" with the value that you want to pre-populate.
  • Questions: Inside the form tag, add data-field-question-questioncode="value", replacing "questioncode" with the code of your specific form question and "value" with the value that you want to pre-populate.

Example

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

Reservation Booking Widget

Use the Reservation widget to display booking for a single type of reservation.

  • Outputs the reservation booking form for a specific Reservation Type with fields for date, time, and number of guests
  • Make sure you update the data-reservation-slug with the end of the Commerce7 "Slug" for your specific Reservation Type
<div class="c7-reservation-availability" data-reservation-type-slug="slug"></div>

Subscribe Form

  • Outputs a simple Subscription form with an email field and Submit button
<div class="c7-subscribe"></div>

Add data-has-name-field="true" to include the customer's full name.

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

Login Form (Page Security)

  • Use this widget to add a login requirement to a page on your site. This widget includes the login form, magic link, and Facebook / Google logins (if enabled)
  • While you can always use the APIs for this, it's easier and more consistent with the rest of the site to use the same login widget.
  1. Create a new login page that will act as the gate keeper for the page you want to secure
  2. Add the widget to the page and update the data-redirect-to URL to where the customer should be redirected to if either they're already logged in OR they log in successfully.
<div id="c7-login-form" data-redirect-to="/collection/wine"></div>

Backend Setup

To set up in the backend and configure specific customer conditions, you need to test to see if a customer exists, if they are logged in, and if they have permission to view the page.

  1. First check for the customer:
    a. On your secured page, test to see if there is a cookie called 'customerToken'.
    b. If there is not a cookie, the user is not logged in and in your backend programming you should redirect them back to the login page (that you just created)
  2. Then access the customer:
    a. If there is a cookie, to get the customer, call the Commerce7 API end point "/customer/self" (API docs here)
    b. In the header, pass 'customerToken' as the authorization and the tenantId as the 'tenant'. (see example below)
    c. The response of this call will be the customer object. The customer object can be inspected for groups, clubs, etc.

Important: On your secure page if the customer is logged in, but the customer does not meet the security requirements (such as they aren't a club member and they need to be a club member) please DO NOT send them back to the login page as it will result in an infinite loop. Instead you need to message them that they don't have the required permissions to visit the page.

The http header should look like this:

headers: {
  Authorization: customerTokenFromCookie,
  tenant: C7TenantId
}

Product Buy Button

  • Use the "Buy Button" to create custom pages that display products such as related wines for recipes, blogs, or highlighting a product on a landing page
  • Outputs the product's add to cart form including multiple SKUs, discounted pricing and action messages (if applicable)
  • Make sure you update the data-product-slug with the end of the Commerce7 "Slug" for your specific product
<div class="c7-buy-product" data-product-slug="slug"></div>

❗️

The "buy" button is not intended for use on standard product list and product detail pages.

We strongly encourage you use Commerce7's product templates for standard product pages as this will not only reduce work for your winery client (instead of having to manage and upkeep the product in 2 places), but will also allow them to make use of built-in tools such as Personalized Collections which will increase their conversion rates.

By opting to build out completely custom product pages (instead of integrating with Commerce7), you make it harder for your clients to take full advantage of the Commerce7 tools.

Updated about 1 year ago