Page 1

Information about how this page works

What it Does.

This could be a typical product landing page in any website. It shows a number of products with their respective resale prices. This is the page that all visitors to the website see. However, we also have three customer groups who are entitled to special discounts, and we want to be able to display the discounted prices to those customers. When a customer logs into the site, the page changes to show the discounted product prices that the customer is entitled to.

For this example, we’ve created three customers with usernames of customer1, customer2 and customer3. They all have the same password of 12345. Enter a username and password into the login form to see the page change. After seeing the changed page, logout and log back in with a different username and password to see a new set of pricing information. If an incorrect login is entered. users will be automatically directed to Sparkle’s generated user login page. We’ve added some extra elements to this page to make it appear like an error page that gives users the option of trying again, sending an email to the site administrator to get a reminder of their username and password, or the option to return to the standard product page.

How it’s Created

This works by creating three pages. A home, or product landing page that everyone sees, a protected page that only logged in members can see, and the login page that Sparkle automatically creates when you set up Password Protection in Site Settings.

Start by setting up password protection and create some groups and users. This will generate the essential login page that Sparkle needs for protection to work correctly. In this example we created three groups named Bronze, Silver and Gold.

Next, create your home or product page and include a login form element from the objects panel. Style the login form to match the rest of the page. Include images, headings and descriptions as required - remember, this is all information that should be publicly viewable by all visitors to the site.

You should now duplicate the page to act as the protected, members-only page of the site. With the protected page selected, go over to the pages panel and set password protection as shown below.

Click the Edit button and ensure that the page can be viewed by ALL groups, Like this.

On the protected page delete the Login Form, the page heading and description, leaving just the hero section and the product details. You should now add a logout button. and a set of strikethrough lines to overlay onto the normal prices. These are just small boxes with a top border only in red. Rotate the boxes slightly and position them over the price boxes. With the logout button and the strikethrough boxes selected on the canvas, group them and then set the group to display to Only Logged in Users. You do this in the Arrange tab on the right of the interface. The option looks like this - click the edit button to ensure that all groups are selected.

You can now add a new heading and description to the hero section of the page to make it relevant to your first user group - in our example, Bronze members. You can now add a new set of price boxes and position them under the normal price boxes, These will be the discounted prices that the Bronze group will pay for each product. With the new price boxes, the heading and description selected, group them and make the group visible ONLY to the first member group (Bronze in our example). Again, you do this over in the arrange tab.

Next, you should click on the view icon at the top-left of the interface - it looks like this.

Select the option to show elements visible only to Users not Logged in. This will appear to clear the canvas of all the elements you added for your first user group. Don’t worry - they’re still there - you’ve just cleared the canvas so you can create your next group of options for your second and subsequent groups.

Start by adding a new heading and description for your second group and create a set of prices applicable to that group. There is no need to add a logout button or the strikethrough boxes as they have already been set up to display to all logged in users. Position these new elements on the canvas. When they are all where they are supposed to be, group them and make the group only visible to your second group. (in our example, Silver members). Repeat this process for any subsequent groups you wish to add. To check that everything is positioned correctly for each group, use the view options to check what each group will see on the page. When your happy with the page, export your project and publish it in a testing folder on your server. Once you are happy that it works well, you can publish to your main site.

In order that you can get a better understanding of how all this works, you can grab a copy of the Sparkle project file from the link below. Just remember, you won’t be able to preview the site with all its options working until its published to a live server. However, you will be able to examine each page and its elements to see how everything has been set up.

Before publishing, be sure to make the following changes to your login form settings over in the style panel. These changes will ensure that users get directed to the protected page after login, and go back to the main product page after logout.

Grab Sparkle Project file