Home

Elements: store-credit-toggle

Renders a store credit toggle element that customers can use to apply their store credit balance to their order. Normally placed in the shops cart drawer.


_10
<memberr-store-credit-toggle
_10
active-color="#000000"
_10
height="24"
_10
width="48"
_10
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
_10
style="height: 24px;"
_10
>
_10
</memberr-store-credit-toggle>

Additionally it may be necessary to trigger a cart refresh when the state of the memberr toggle changes. The memberr SC toggle triggers the event memberr-toggle:change whenever the state of the toggle changes. You can add an event listener to handly your cart refresh. Note that the way a cart refresh is triggered varies on the theme you use in your store.


_10
<script>
_10
document.addEventListener('memberr-toggle:change', () => {
_10
_10
/* handle your cart refresh here */
_10
_10
}, {
_10
bubbles: true
_10
});
_10
</script>

Customization

You can pass the following props to customize the store credit toggle to your liking:


_10
interface StoreCreditToggleProps {
_10
activeColor?: string
_10
inactiveColor?: string
_10
handleColor?: string
_10
width?: number
_10
height?: number
_10
initialState?: string
_10
debug?: boolean
_10
}

Example Implementation


_30
{% assign current_store_credit_balance = customer.metafields['app--60169453569--memberr_v2'].current_balance.value | default: 0 %}
_30
{% assign store_credit_name = shop.metafields['app--60169453569--memberr_v2'].store_credit_name.value %}
_30
_30
{% if customer and current_store_credit_balance > 0 %}
_30
{% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}
_30
_30
<div style="display: flex; align-items: center;justify-content: space-between;">
_30
<span>
_30
{{- 'memberr.apply_store_credit' | t: amount: current_store_credit_balance_formatted, store_credit_name: store_credit_name -}}
_30
</span>
_30
_30
<memberr-store-credit-toggle
_30
active-color="#000000"
_30
height="24"
_30
width="48"
_30
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
_30
style="height: 24px;"
_30
></memberr-store-credit-toggle>
_30
</div>
_30
_30
<script>
_30
document.addEventListener('memberr-toggle:change', () => {
_30
_30
/* handle your cart refresh here */
_30
_30
}, {
_30
bubbles: true
_30
});
_30
</script>
_30
{% endif %}