Redeeming Store Credit: Cart Toggle
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:
Show Code
_33<style>_33 .memberr-sc-toggle-wrapper {_33 display: flex;_33 align-items: center;_33 justify-content: space-between;_33 }_33</style>_33_33<memberr-if-has-store-credit style="width: 100%;">_33 <div class="memberr-sc-toggle-wrapper">_33 <span>_33 <memberr-current-store-credit-balance></memberr-current-store-credit-balance>_33 <memberr-store-credit-name></memberr-store-credit-name> anwenden_33 </span>_33 <memberr-store-credit-toggle_33 active-color="#000000"_33 height="24"_33 width="48"_33 initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"_33 style="height: 24px;"_33 ></memberr-store-credit-toggle>_33 </div>_33</memberr-if-has-store-credit>_33_33<script>_33 document.addEventListener('memberr-toggle:change', (event) => {_33 const updatedCart = event.detail.updatedCart;_33 /* handle your cart refresh here */_33 //document.dispatchEvent(new CustomEvent("cart:refresh")); // this is different for every theme_33 }, {_33 bubbles: true_33 });_33</script>
With internationalization:
Show Code
_24<memberr-if-has-store-credit style="width: 100%;">_24 <div class="flex items-center justify-between w-full text-sm" style="gap: .5rem;">_24 <p>_24 {{- 'memberr.apply_store_credit_html' | t -}}_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', (event) => {_24 const updatedCart = event.detail.updatedCart;_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>
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.
Fetching the Cart content in the memberr-toggle:change event:
_10 document.addEventListener('memberr-toggle:change', (event) => {_10 const updatedCart = event.detail.updatedCart;_10 }, {_10 bubbles: true_10 });
Step 3:
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 4:
Activate memberr elements in your Theme Settings:
