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:


_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>

Example implementations

dispatchEvent


_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


_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


_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


_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>