WMX Part 2 — How to build a Membership site with Webflow, MemberStack, and Xano

Welcome back! In this tutorial, we'll continue our exploration of the powerful integration between Webflow, Memberstack, and Xano. If you haven't already, I highly recommend watching Part 1 where we covered setting up the foundation and listing items based on membership.

Now, let's take it a step further by creating a single item view, allowing users to favorite items and add comments. Buckle up, because we're about to unlock some really cool functionality!

Setting Up the Single Item Page

First, let's create a new page in Webflow called "item". This will be the destination when a user clicks on an individual item from the list view.

1. Add a container div to the page, and give it an ID like "itemContainer". This is where we'll inject the item details.
2. Copy the sample card from the list view and paste it inside the "itemContainer" div.
3. Add the following JavaScript to the page:

// Get the item ID from the URL
let myURL = new URL(window.location.href);
let id = myURL.searchParams.get("id") || "1";

// API endpoint to fetch a single item
const itemUrl = "https://YOUR_XANO_API_ENDPOINT/items/" + id;

// Function to fetch and display the item
function getItem() {
 const xhr = new XMLHttpRequest();
 xhr.open("GET", itemUrl);
 xhr.onload = function () {
 if (xhr.status === 200) {
 const data = JSON.parse(xhr.responseText);
 const itemContainer = document.getElementById("itemContainer");
 const card = itemContainer.getElementsByClassName("sample-card")[0];
 card.getElementsByTagName("img")[0].src = data.banner;
 card.getElementsByTagName("h3")[0].textContent = data.name;
 card.getElementsByTagName("p")[0].textContent = data.description;
 }
 };
 xhr.send();
}

// Call the getItem function after a short delay
setTimeout(getItem, 250);

This JavaScript fetches the item details from the Xano API based on the item ID in the URL. It then populates the sample card with the item's banner image, name, and description.

4. In Xano, create a new API endpoint called "Get Single Item" that fetches a single record from the "items" table based on the provided ID.
5. Replace the placeholder YOUR_XANO_API_ENDPOINT in the JavaScript with your actual Xano API endpoint URL.
6. Publish the changes, and you should now be able to click on an item from the list view and see the single item page with the corresponding details.

Adding Favoriting Functionality

Now, let's enable users to favorite items. We'll create a "Mark as Favorite" button that submits a form to Xano, storing the favorited item.

1. In Webflow, add a form block with a submit button labeled "Mark as Favorite" inside the "itemContainer" div.
2. Add three hidden fields to the form:

• itemId (passes the current item ID)
• formType (differentiates between form types, e.g., "favorite")
• webflowMemberId (passes the user's Webflow member ID)

<input type="hidden" name="itemId" data-name="Item ID" value="{{item.id}}">
<input type="hidden" name="formType" data-name="Form Type" value="favorite">
<input type="hidden" name="webflowMemberId" data-name="Webflow Member ID" value="{% static_member_info 'id' %}">

3. In Webflow's project settings, create a new webhook that triggers on form submissions. Initially, use a service like webhook.site to inspect the payload sent by Webflow.
4. In Xano, create a new API endpoint called "Mark as Favorite" with the following logic:

• Retrieve the Xano member ID based on the webflowMemberId from the payload.
• Create a new record in a "favorites" table, mapping the member ID and item ID.

5. Replace the webhook.site URL with your Xano API endpoint URL in Webflow's webhook settings.
6. Publish the changes, and you should now be able to favorite items by clicking the "Mark as Favorite" button on the single item page.

Adding Commenting Functionality

Finally, let's allow users to leave comments on items. We'll create a comment form and display existing comments from Xano.

1. In Webflow, add a new form block with a textarea for the comment and a submit button labeled "Post Comment".
2. Add the same hidden fields as in the favoriting form (itemId, formType, webflowMemberId), but set the formType value to "comment".
3. Below the comment form, create a container div with an ID like "commentsContainer" to display existing comments.
4. In Xano, create a new API endpoint called "Post Comment" with the following logic:

• Retrieve the Xano member ID based on the webflowMemberId from the payload.
• Create a new record in a "comments" table, mapping the member ID, item ID, and comment text.

5. Modify the existing "Get Single Item" API endpoint to include the comments associated with the item.
6. Update the JavaScript on the single item page to populate the "commentsContainer" div with the comments retrieved from the Xano API.
7. Publish the changes, and you should now be able to leave comments on items and see existing comments displayed on the page.

Congratulations! You've successfully created a single item view with favoriting and commenting functionality, seamlessly integrating Webflow, Memberstack, and Xano. This powerful combination unlocks endless possibilities for building dynamic and feature-rich web applications without writing a single line of code.