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:
_10document.documentElement.dispatchEvent(new CustomEvent("cart:updated", {_10 bubbles: true,_10 detail: {_10 cart: cartContent_10 }_10}));
_10document.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(...)
Make sure to add this to all of your language files.
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' -%}
Note that the toggle will only be shown if you as the customer have Store Credit and Store Credit is enabled in the memberr settings.
Step 5:
Activate memberr elements
in your Theme Settings:
