Home

Cashback: Cartdrawer

Toggle Section

cart-cashback.liquid Snippet


_10
Coming soon.

Cart Page Section

your-shop-domain.com/cart

Not standardized. This is dependent on the theme you are using. You need to find the theme file that manages the themes cart page implementation.

Below is an example implementation:


_10
{% if settings.memberr %}
_10
<div class="good-choice-on-main-cart ed-good-on-main-cart-mobile" style="margin-top: -16px;">
_10
{% render 'cart-cashback' %}
_10
</div>
_10
{%- endif -%}

Cart Drawer

Display dynamic cashback amount in cart drawer

Below is an example implementation:

  1. Create a new snippet:

_68
{%- assign store_credit_name = shop.metafields['app--60169453569--memberr_v2'].store_credit_name
_68
| default: 'Store Credit'
_68
-%}
_68
_68
{% comment %} Get Cashback program {% endcomment %}
_68
{%- assign cashback_program = shop.metaobjects['app--60169453569--cashback_program'].v2 -%}
_68
_68
{% comment %} Check if cashback program is enabled {% endcomment %}
_68
{%- if cashback_program.is_active -%}
_68
{% comment %} Divisor has to be a float to get a decimal {% endcomment %}
_68
{%- assign cashback_rate = cashback_program.cashback_percentage | divided_by: 100.0 -%}
_68
{%- else -%}
_68
{%- assign cashback_rate = 0 -%}
_68
{%- endif -%}
_68
_68
{% comment %} Check if customer is logged in and has active membership {% endcomment %}
_68
{%- assign active_membership_id = customer.metafields['app--60169453569--memberr_v2'].customer_membership.value.membership_id -%}
_68
{%- if active_membership_id -%}
_68
{%- assign memberships = shop.metaobjects['app--60169453569--membership'].values -%}
_68
{%- assign active_membership = memberships | where: 'memberr_id', active_membership_id | first -%}
_68
{%- endif -%}
_68
_68
{% comment %} Check if there is a cashback override for the active membership {% endcomment %}
_68
{%- if active_membership.benefit_cashback_override.value.is_active -%}
_68
{%- assign cashback_rate = active_membership.benefit_cashback_override.value.cashback_percentage
_68
| divided_by: 100.0
_68
-%}
_68
{%- endif -%}
_68
_68
{% comment %} If no cashback_rate is set, we check if the theme is in design mode and set the cashback rate to 5% {% endcomment %}
_68
{%- if cashback_rate == 0 -%}
_68
{%- if request.design_mode -%}
_68
{%- assign cashback_rate = 5.0 | divided_by: 100.0 -%}
_68
{%- endif -%}
_68
{%- endif -%}
_68
_68
{% comment %} Now we render the cashback amount if the rate is > 0 {% endcomment %}
_68
{%- if cashback_rate > 0 -%}
_68
{%- assign cashback_amount = cart.total_price | times: cashback_rate -%}
_68
{%- else -%}
_68
{%- assign cashback_amount = 0 -%}
_68
{%- endif -%}
_68
_68
{% assign cashback_amount_formatted = cashback_amount | money %}
_68
_68
{% if cashback_amount > 0 %}
_68
<div class="shipping-header-info-container">
_68
<div class="shipping-header-info" style="background-color: {{ settings.color_good_choice_background }};">
_68
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
_68
<g clip-path="url(#clip0_6163_8801)">
_68
<path d="M6.27794 4.93717C10.3696 1.58404 16.4165 1.81737 20.2363 5.63717C24.304 9.70487 24.304 16.3007 20.2363 20.3684C16.1686 24.4361 9.57273 24.4361 5.50503 20.3684C4.25672 19.1218 3.34573 17.5784 2.85759 15.8831C2.36945 14.1878 2.32018 12.3963 2.7144 10.6768L2.79461 10.3507L4.80919 10.882C4.30976 12.7801 4.49637 14.7937 5.33615 16.5678C6.17592 18.3418 7.61496 19.7626 9.39964 20.5795C11.1843 21.3965 13.2001 21.5573 15.0917 21.0336C16.9834 20.5099 18.6294 19.3353 19.7398 17.7168C20.8503 16.0983 21.3537 14.1398 21.1615 12.1864C20.9693 10.233 20.0938 8.4102 18.6893 7.03915C17.2847 5.6681 15.4413 4.83682 13.4839 4.69182C11.5264 4.54682 9.58064 5.0974 7.9894 6.24654L7.75919 6.41946L8.81857 7.47883L4.03107 8.583L5.13523 3.7955L6.27794 4.93717Z" fill="#000000" style="stroke: none;"/>
_68
<path d="M10.9956 11.125C11.0833 11.0084 11.1802 10.8965 11.2864 10.7903C12.5068 9.5699 14.4854 9.5699 15.7058 10.7903L17.0316 9.46447C15.079 7.51184 11.9132 7.51184 9.96055 9.46447C9.47063 9.95438 9.10364 10.5207 8.85956 11.125H7.87109V12.375H8.53506C8.48308 12.7899 8.48308 13.2101 8.53506 13.625H7.87109V14.875H8.85956C9.10364 15.4793 9.47063 16.0456 9.96055 16.5356C11.9132 18.4881 15.079 18.4881 17.0316 16.5356L15.7058 15.2097C14.4854 16.4301 12.5068 16.4301 11.2864 15.2097C11.1802 15.1036 11.0833 14.9916 10.9956 14.875H13.4961V13.625H10.4339C10.3502 13.2129 10.3502 12.7871 10.4339 12.375H13.4961V11.125H10.9956Z" fill="#000000" style="stroke: none;"/>
_68
</g>
_68
<defs>
_68
<clipPath id="clip0_6163_8801">
_68
<rect width="25" height="25" fill="white" transform="translate(0.371094 0.5)"/>
_68
</clipPath>
_68
</defs>
_68
</svg>
_68
<span class="content">
_68
{{
_68
'cart.general.cashback'
_68
| t: cashback_amount: cashback_amount_formatted, store_credit_name: store_credit_name
_68
}}
_68
</span>
_68
</div>
_68
</div>
_68
{% endif %}

  1. Render Snippet in cart drawer

