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.
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. Edit the Doofinder Script
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.
<script>
const UpdateCardHook = {
mounted() {
this.changeResults = () => {
const dfUser = document.querySelectorAll('.dfd-card-pricing.' + dfGroup);
const dfHide = document.querySelectorAll('.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()
}
}
}
},
updated(){
this.changeResults();
}
};
const dfLayerOptions = {
installationId: 'XXXX-XXXX-XXXX-XXXX-XXXX',
zone: 'XX',
hooks: {
Carousel: UpdateCardHook,
Results: UpdateCardHook,
Layer: UpdateCardHook
}
};
(function (l, a, y, e, r, s) {
r = l.createElement(a); r.onload = e; r.async = 1; r.src = y;
s = l.getElementsByTagName(a)[0]; s.parentNode.insertBefore(r, s);
})(document, 'script', 'https://cdn.doofinder.com/livelayer/1/js/loader.min.js', function () {
doofinderLoader.load(dfLayerOptions);
});
</script>
Please pay attention to the placeholders 'XX' in the dfLayerOptions variable, as these should be substituted with the values corresponding to your specific store settings within the Doofinder Admin.
Once the script is ready, you should insert it into your HTML code or replace the existing Doofinder script with this updated version. It's crucial to ensure that only one instance of the Doofinder script is present in your HTML to avoid conflicts.
5. Locate and Modify the Doofinder Script
Finally, ensure that your Doofinder script is seamlessly integrated with your platform of choice. Whether you're using WordPress, Shopify, BigCommerce, or another platform, locate and modify the script accordingly.
Doofinder script:
- WordPress: the script can be found in the Doofinder plugin configuration.
- Shopify: the script can be found in your theme code, under the doofinder-script-tag.liquid fragment.
- BigCommerce: the script can be found in your BigCommerce panel, Storefront > Script Manager.
For the rest of platforms, you will need to manually insert the script in your HTML code, make sure to disable the layer display from the plugin configuration, in order to avoid a duplicated 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. If you encounter any obstacles along the way, don't hesitate to reach out to our dedicated support team—we're here to help you succeed. If needed, simply log in to your Doofinder admin panel. Click on 'Help' in the top blue bar, then select 'Contact our Support Team’.
Unlock the power of personalized pricing today and watch as your business reaches new heights of success!