Add stickers checkbox to the order in drawer cart

[MKSCshop]

Hi,

I would like to add option to the cart that would allow clients to indicate if they want free stickers. I have tried code below but it doesn`t work for cart-drawer.liquid only for normal cart page

TIA

<p class="cart-attribute__field">
<input type="hidden" name="attributes[Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?]" value="No">
<input type="checkbox" name="attributes[Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?]" value="Yes"{% if cart.attributes["Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?"] == "Yes" %} checked{% endif %}>
<label>Do you need an alibi ln your package. In the form of Congratulations on winning this ltem'?</label>
</p>

[Sweet_Savior_3]

hello

can you please send me your Store URL?

and for that you need to hire a developer.

[MKSCshop]

Hi, sure its miekkosc.pl

I have already managed to do it for normal cart page and if the drawer settings is unavaiable I`ll stick to what I already know I can do. However if there is an option to integrate this feature into the drawer type cart... I`d be grateful for all the help.

[MKSCshop · Accepted solution]

So I found a free solution by ChatGPT :

<!-- Inside cart-drawer.liquid -->

<!-- ... (previous code) ... -->

<!-- Add the checkbox section before the CTAs section -->
<div class="cart-drawer__free-stickers">
<label for="freeStickersCheckbox">
<input type="checkbox" id="freeStickersCheckbox" name="freeStickers"> Include free stickers
</label>
</div>

<!-- CTAs -->
<div class="cart__ctas" {{ block.shopify_attributes }}>
<noscript>
<button type="submit" class="cart__update-button button button--secondary" form="CartDrawer-Form">
{{ 'sections.cart.update' | t }}
</button>
</noscript>

<button
type="submit"
id="CartDrawer-Checkout"
class="cart__checkout-button button"
name="checkout"
form="CartDrawer-Form"
{% if cart == empty %}
disabled
{% endif %}
>
{{ 'sections.cart.checkout' | t }}
</button>
</div>

<!-- ... (remaining code) ... -->

<!-- Add the following script block at the end of cart-drawer.liquid -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const freeStickersCheckbox = document.getElementById('freeStickersCheckbox');
const cartForm = document.getElementById('CartDrawer-Form');

if (freeStickersCheckbox && cartForm) {
cartForm.addEventListener('submit', function (event) {
const includeFreeStickers = freeStickersCheckbox.checked;

// You can perform any action with includeFreeStickers here,
// for example, send it to the server, log it, etc.
console.log('Include Free Stickers:', includeFreeStickers);

// Continue with the regular cart submission logic
// For example, you can submit the form programmatically:
// cartForm.submit();
});
}
});
</script>

Works like a charm