How to set redemption limits for deals in a Webflow e-commerce coupon site using Memberstack? Answered

Post author
Julio Esparza Avila

Hello everyone,

I am creating an e-commerce coupon website similar to Groupon and I am trying to achieve a specific functionality.

Users will have two plans free plan( limited deals) and a Paid plan ( full access to all deals). This is possible via member-stack. All deals will be free and are redeemable via a button on each cms item/or e-commerce item when they click on a button for each deal to redeem it a pop up will appear to claim the deal.

The problem I have is that I would like for the deals to only be able to be redeemable once per user or if possible have a limit of times a user can redeem the deal. The purpose is we don’t want users to depend on the deal to go back to the business.

I am not much of a coder and I am sure there might be a solution available via custom code and using make but I have spent a lot of time already learning webflow and really need some help trying to get this done.

I am willing to hire someone to do the code for me and help me with this functionality or if anyone knows of a solution for me that I can go learn and watch some sort of videos or so to learn how to apply it I am open for help. This has been a dream business for me and this is the final step of the puzzle for me. I don’t want to use Wordpress as I believe in webflow and member-stack and think this could be possible here.

Comments

2 comments

  • Comment author
    Chukwudi

    Hi Julio,

    You can achieve this with Memberstack DOM API, custom field, and some Javascript code.

    1. You'd have to create a custom field in your Memberstack dashboard to keep track of the redeemed deal. In my example, I called it click-count.
    2. You'd have to give the redeem button an ID. In my example, I called it redeemButton. So this button can be set to be hidden or the click event turned off (as shown in my example) based on the click-count field which holds the number of times the item has been redeemed.

    The following code snippet below can then be added to the script section of your page.

    In summary, what happens is that by default, the click-count custom field for every member would be empty. So once they redeem the deal by clicking on the button, it updates the custom field to 1. Once this is done, they can't redeem a deal anymore as the button becomes unclickable afterward.

    Feel free to modify the code to suit your needs or DM me if you need help with anything else.

    <script>
    document.addEventListener("DOMContentLoaded", async function() {
    // global variable that will be increased on click.
    var clickCount;
    const memberstack = window.$memberstackDom;memberstack.getCurrentMember().then(async ({ data: member }) => {
        if (member) {
            if (member["customFields"]) {
                // gets the click count field info from memberstack or starts with 0 if not found.
                clickCount = member["customFields"]["click-count"] || 0;
                console.log("memberstack count: " + clickCount);            if (clickCount == 1) {
                   document.getElementById("addCount2").removeEventListener("click", clickCounter);
            console.log("Clicks turned off for clickCounter");
        }
    }
                    
                }// adds event listener to button with the addCount2 id.
                document.getElementById("redeemButton").addEventListener("click", function () {
                    clickCounter(member);
                });
            }
        }
    });async function clickCounter(memberstackMember) {
        // increments the clickCount number by 1.
        clickCount++;
        console.log("current count = " + clickCount);// updates the members profile if clickCount is equal  less than 1.
        if (clickCount < 1) {
            try {
                await memberstack.updateMember({
                    customFields: {
                        "click-count": clickCount
                    }
                });
            } catch (error) {
                console.error('Error updating member data:', error);
            }
        } else {
            document.getElementById("redeemButton").removeEventListener("click", clickCounter);
            console.log("Clicks turned off for clickCounter");
        }
    }});
    </script>

    I hope this helps

    0
  • Comment author
    Julio Esparza Avila

    Thank you so much I really appreciate it. I will try this out. You are amazing.

    0

Please sign in to leave a comment.