CustomizeRedeeming Store Credit
Cart Toggle Examples
A list of examples on how to implement the Cart Toggle.
Below are a list of examples on how a Cart Toggle implementation might look like for your theme. The exact implementation varies from theme to theme.
All snippests are placed in the snippets/memberr-sc-toggle.liquid file. And have the following base structure:
Show Code
<style>
.memberr-sc-toggle-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
<memberr-if-has-store-credit style="width: 100%;">
<div class="memberr-sc-toggle-wrapper">
<span>
<memberr-current-store-credit-balance></memberr-current-store-credit-balance>
<memberr-store-credit-name></memberr-store-credit-name> anwenden
</span>
<memberr-store-credit-toggle
active-color="#000000"
height="24"
width="48"
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
style="height: 24px;"
></memberr-store-credit-toggle>
</div>
</memberr-if-has-store-credit>
<script>
document.addEventListener('memberr-toggle:change', (event) => {
const updatedCart = event.detail.updatedCart;
/* handle your cart refresh here */
//document.dispatchEvent(new CustomEvent("cart:refresh")); // this is different for every theme
}, {
bubbles: true
});
</script>dispatchEvent
Show Code
<script>
document.addEventListener('memberr-toggle:change', (event) => {
const updatedCart = event.detail.updatedCart;
console.log('memberr-toggle:change');
document.dispatchEvent(new CustomEvent('cart:updated'));
}, {
bubbles: true
});
</script>dispatchEvent with Cart Object parameter
Show Code
<script>
document.addEventListener('memberr-toggle:change', () => {
console.log('memberr-toggle:change');
fetch(`${window.Shopify.routes.root}cart.js`)
.then((res) => res.json())
.then((cart) => {
document.dispatchEvent(
new CustomEvent("cart:updated", {
bubbles: true,
detail: {
cart
}
})
)
})
}, {
bubbles: true
});
</script>Pup-Sub
Show Code
<script>
document.addEventListener('memberr-toggle:change', () => {
console.log('memberr-toggle:change');
// Publish events to update the cart
publish(PUB_SUB_EVENTS.quantityUpdate, undefined);
publish(PUB_SUB_EVENTS.cartUpdate, { source: 'memberr-toggle' });
// Also dispatch an event to the dom for components that listen for it
document.dispatchEvent(new CustomEvent('cart:refresh', {
bubbles: true,
detail: { source: 'memberr-toggle' }
}));
}, {
bubbles: true
});
</script>Pup-Sub with Cart render update
Show Code
<script>
document.addEventListener('memberr-toggle:change', () => {
// Trigger cart update when memberr toggle changes
// Using the same event structure as product-form.js for consistency
publish(PUB_SUB_EVENTS.cartUpdate, {
source: 'memberr-toggle'
});
// If cart drawer exists, refresh it
const cartDrawer = document.querySelector('cart-drawer');
if (cartDrawer) {
fetch(window.location.pathname + '?sections=cart-drawer')
.then(response => response.json())
.then(data => {
if (data['cart-drawer']) {
cartDrawer.renderContents(data);
}
})
.catch(error => console.error('Error refreshing cart drawer:', error));
}
}, {
bubbles: true
});
</script>Cart html fetch and replace child
Show Code
<script>
document.addEventListener('memberr-toggle:change', async () => {
// Fetch updated cart drawer HTML
const response = await fetch('/cart?view=drawer×tamp=' + Date.now(), {
credentials: 'same-origin',
method: 'GET'
});
const html = await response.text();
// Replace cart drawer content
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
const cartDrawer = document.querySelector('#sidebar-cart .Cart, .Drawer .Cart');
const newCart = tempDiv.querySelector('.Cart');
if (cartDrawer && newCart) {
cartDrawer.parentNode.replaceChild(newCart, cartDrawer);
}
// Update cart count in header
const cartResponse = await fetch('/cart.js', { credentials: 'same-origin' });
const cartData = await cartResponse.json();
document.querySelectorAll('.Header__CartCount').forEach(el => {
el.textContent = cartData.item_count;
});
});
</script>Always visible Toggle with Login Redirect
This is an example of an always visible toggle. It will always show the toggle and redirect on click to the login page if the user is not logged in.
Show Code
<style>
.memberr-sc-toggle-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
width: 100%;
}
</style>
<div class="memberr-sc-toggle-wrapper">
<span>
{% if customer %}
Apply
<memberr-current-store-credit-balance></memberr-current-store-credit-balance>
<memberr-store-credit-name></memberr-store-credit-name>
{% else %}
Apply <memberr-store-credit-name></memberr-store-credit-name> (Login required)
{% endif %}
</span>
<memberr-store-credit-toggle
active-color="#000000"
height="24"
width="48"
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
style="height: 24px;"
id="store-credit-toggle"
></memberr-store-credit-toggle>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggle = document.getElementById('store-credit-toggle');
if (!toggle) return;
const customerLoggedIn = {{ customer | json }} !== null;
toggle.addEventListener('click', function () {
if (!customerLoggedIn) {
window.location.href = '/account/login';
}
});
});
// Event for external listener (optional)
document.documentElement.dispatchEvent(new CustomEvent("cart:updated", {
bubbles: true,
detail: {
cart: cartContent
}
}));
</script>