Home

Cashback: Cartdrawer

Store CredutToggle Section

memberr-sc-toggle.liquid Snippet


_32
<style>
_32
.memberr-sc-toggle-wrapper {
_32
display: flex;
_32
align-items: center;
_32
justify-content: space-between;
_32
}
_32
</style>
_32
_32
<memberr-if-has-store-credit style="width: 100%;">
_32
<div class="memberr-sc-toggle-wrapper">
_32
<span>
_32
<memberr-current-store-credit-balance></memberr-current-store-credit-balance>
_32
<memberr-store-credit-name></memberr-store-credit-name> anwenden
_32
</span>
_32
<memberr-store-credit-toggle
_32
active-color="#000000"
_32
height="24"
_32
width="48"
_32
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
_32
style="height: 24px;"
_32
></memberr-store-credit-toggle>
_32
</div>
_32
</memberr-if-has-store-credit>
_32
_32
<script>
_32
document.addEventListener('memberr-toggle:change', () => {
_32
/* handle your cart refresh here */
_32
//document.dispatchEvent(new CustomEvent("cart:refresh")); // this is different for every theme
_32
}, {
_32
bubbles: true
_32
});
_32
</script>

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:

_10
<p>
_10
You will receive <memberr-cart-cashback-amount></memberr-cart-cashback-amount> <memberr-store-credit-name></memberr-store-credit-name> for this purchase.
_10
</p>

  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 your Theme Settings:

memberr shopify redeeming Store Credit memberr cart toggle 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 -%}