This hides product prices on an ecommerce site until the user is logged in.
Example Use(s):
Often used by trade sites to show products but not allow prices to be seen unless the user is already signed up and approved by site admin.
How It Works:
-
The code checks if the user is logged in or not
-
If not logged in, then all elements relating to prices are set to not display (you can add other selectors into the code to hide other things, see later)
-
Add To Cart is disabled and Submit Enquiry appears instead
-
Registration and checkout pages are hidden so the user isn't able to create an account
-
Any attempt to go to the checkout page redirects to the login page (as they may already have an account and can then just login, but you can choose whichever page you want; remember to add a link from the login page to the new registration page so new users can register). This is set in code line 3
-
The user needs to apply to the site admin to have an account created
- To do this online, you can set up a custom built form (created using form builder) on a new registration page called "register page 1" (in this code example, you can name it how you wish)
- You can issue the password that is generated using the template tag {{ PROCESS_USER_PASSWORD }}, otherwise site admin can create a password when the user is approved
- Completing the form sets their status as "part-approved" meaning they can't login until site admin sets their account to "Approved"
- Once approved, the site admin needs to inform the user and provide their initial password if they have not already received the password via the template tag
- The user can then login and see prices
Setting This Up
1. Set up your new registration page
2. Set up a custom form for the registration page
3. Set up the following redirect in Redirects Manager:
register\.php(\?.*)? -> register_page_1.html
4. Apply the following code to the top of the template file: script/site.js (it's at the top so it runs first and stops the prices flashing up)
// Redirect non logged in users away from the checkout screen if ( ! jsMaster.userLoggedIn && location.href.match('checkout.php')) { location.href = '/login.php'; } jQuery(function( $ ) { // hide price until logged in if ( ! jsMaster.userLoggedIn) { var hiddenPriceSelectors = [ '.product_price', '.sf-result-price', 'td[title="Stock"],th[title="Stock"]', '.sf-result-selection-data,th:has(.sf-filter-btn)', '.p_price', '.p_s_price', '.hidden_product_price', '.mini_product_price', '.mini_product_special_offer', '.mini_product_rating' ]; $.each(hiddenPriceSelectors, function (i, item) { $(item).hide(); }); } });
Hiding Other Elements
The elements that are hidden are specified in the part of the code shown below. You can inspect other elements on the page and add their class in e.g. product ratings.
var hiddenPriceSelectors = [
'.product_price', '.sf-result-price', 'td[title="Stock"],th[title="Stock"]',
'.sf-result-selection-data,th:has(.sf-filter-btn)',
'.p_price', '.p_s_price', '.hidden_product_price',
'.mini_product_price', '.mini_product_special_offer', '.mini_product_rating' <- product rating is hidden in this code snippet
Important Tip About Syntax: Ensure the very last entry does not have a training comma or it will break in some browsers probably!
Note: Keep It Tidy
The line jQuery(function( $ ) { only needs to appear once in the template file so you can remove other occurrences of it, just to keep things tidy.
If you do remove it elsewhere then also remove it's training closing statement: }); which will be the last line in the same block.
E.g.
jQuery(function( $ ) { <- remove duplicate versions of this
// ....code....
}); <- remove this last closing statement in the same code block