Home

Cart Toggle: Implementation Examples

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 followint base structure:

Show Code

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

dispatchEvent

Show Code

_10
<script>
_10
document.addEventListener('memberr-toggle:change', () => {
_10
console.log('memberr-toggle:change');
_10
_10
document.dispatchEvent(new CustomEvent('cart:updated'));
_10
}, {
_10
bubbles: true
_10
});
_10
</script>

dispatchEvent with Cart Object parameter

Show Code

_20
<script>
_20
document.addEventListener('memberr-toggle:change', () => {
_20
console.log('memberr-toggle:change');
_20
_20
fetch(`${window.Shopify.routes.root}cart.js`)
_20
.then((res) => res.json())
_20
.then((cart) => {
_20
document.dispatchEvent(
_20
new CustomEvent("cart:updated", {
_20
bubbles: true,
_20
detail: {
_20
cart
_20
}
_20
})
_20
)
_20
})
_20
}, {
_20
bubbles: true
_20
});
_20
</script>

Pup-Sub

Show Code

_17
<script>
_17
document.addEventListener('memberr-toggle:change', () => {
_17
console.log('memberr-toggle:change');
_17
_17
// Publish events to update the cart
_17
publish(PUB_SUB_EVENTS.quantityUpdate, undefined);
_17
publish(PUB_SUB_EVENTS.cartUpdate, { source: 'memberr-toggle' });
_17
_17
// Also dispatch an event to the dom for components that listen for it
_17
document.dispatchEvent(new CustomEvent('cart:refresh', {
_17
bubbles: true,
_17
detail: { source: 'memberr-toggle' }
_17
}));
_17
}, {
_17
bubbles: true
_17
});
_17
</script>

Pup-Sub with Cart render update

Show Code

_24
<script>
_24
document.addEventListener('memberr-toggle:change', () => {
_24
// Trigger cart update when memberr toggle changes
_24
// Using the same event structure as product-form.js for consistency
_24
publish(PUB_SUB_EVENTS.cartUpdate, {
_24
source: 'memberr-toggle'
_24
});
_24
_24
// If cart drawer exists, refresh it
_24
const cartDrawer = document.querySelector('cart-drawer');
_24
if (cartDrawer) {
_24
fetch(window.location.pathname + '?sections=cart-drawer')
_24
.then(response => response.json())
_24
.then(data => {
_24
if (data['cart-drawer']) {
_24
cartDrawer.renderContents(data);
_24
}
_24
})
_24
.catch(error => console.error('Error refreshing cart drawer:', error));
_24
}
_24
}, {
_24
bubbles: true
_24
});
_24
</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

_49
<style>
_49
.memberr-sc-toggle-wrapper {
_49
display: flex;
_49
align-items: center;
_49
justify-content: space-between;
_49
padding: 1rem 0;
_49
width: 100%;
_49
}
_49
</style>
_49
_49
<div class="memberr-sc-toggle-wrapper">
_49
<span>
_49
{% if customer %}
_49
Apply
_49
<memberr-current-store-credit-balance></memberr-current-store-credit-balance>
_49
<memberr-store-credit-name></memberr-store-credit-name>
_49
{% else %}
_49
Apply <memberr-store-credit-name></memberr-store-credit-name> (Login required)
_49
{% endif %}
_49
</span>
_49
<memberr-store-credit-toggle
_49
active-color="#000000"
_49
height="24"
_49
width="48"
_49
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
_49
style="height: 24px;"
_49
id="store-credit-toggle"
_49
></memberr-store-credit-toggle>
_49
</div>
_49
_49
<script>
_49
document.addEventListener('DOMContentLoaded', function () {
_49
const toggle = document.getElementById('store-credit-toggle');
_49
if (!toggle) return;
_49
const customerLoggedIn = {{ customer | json }} !== null;
_49
toggle.addEventListener('click', function () {
_49
if (!customerLoggedIn) {
_49
window.location.href = '/account/login';
_49
}
_49
});
_49
});
_49
// Event for external listener (optional)
_49
document.documentElement.dispatchEvent(new CustomEvent("cart:updated", {
_49
bubbles: true,
_49
detail: {
_49
cart: cartContent
_49
}
_49
}));
_49
</script>