Home

memberr Cashback: Display on Product Page

To increase your programs chance of success, it is important to display the Cashback amount on your product pages. This will allow customers to see the value of the Cashback and make informed decisions about which products to purchase. To add a notification to your product pages, open the product page in your store editor and drag the memberr Cashback component onto the selected page.

Custom liquid code

Alternatively, you can use the custom liquid code below to display the Cashback amount and your Store Credits name on your product pages by directly editing the product page in your theme code editor.

Show Code

_73
{% comment %} Get Cashback program {% endcomment %}
_73
{%- assign cashback_program = shop.metaobjects['app--60169453569--cashback_program'].v2 -%}
_73
_73
{% comment %} Check if cashback program is enabled {% endcomment %}
_73
{%- if cashback_program.is_active -%}
_73
{% comment %} Divisor has to be a float to get a decimal {% endcomment %}
_73
{%- assign cashback_rate = cashback_program.cashback_percentage | divided_by: 100.0 -%}
_73
{%- else -%}
_73
{%- assign cashback_rate = 0 -%}
_73
{%- endif -%}
_73
_73
{% comment %} Check if customer is logged in and has active membership {% endcomment %}
_73
{%- assign active_membership_id = customer.metafields['memberr-v1'].active_membership.value.membership_id -%}
_73
{%- if active_membership_id -%}
_73
{%- assign memberships = shop.metafields['memberr-v1'].memberships.value -%}
_73
{%- assign active_membership = memberships | where: 'id', active_membership_id | first -%}
_73
{%- endif -%}
_73
_73
{% comment %} Check if there is a cashback override for the active membership {% endcomment %}
_73
{%- if active_membership.benefit_cashback_override.is_active -%}
_73
{%- assign cashback_rate = active_membership.benefit_cashback_override.cashback_percentage
_73
| divided_by: 100.0
_73
-%}
_73
{%- endif -%}
_73
_73
{% comment %} If no cashback_rate is set, we check if the them is in design mode and set the cashback rate to 5% {% endcomment %}
_73
{%- if cashback_rate == 0 -%}
_73
{%- if request.design_mode -%}
_73
{%- assign cashback_rate = 5.0 | divided_by: 100.0 -%}
_73
{%- endif -%}
_73
{%- endif -%}
_73
_73
_73
_73
{% comment %} Now we render the cashback amount if the rate is > 0 {% endcomment %}
_73
{%- if cashback_rate > 0 -%}
_73
{%- assign cashback_amount = product.selected_or_first_available_variant.price
_73
| times: cashback_rate
_73
| money
_73
-%}
_73
_73
{%- assign store_credit_name = shop.metafields['memberr-v1'].settings.value.store_credit_name
_73
| default: 'Store Credit'
_73
-%}
_73
{%- endif -%}
_73
_73
<div class='memberr-cashback-wrapper'>
_73
<p class='memberr-cashback-label'>
_73
<span class='memberr-cashback-label-text'>
_73
You will receive {{ cashback_rate | times: 100 }}% when purchasing this item.
_73
<br />
_73
You will receive {{ cashback_amount }} {{ store_credit_name }} when purchasing this item.
_73
</span>
_73
</p>
_73
</div>
_73
_73
<style>
_73
.memberr-cashback-wrapper {
_73
margin: 15px 0;
_73
}
_73
_73
.memberr-cashback-label {
_73
display: flex;
_73
align-items: center;
_73
gap: 4px;
_73
font-size: 14px;
_73
color: #333;
_73
}
_73
_73
.memberr-cashback-label-text {
_73
_73
}
_73
</style>

Custom Dynamic Cashback Calculation

Great for bundles and other product pages with dynamic pricing.

The example below listens for changes in the product price by monitoring the biscuits-bundle-form__total element.

Show Code

_171
{% comment %} Get Cashback program {% endcomment %}
_171
{%- assign cashback_program = shop.metaobjects['app--60169453569--cashback_program'].v2 -%}
_171
_171
{% comment %} Check if cashback program is enabled {% endcomment %}
_171
{%- if cashback_program.is_active -%}
_171
{% comment %} Divisor has to be a float to get a decimal {% endcomment %}
_171
{%- assign cashback_rate = cashback_program.cashback_percentage | divided_by: 100.0 -%}
_171
{%- else -%}
_171
{%- assign cashback_rate = 0 -%}
_171
{%- endif -%}
_171
_171
{% comment %} Check if customer is logged in and has active membership {% endcomment %}
_171
{%- assign active_membership_id = customer.metafields['memberr-v1'].active_membership.value.membership_id -%}
_171
{%- if active_membership_id -%}
_171
{%- assign memberships = shop.metafields['memberr-v1'].memberships.value -%}
_171
{%- assign active_membership = memberships | where: 'id', active_membership_id | first -%}
_171
{%- endif -%}
_171
_171
{% comment %} Check if there is a cashback override for the active membership {% endcomment %}
_171
{%- if active_membership.benefit_cashback_override.is_active -%}
_171
{%- assign cashback_rate = active_membership.benefit_cashback_override.cashback_percentage
_171
| divided_by: 100.0
_171
-%}
_171
{%- endif -%}
_171
_171
{% comment %} If no cashback_rate is set, we check if the theme is in design mode and set the cashback rate to 5% {% endcomment %}
_171
{%- if cashback_rate == 0 -%}
_171
{%- if request.design_mode -%}
_171
{%- assign cashback_rate = 5.0 | divided_by: 100.0 -%}
_171
{%- endif -%}
_171
{%- endif -%}
_171
_171
_171
_171
{% comment %} Now we render the cashback amount if the rate is > 0 {% endcomment %}
_171
{%- if cashback_rate > 0 -%}
_171
{%- assign cashback_amount = product.selected_or_first_available_variant.price
_171
| times: cashback_rate
_171
| money
_171
-%}
_171
_171
{%- assign store_credit_name = shop.metafields['memberr-v1'].settings.value.store_credit_name
_171
| default: 'Store Credit'
_171
-%}
_171
{%- endif -%}
_171
_171
<div class='memberr-cashback-wrapper'>
_171
<p class='memberr-cashback-label'>
_171
<span class='memberr-cashback-l label-text'>
_171
Du erhältst <span class="memberr-cashback-amount">{{ cashback_amount }}</span> {{ store_credit_name }} beim Kauf dieses Artikels.
_171
</span>
_171
</p>
_171
</div>
_171
_171
<style>
_171
.memberr-cashback-wrapper {
_171
margin: 15px 0;
_171
}
_171
_171
.memberr-cashback-label {
_171
display: flex;
_171
align-items: center;
_171
gap: 4px;
_171
font-size: 14px;
_171
color: #333;
_171
}
_171
</style>
_171
_171
<script>
_171
console.log('memberr: memberr-bundle-cashback.liquid loaded');
_171
_171
// Store the cashback rate for recalculation
_171
const cashbackRate = {{ cashback_rate }};
_171
const storeCreditName = '{{ store_credit_name }}';
_171
_171
// Function to recalculate cashback amount
_171
function recalculateCashback() {
_171
console.log('Memberr: recalculateCashback called with rate:', cashbackRate);
_171
_171
if (cashbackRate <= 0) {
_171
console.log('Memberr: Cashback rate is 0 or less, skipping calculation');
_171
return;
_171
}
_171
_171
// Get the current product price with more selector options
_171
const priceElement = document.querySelector('.biscuits-bundle-form__total');
_171
_171
if (!priceElement) {
_171
console.warn('Memberr: Could not find product price element for cashback calculation');
_171
return;
_171
}
_171
_171
console.log('Memberr: Found price element:', priceElement);
_171
_171
// Extract price value (remove currency symbols and convert to number)
_171
const priceText = priceElement.textContent || priceElement.innerText;
_171
console.log('Memberr: Price text:', priceText);
_171
_171
const price = parseFloat(priceText.replace(/[^\d.,]/g, '').replace(',', '.'));
_171
_171
if (isNaN(price)) {
_171
console.warn('Memberr: Could not parse product price for cashback calculation, price text was:', priceText);
_171
return;
_171
}
_171
_171
console.log('Memberr: Parsed price:', price);
_171
_171
// Calculate new cashback amount
_171
const cashbackAmount = price * cashbackRate;
_171
console.log('Memberr: Calculated cashback amount:', cashbackAmount);
_171
_171
// Format the cashback amount
_171
const formattedCashback = new Intl.NumberFormat('de-DE', {
_171
style: 'currency',
_171
currency: 'EUR'
_171
}).format(cashbackAmount);
_171
_171
console.log('Memberr: Formatted cashback:', formattedCashback);
_171
_171
// Update the cashback amount display
_171
const cashbackAmountElement = document.querySelector('.memberr-cashback-amount');
_171
if (cashbackAmountElement) {
_171
cashbackAmountElement.textContent = formattedCashback;
_171
console.log('Memberr: Updated cashback display element');
_171
} else {
_171
console.warn('Memberr: Could not find cashback amount element to update');
_171
}
_171
}
_171
_171
// Function to setup MutationObserver to monitor biscuits-bundle-form__total
_171
function setupTotalMonitor() {
_171
console.log('Memberr: Setting up MutationObserver for biscuits-bundle-form__total');
_171
_171
const totalElement = document.querySelector('.biscuits-bundle-form__total');
_171
_171
if (!totalElement) {
_171
console.warn('Memberr: Could not find biscuits-bundle-form__total element, will retry later');
_171
// Retry after a short delay in case the element hasn't loaded yet
_171
setTimeout(setupTotalMonitor, 500);
_171
return;
_171
}
_171
_171
console.log('Memberr: Found biscuits-bundle-form__total element:', totalElement);
_171
_171
// Create a MutationObserver to watch for changes
_171
const observer = new MutationObserver(function(mutations) {
_171
console.log('Memberr: biscuits-bundle-form__total changed, recalculating cashback');
_171
console.log('Memberr: Mutations:', mutations);
_171
recalculateCashback();
_171
});
_171
_171
// Start observing the total element for changes
_171
observer.observe(totalElement, {
_171
childList: true, // Watch for changes to child elements
_171
subtree: true, // Watch the entire subtree
_171
characterData: true, // Watch for text changes
_171
attributes: true // Watch for attribute changes
_171
});
_171
_171
console.log('Memberr: MutationObserver set up successfully');
_171
_171
// Also trigger initial calculation
_171
recalculateCashback();
_171
}
_171
_171
// Wait for DOM to be ready before setting up the monitor
_171
window.addEventListener('DOMContentLoaded', () => {
_171
console.log('Memberr: DOM loaded, setting up total monitor');
_171
setupTotalMonitor();
_171
});
_171
</script>