Header nav

Both the Logged In and Logged Out header navigation groups can be found in the Header component inside the states div. I've simply set the defaults using the Display property here.

Auth Modals

All Auth Modals can be found at the bottom of any page on site inside the Auth Modals component - Log In, Sign Up, and Forgot Password, respectively.

I've applied Interactions to all Log In and Sign Up buttons on site to open the appropriate Auth Modal, as well as their internal interactions.

Favorites

Use the class is-active to toggle the favorited state. The above example icons use the utility static class just for this guide.

Loading States

Use the class is-loading to toggle the shimmer skeleton loading state on any block element.

Use the class is-loading to toggle the spinner loading state on elements with the class of button only.

The elements will be covered by pseudo elements that loop a CSS animation, which can be found in the Global Styles component at the top of any page.

Offerlist Filters

I opted to replace the standard checkboxes as well as the range sliders for button style checkboxes for simplicity. All active/inactive states are handled here in Webflow currently, let me know if you need guidance for any reason, all custom CSS styles can be found either in the global site settings or the Global Styles component at the top of any page.

Logged in / out component states

I've wrapped components & groups of elements that belong to the logged in / logged out states in divs with the logged-in and logged-out classes, using the Display property to show/hide the states site-wide. This is my test setup for pre-Wized, I realize that structure might need to change for your functionality - let me know.

Both classes are on blank divs here and in the Navigator panel for easy access, though one will be set to display: none at any given time.
‍

Product Page

The functionality for the Purchase / Sample variant is simply that when Sample is selected, the Quantity field is greyed out and inactive, with the value defaulted back to 1.

The inactive state class for the number field is is-disabled, and the active states for the Purchase and Sample buttons is is-active.

Dashboard

I've done my best to provide template elements for all dashboard pieces. Let me know if anything is missing or needs a different setup.

On the Calculator, I've provided the date picker field functionality, as well as currency formatting on the appropriate fields. If these work for y'all great, if not let me know.

All code for these can be found on the Customer Dashboard > page settings Custom head and body code.

I've left duplicate cards where needed to showcase the different states for each page's items (Complete, in process, etc.)

Questions

Do we need cookie consent on the site? I have it set up and hidden currently.

Do we need images or any assets for the products to be hosted here on the new Webflow project, or will they be hosted elsewhere as a part of your app setup?

What's not done

Migration / export of current products data (coffees, origins, anything to do with products), since it will not be housed here I did not pull it from the current site. Easily done with CMS Export