Revolutionize Your Online Business: Hide Prices Strategically

Discover an innovative strategy to customize your online store to your business needs by taking advantage of the ability to hide prices from non-logged-in users. While this customization requires a certain amount of coding knowledge, the potential benefits to your business can be significant.

Learn how to embark on this advanced journey following the steps below.

1. Gather The Necessary Information:

In your HTML code, a JavaScript variable should enable us to identify whether the user is logged in or not. Once you have set up this JavaScript variable, the next step is to configure the Doofinder script with the necessary function to hide the price for unlogged users.

Consider the following example, where our JavaScript variable is configured as follows:

• Example:

let dfGroup = 0; 

It returns 0 if the user isn't logged in and 1 if the user is logged in.

2. Add a JavaScript Event

Please be aware that in this scenario, the variable identifying the user group has already been declared in your HTML code, using the name 'dfGroup'. This pre-existing declaration ensures that the pricing display logic aligns correctly with the designated user groups, facilitating smooth and accurate functionality.

The following JavaScript code will listen for any modifications within the Doofinder layer, and will execute the handleUserScript() function whenever the layer is updated (searches, filters, no results, etc.).

<script type="text/javascript"> 
function handleUserScript() { 
var dfPricing = document.querySelectorAll('.dfd-card-row');
  for (let i = 0; i < dfPricing.length; i++) {    
  if(dfGroup == 0){
    dfPricing[i].remove();
  } 
  }
};


document.addEventListener("doofinder.layer.update", () => {
handleUserScript()
});

document.addEventListener("doofinder.carousel.load", () => {
handleUserScript()
})

</script>