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', (event) => {
_10
const updatedCart = event.detail.updatedCart;
_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


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