I’ve written in to Softr support but not had much success yet. Wondering if the group here can help. This seems like such a basic user flow, I’m surprised that I’m finding it difficult to implement. I’m an experienced dev so custom code or other crazy solutions are welcome.
Here is the user flow we need to implement via Softr:
User visits one of our product pages on SquareSpace (we have ~10 products)
User clicks on the “buy now” button in SquareSpace, user is routed to our Softr checkout page for that product.
If the user is NOT logged in, they should be routed to a page where they can Sign In OR Sign Up, as necessary. Once sign in or sign up is successful, they should be routed back to their original destination page
If the user is logged in, they continue directly to Step 5.
Our Softr product page has two blocks: one that is has the Stripe checkout block for that product, this block is only shown to users that have not already purchased this particular product. The second block has a message that says “You have already purchased this product” and is displayed to users that have already purchased this product. We use Softr Conditional User Group rules to set the user groups based on the “subscription” status.
User makes purchase with checkout block, subscription processed by Stripe, etc.
Here are the problems we are running into:
a) In Step 3, we can use Page Rules for non-logged in users with the unauthorized access setting to route them to a Sign In page. They will be routed back to the original page after sign in. But this does not work for Sign Up.
b) The signin block used to have a destination page setting after sign in, I used some custom code to set the destination page after sign in. This no longer works because the Page Rule over-ride this feature. But the Page Rules are inadequate because they are always driven by user groups.
c) We create 2 user groups for each product: one called “Product A Subscribers” and one called “Product A Non-subscribers”. We do this to hide/show the correct block in step 5.
d) We don’t want the destination page determined by User Groups at all! But since we experimented and set a couple of Page Rules, we can not un-set them!
Basically, we need a way to route a user (through a Sign In or Sign Up if necessary) to a destination page and have this NOT be based on user groups (so we can use User Groups for Step 5 block visibility). If disabling Page Rules or using custom code is needed, that is ok.
Thank you for sharing that. I didn’t use it eactly, but it sent me down the right path in using a cookie!
I got it working for our app using this strategy:
For each of our product stripe checkout pages (pages that require the user to be logged in), I set the page visibility to “Logged In Users only”
I set a Page Rule that all unauthorized access for Non-logged in users get routed to our Sign In page.
On our sign in page, I added a custom code block that saved the original page destination (the checkout page) into a cookie.
I set Page Rules for Logged In users upon Sign In or Sign Up to be sent to a page called /router in our app.
The /router page in our app is nothing but a custom code block that looks for the cookie that was set in Step 3. If found, it routes the user to that original page the user was trying to navigate to. The user never sees this /router page.
Logged in user gets to their original page destination
Sign In page custom code:
<script>
const set_destination_cookie = function() {
// Function to get the value of a query parameter
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
// Function to set the cookie
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "; expires=" + date.toUTCString();
document.cookie = name + "=" + value + expires + "; path=/";
}
// Get the path name from the URL
const page_name = window.location.pathname;
// Get the "next-page" query parameter
const next_page = getQueryParam('next-page');
// Set the "_destination" cookie with the page name, valid for 30 days
setCookie("_destination", next_page || page_name, 30);
}
set_destination_cookie()
</script>
Router page custom code:
<script>
// Function to get the value of a specific cookie by name
function getCookie(name) {
const nameEQ = name + "=";
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
// Function to delete a specific cookie by name
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
// Function to re-route the browser to the cookie path if it exists
function redirectToCookiePath() {
const destination = getCookie('_destination');
deleteCookie('_destination');
window.location.href = destination || "https://mywebsite.com"
}
// Call the function to perform the redirect
redirectToCookiePath();
</script>
