B2B Personalized Pricing - A Step‐by‐Step Guide

In today's competitive landscape, tailoring your pricing strategy to meet the needs of different user groups can be a game-changer. But how can you execute this advanced modification to drive success in your business? We're here to guide you through the process step by step, empowering you to unlock the full potential of personalized pricing.

This is a more advanced tweak and requires coding know-how.

This documentation will drive you through the possibilities to display different prices to different groups of customers, within the Doofinder layer.

Here's what you'll need to do:

1. Index Various Prices In Your Product Data Feed

To kick things off, it's essential to index multiple price points for each product in your data feed. Let's say you have four distinct user groups—A, B, C, and D. For each product, ensure you have pricing attributes indexed accordingly, including regular and sale prices where applicable. Don't forget to consult our documentation for comprehensive guidance on feed attributes.

• "priceA": "289.00",
• "priceB": "299.00",
• "priceC": "259.00",
• "priceD": "299.00",
• "sale_priceA": "279.00",
• "sale_priceB": "",
• "sale_priceC": "249.00",
• "sale_priceD": ""

If you're using one of our plugins to index your product catalog, it's important to note that exporting different prices isn't directly supported. In these instances, you'll need to explore alternative options. One approach is to create a custom data feed, like a Google Shopping feed, which allows you to include multiple price points. Alternatively, you can leverage our API to achieve the desired functionality. These solutions provide flexibility and customization, ensuring that you can seamlessly integrate personalized pricing into your platform.

2. Implement Dynamic Variables For User Group Identification

Next up, it's time to integrate dynamic variables into your HTML code to distinguish between user groups. Align these variables with the pricing attributes in your feed, ensuring seamless coordination between the two. It is recommended that both the values of this dynamic variable and the values of the pricing attributes in your feed share the same name.

For instance, in your product data feed, index the pricing attribute as follows: priceA.

In your HTML code, create the corresponding variable: let dfGroup = "A";

In our example, dfGroup can take the value “A”, “B”, “C” or “D”.

3. Modify The Card Template

Now, let's dive into the heart of your product display—the card template. Within your Doofinder admin, locate the pricing block and customize it to dynamically showcase the appropriate price for each user group. By replacing the default pricing block with tailored alternatives, you'll ensure that every visitor sees the most relevant pricing information.

• Locate the pricing block:

  <%= if @item["price"] do %>
          <div class="dfd-card-pricing">
            <%= if display_sale_price?(@item) do %>
              <span class="dfd-card-price dfd-card-price--sale" data-value={@item["sale_price"]}>
                <%= currency_format(@item["sale_price"], @locale) %>
              </span>
            <% end %>
            <span class="dfd-card-price" data-value={@item["price"]}>
              <%= currency_format(@item["price"], @locale) %>
            </span>
          </div>
        <% end %>

• In the default template, we only showcase the "price" attribute, regardless of the user group. Therefore, to tailor the pricing display for different user groups, we must replace this block with the following one:

        <%= if @item["priceA"] do %>
          <div class="dfd-card-pricing A" hidden>
            <%= if @item["sale_priceA"] do %>
              <span class="dfd-card-price dfd-card-price--sale" data-value={@item["sale_priceA"]}>
                <%= currency_format(@item["sale_priceA"], @locale) %>
              </span>
            <% end %>
            <span class="dfd-card-price" data-value={@item["priceA"]}>
              <%= currency_format(@item["priceA"], @locale) %>
            </span>
          </div>
        <% end %>

        <%= if @item["priceB"] do %>
          <div class="dfd-card-pricing B" hidden>
            <%= if @item["sale_priceB"] do %>
              <span class="dfd-card-price dfd-card-price--sale" data-value={@item["sale_priceB"]}>
                <%= currency_format(@item["sale_priceB"], @locale) %>
              </span>
            <% end %>
            <span class="dfd-card-price" data-value={@item["priceB"]}>
              <%= currency_format(@item["priceB"], @locale) %>
            </span>
          </div>
        <% end %>

        <%= if @item["priceC"] do %>
          <div class="dfd-card-pricing C" hidden>
            <%= if @item["sale_priceC"] do %>
              <span class="dfd-card-price dfd-card-price--sale" data-value={@item["sale_priceC"]}>
                <%= currency_format(@item["sale_priceC"], @locale) %>
              </span>
            <% end %>
            <span class="dfd-card-price" data-value={@item["priceC"]}>
              <%= currency_format(@item["priceC"], @locale) %>
            </span>
          </div>
        <% end %>

        <%= if @item["priceD"] do %>
          <div class="dfd-card-pricing D" hidden>
            <%= if @item["sale_priceD"] do %>
              <span class="dfd-card-price dfd-card-price--sale" data-value={@item["sale_priceD"]}>
                <%= currency_format(@item["sale_priceD"], @locale) %>
              </span>
            <% end %>
            <span class="dfd-card-price" data-value={@item["priceD"]}>
              <%= currency_format(@item["priceD"], @locale) %>
            </span>
          </div>
        <% end %>                        

Please, note the name of the class dfd-card-pricing, which include the different group values and should match the values that the dfGroup variable can return.

4. Add a JavaScript Event

With your card template optimized, it's time to fine-tune the Doofinder script to align with your personalized pricing strategy.

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 dfUser = document.getElementsByClassName('dfd-card-pricing ' + dfGroup);
   var dfHide = document.getElementsByClassName('dfd-card-pricing');



  for (let i = 0; i < dfHide.length; i++) {    




  if(dfGroup && dfUser[i]){
  dfUser[i].hidden=false
}


  if(dfHide[i] && dfHide[i].hidden){
  dfHide[i].remove()
  }
  }
};



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

document.addEventListener("doofinder.carousel.load", () => {
handleUserScript()
});
</script>

Ready To Take The Leap?

With our comprehensive guide, you're equipped to revolutionize your pricing strategy and drive meaningful results for your business. Whether you're a seasoned coder or just starting out, personalized pricing is within reach.

Unlock the power of personalized pricing today and watch as your business reaches new heights of success!