Home

Redeeming Store Credit: Cart Toggle

In Action Example

Implementation

Step 1:

Find out which events in your theme are emitted to update the cart drawer. Below are two examples how these events might look like:


_10
document.documentElement.dispatchEvent(new CustomEvent("cart:updated", {
_10
bubbles: true,
_10
detail: {
_10
cart: cartContent
_10
}
_10
}));


_10
document.documentElement.dispatchEvent(new CustomEvent("cart:refresh", {
_10
bubbles: true,
_10
detail: {
_10
cart: cartContent,
_10
replacementDelay: 600
_10
}
_10
}));

Step 2:

Create a new snippet snippets/memberr-sc-toggle.liquid.

You can use the follwing code as a starting point. However this implementation varies from theme to theme and might now work for your theme.

Standard:


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

With internationalization:


_23
<memberr-if-has-store-credit style="width: 100%;">
_23
<div class="flex items-center justify-between w-full text-sm" style="gap: .5rem;">
_23
<p>
_23
{{- 'memberr.apply_store_credit_html' | t -}}
_23
</p>
_23
<memberr-store-credit-toggle
_23
active-color="#000000"
_23
height="24"
_23
width="48"
_23
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
_23
style="height: 24px;"
_23
></memberr-store-credit-toggle>
_23
</div>
_23
</memberr-if-has-store-credit>
_23
_23
<script>
_23
document.addEventListener('memberr-toggle:change', () => {
_23
/* handle your cart refresh here */
_23
// document.dispatchEvent(new CustomEvent('cart:updated')); // this is different for every theme
_23
}, {
_23
bubbles: true
_23
});
_23
</script>

Add the following translations to your translation files usually located at locales/en.default.json

en.default.json example:


_10
(...)
_10
_10
"memberr": {
_10
"apply_store_credit_html": "Apply <memberr-current-store-credit-balance></memberr-current-store-credit-balance> <memberr-store-credit-name></memberr-store-credit-name>"
_10
},
_10
_10
(...)

de.json example:


_10
(...)
_10
_10
"memberr": {
_10
"apply_store_credit_html": "<memberr-current-store-credit-balance></memberr-current-store-credit-balance> <memberr-store-credit-name></memberr-store-credit-name> einlösen"
_10
},
_10
_10
(...)

Step 4:

Locate the file in your theme that contains the code for your cart drawer and add the following liquid code to render the store credit toggle:


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

Step 5:

Activate memberr elements in your Theme Settings:

memberr shopify redeeming Store Credit memberr cart toggle settings