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.
Front-end V2 is only compatible with Commerce7 Payments. For more information on Commerce7 Payments and how to sign up, please click here.
<link href="https://cdn.commerce7.com/v2/commerce7.css" rel="stylesheet">
If you copy and paste the entire snippet below, remembers to also update to use your tenantID.
- /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.
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.
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.
hasLink="true"has been replaced with
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
- New: Use
displayType="One|All"to display all of the images or a single image
Note that not all of the same widgets are available in V2, you can review the full list of available widgets here.
Updated 4 months ago