_10
{% if settings.memberr %}
_10
<div class="good-choice-on-main-cart ed-good-on-main-cart-mobile" style="margin-top: -16px;">
_10
{% render 'cart-cashback' %}
_10
</div>
_10
{%- endif -%}

memberr Store Credit toggle in Card drawer or on Cart Page

Activate memberr Elements in Theme Settings:

Store Credit Toggle in Card drawer

This is an example implementation

1. Example implementation

snippets/memberr-toggle.liquid


_62
{% assign current_store_credit_balance = customer.metafields['app--60169453569--memberr_v2'].current_balance.value | default: 0 %}
_62
{% assign store_credit_name = shop.metafields['app--60169453569--memberr_v2'].store_credit_name.value %}
_62
_62
{% if customer and current_store_credit_balance > 0 %}
_62
{% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}
_62
_62
<div style="display: flex;
_62
align-items: center;
_62
justify-content: space-between;
_62
padding-bottom: 1rem;
_62
padding-top: 0;"
_62
>
_62
<span>
_62
{{- 'cart.general.apply_store_credit' | t:
_62
amount: current_store_credit_balance_formatted,
_62
store_credit_name: store_credit_name -}}
_62
</span>
_62
_62
<memberr-store-credit-toggle
_62
active-color="#000000"
_62
height="24"
_62
width="48"
_62
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
_62
style="height: 24px;"
_62
></memberr-store-credit-toggle>
_62
</div>
_62
_62
<script>
_62
document.addEventListener('memberr-toggle:change', () => {
_62
if (window.location.pathname === window.themeVariables.routes.cartUrl) {
_62
window.location.reload();
_62
} else {
_62
(async function() {
_62
const response = await fetch(${window.themeVariables.routes.cartUrl}.js, {
_62
headers: {
_62
"Content-Type": "application/json"
_62
}
_62
});
_62
_62
const cartContent = await response.json();
_62
_62
document.documentElement.dispatchEvent(new CustomEvent("cart:updated", {
_62
bubbles: true,
_62
detail: {
_62
cart: cartContent
_62
}
_62
}));
_62
_62
document.documentElement.dispatchEvent(new CustomEvent("cart:refresh", {
_62
bubbles: true,
_62
detail: {
_62
cart: cartContent,
_62
replacementDelay: 600
_62
}
_62
}));
_62
})();
_62
}
_62
}, {
_62
bubbles: true
_62
});
_62
</script>
_62
{% endif %}

Render toggle snippet:


_10
{%- render 'memberr-toggle' -%}

2. Example implementation

snippets/memberr-toggle.liquid


