Snipcart Template Customization Not Working in NextJS

Support
#1

Hello! I’m trying to override the Discount Code box to read text other than “Promo Code?” I think it’s a little unclear and that users could use better guidance to enter a discount coupon code.

However, I can’t change this text with a snipcart-templates.html file as instructed in the docs (Customization). The button’s text remains “Promo code?” in the cart in my online shop.

Here’s my template html file - since I’m using NextJS, I ended up having to move it to the /public directory because otherwise I kept getting a 404 on the console: meadowreveries/public/snipcart-templates.html at main · beckrecca/meadowreveries · GitHub

And I’m importing Snipcart via app/layout.tsx: meadowreveries/app/layout.tsx at main · beckrecca/meadowreveries · GitHub

Is something wrong with my HTML, or is this more of a NextJS issue?

#2

Okay I followed this guide here and wrapped it in a div as suggested, but it still doesn’t work:

Discount box text persists as ‘Promo code?’ (view in production here: Meadow Reveries)

#3

Hi and welcome to Snipcart :slight_smile:

I think you should switch the order. Right now you have

div > discount-box

and it should be

discount-box > div.

I hope that helps.

#4

Thank you for your answer, I tried your suggestion of rearranging it to discount-box > div but the override still hasn’t taken place: meadowreveries/public/snipcart-templates.html at main · beckrecca/meadowreveries · GitHub – the box still just reads “Promo code?”

Maybe it’s not possible to override the text in the discount box? Is Snipcart templating intended to re-arrange the elements but not actually change their values? Using CSS I was able to append text after “Promo Code?” with a pseudo-element but I’m really stuck with overriding this value entirely.

#5

Hey. I am afraid, discount-box as-is isn’t overridable.

The docs entry for customization states that “every component which has a ‘default template’ is overridable”. Refer to it here.

However, if it’s only the text you want to change, you can try to change the strings for the discount box, as in Localization – Snipcart Documentation

#6

Thanks poljpocket. I am definitely confused.

Where in Customization – Snipcart Documentation does it mention how to change the strings for a component? The examples given are how to strip down <item-line> component to bare minimum, override the <address-fields> top section, and alter the <address-fields> component to not use autocomplete.

Or do you mean I should try like in some examples from Default theme reference – Snipcart Documentation, doing something like
<discount-box placeholder="<string>"></discount-box>

#7

I am sorry, my link was wrong. I have corrected it. Here it is again: Localization – Snipcart Documentation.

You can then refer to the GitHub repo for the localizations and specifically override the strings Snipcart uses. The strings for discount-box are here on lines 778 and after.

Then, from the documentation, I can come up with something like this:

<script>
    document.addEventListener('snipcart.ready', function() {
        Snipcart.api.session.setLanguage('en', {
            "discount_box": {
                "promo_code": "Do you have a discount code?",
                "promo_code_placeholder": "Enter any discount codes here",
                "promocode_applied": "Discount code applied"
            },
        });
    });
</script>

I hope, that helps.

#8

Thank you so much, this worked beautifully!