If you're working with a site currently using Version 1, there are some changes that you'll need to make to move them over to Version 2. If you're starting from scratch, we recommend using the setup process here.

📘

Payment Gateway

Front-end V2 is only compatible with Commerce7 Payments. For more information on Commerce7 Payments and how to sign up, please click here.

🚧

Wordpress Plugin

If you're currently using the Wordpress plugin, you'll need to go to the plugin settings and select V2 from the list and you should skip the first two steps (updating the Commerce7 snippets and routes).

Update the Commerce7 Snippets

Update the URL in both the CSS and Javascript snippets to reference Frontend V2.

CSS

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

Javascript

If you copy and paste the entire snippet below, remembers to also update to use your tenantID.

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

Routes

• /checkout/* now houses all Checkout experiences; this includes products, club signup, and reservation booking. If you aren't doing so already, we recommend creating and using a template that's completely blank for these pages.
• /club/* has now been updated to /club and is optional page. Use it with the <div id="c7-content"></div> tag to automatically have available club types displayed on the page or you can create a custom page to list clubs and use either the Club Join widget or link directly to the Club URL for signup.
• /reservation/* has now been updated to /reservation and is optional page. Use it with the <div id="c7-content"></div> tag to display reservations by default or you can add the Reservation widget (coming soon) to any page.

You can find a list of all routes here.

CSS & Styling

While there are similarities between the HTML structure and class naming between the two versions, Frontend V2 is a completely rebuilt version of the ecommerce, checkout, and account tools so any changes previously made to the styling of Frontend V1, will need to be re-created in Frontend V2.

Through the code, you'll see that we've added quite a few more classes giving you the ability to target your styles more precisely and make more customizations to the overall look and feel. We've also added CSS variables for styles that we think will be changed most frequently. This will allow you to easily update the general styles without having to dig around and search for specific classes to overwrite.

With the change of the HTML structure, we've added improvements for accessibility. This is something you'll want to keep in mind, as some extra HTML and CSS has been added specifically for screen readers.

Learn more about overriding styles in version 2 here.

Product Tags

There have been some updates made to the product tags and properties. While we've added some new capabilities such as the ability to output raw data, there are some tags that are still in progress and others that are not currently available. A summary of the changes are below, but you can review all of the documentation for V2 Product Templates here.

Updates

<c7-product-title>

• Change: hasLink="true" has been replaced with linkType="None|Window|Ajax

<c7-product-image>

• Change: image="1|2|3|etc" has been updated to index="1|2|3|etc (with the index starting at 1)
• New: Link type can now be passed in through linkType="None|Window|Ajax"
• New: Use displayType="One|All" to display all of the images or a single image

Coming Soon

• <c7-product-allocation>
• <c7-collection-filter

Unavailable

• <c7-product-link>
• <c7-product-type>
• <c7-product-event-date>
• <c7-product-event-time>

Widgets

Note that not all of the same widgets are available in V2, you can review the full list of available widgets here.