_50
{% if customer.metafields['memberr-v1'].store_credit_balance.value.current %}
_50
{% assign current_store_credit_balance = customer.metafields['memberr-v1'].store_credit_balance.value.current
_50
| minus: 0
_50
%}
_50
{% else %}
_50
{% assign current_store_credit_balance = 0 %}
_50
{% endif %}
_50
_50
{% if customer and current_store_credit_balance > 0 %}
_50
{% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}
_50
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">
_50
<span
_50
{% if request.page_type == 'cart' %}
_50
class="text--subdued"
_50
{% endif %}
_50
>
_50
{{- 'cart.general.apply_store_credit' | t: amount: current_store_credit_balance_formatted -}}
_50
</span>
_50
<memberr-store-credit-toggle
_50
active-color="#1b3e33"
_50
height="24"
_50
width="48"
_50
initial-state="{%- if cart.attributes.memberr_apply_store_credit == 'Yes' -%}true{%- else -%}false{%- endif -%}"
_50
></memberr-toggle>
_50
</div>
_50
<script>
_50
document.addEventListener(
_50
'memberr-toggle:change',
_50
() => {
_50
fetch( ${window.themeVariables.routes.cartUrl}.js )
_50
.then((response) => response.json())
_50
.then((cart) => {
_50
if (window.location.pathname === window.themeVariables.routes.cartUrl) {
_50
window.location.reload();
_50
} else {
_50
document.documentElement.dispatchEvent(
_50
new CustomEvent('cart:refresh', {
_50
bubbles: true,
_50
detail: { cart },
_50
})
_50
);
_50
}
_50
});
_50
},
_50
{
_50
bubbles: true,
_50
}
_50
);
_50
</script>
_50
{% endif %}

Render toggle snippet:


_10
{%- render 'memberr-toggle' -%}

3. Example implementation

snippets/memberr-toggle.liquid


_47
{% if customer.metafields['memberr-v1'].store_credit_balance.value.current %}
_47
{% assign current_store_credit_balance = customer.metafields['memberr-v1'].store_credit_balance.value.current
_47
| minus: 0
_47
%}
_47
{% else %}
_47
{% assign current_store_credit_balance = 0 %}
_47
{% endif %}
_47
_47
{% if customer and current_store_credit_balance > 0 %}
_47
{% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}
_47
<div style="display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); padding-top: 0;">
_47
<span>
_47
{{- 'cart.general.apply_store_credit' | t: amount: current_store_credit_balance_formatted -}}
_47
</span>
_47
<memberr-store-credit-toggle
_47
active-color="#1b3e33"
_47
height="24"
_47
width="48"
_47
initial-state="{%- if cart.attributes.memberr_apply_store_credit == 'Yes' -%}true{%- else -%}false{%- endif -%}"
_47
></memberr-store-credit-toggle>
_47
</div>
_47
<script>
_47
document.addEventListener(
_47
'memberr-toggle:change',
_47
() => {
_47
if (window.location.pathname === window.theme.routes.cartUrl) {
_47
window.location.reload();
_47
} else {
_47
document.documentElement.dispatchEvent(
_47
new CustomEvent('theme:cart:reload', {
_47
bubbles: true,
_47
})
_47
);
_47
}
_47
},
_47
{
_47
bubbles: true,
_47
}
_47
);
_47
</script>
_47
{% endif %}
_47
_47
Render toggle snippet:
_47
For example in `main-cart.liquid`
_47
_47
```liquid
_47
{%- render 'memberr-toggle' -%}

Advanced

Display Store Credit separately from Store Credit:

Part 1


_21
{%- if settings.memberr_enabled == true -%}
_21
{%- assign store_credit_name = shop.metafields['memberr-v1'].store_credit_name -%}
_21
_21
{%- if cart.cart_level_discount_applications != blank -%}
_21
<ul class="mini-cart__discount-list list--unstyled" role="list">
_21
{%- for discount_application in cart.cart_level_discount_applications -%}
_21
{%- unless discount_application.title == store_credit_name -%}
_21
<li class="mini-cart__discount">
_21
<span class="mini-cart__discount-badge discount-badge">
_21
{%- render 'icon' with 'discount-badge' -%}
_21
{{ discount_application.title -}}
_21
</span>
_21
<span class="mini-cart__discount-price text--xsmall text--subdued">
_21
-{{ discount_application.total_allocated_amount | money -}}
_21
</span>
_21
</li>
_21
{%- endunless -%}
_21
{%- endfor -%}
_21
</ul>
_21
{%- endif -%}
_21
{%- endif -%}

Part 2


_13
{%- for discount_application in cart.cart_level_discount_applications -%}
_13
{%- if discount_application.title == store_credit_name -%}
_13
<div class="ds-mini-cart__sum-item">
_13
<span>
_13
{{- 'cart.general.store_credit' | t -}}
_13
</span>
_13
<span>
_13
-
_13
{{- discount_application.total_allocated_amount | money -}}
_13
</span>
_13
</div>
_13
{%- endif -%}
_13
{%- endfor -%}