Custom template not working in Astro

Support
#1

Hi,

I’m trying to build my first Snipcart integration in Astro and attempting to change the trash and shopping bag icons.

I understand the way to do this is via customised templates and have followed the instructions using the line-item example code to test.

Unfortunately, I can’t seem to get it to work. This is the html:

<!DOCTYPE html>
<html>
    <head><title>Templates</title></head>

    <body>
        <div id="snipcart-templates">

            <item-line>
                <!-- The template must have a single root element -->
                <div class="root">
                    <h2>Custom Item Line</h2>
                    <div>This is my overridden item-line template.</div>
                </div>
            </item-line>
            
         </div>
    </body>
</html>

And my snipcart.js:

templatesUrl: “/snipcart-templates.html”,

The html template is in the same folder as the js file (inside my Astro public folder). Any thoughts?

#2

Actually I have this working using a more explicit path.

But as a followup question, how would I modify the cart icon and product counter in the header of the detailed summary? I tried this but didn’t work:

<!DOCTYPE html>
<html>
    <head><title>Templates</title></head>

    <body>
        <div id="snipcart-templates">

            <show-detailed-cart-action>
                <!-- The template must have a single root element -->
                <div class="root">
                    <div>new icon here</div>
                    <template v-if="!hasSubscription">
                        {{ itemsCount }}
                    </template>
                </div>
            </show-detailed-cart-action>
            
         </div>
    </body>
</html>
#3

You’ll need to override the whole cart-header

    <cart-header>
        <div>
            <header class="snipcart-cart-header" v-if="!loading">
                <close-cart-action class="snipcart-cart-header__close-button snipcart-modal__close">
                    <icon class="snipcart-modal__close-icon" name="back-arrow"></icon>
                    <span class="snipcart-modal__close-title snipcart__font--std">
                        {{ backButtonTitle || $localize('actions.continue_shopping') }}
                    </span>
                </close-cart-action>

                <media name="tablet, large" v-if="title">
                    <h3 class="snipcart-cart-header__title snipcart__font--black snipcart__font--secondary">
                        {{ $localize(title) }}
                    </h3>
                </media>

                <div class="snipcart-cart-header__options">
                    <sign-in-action tag="a" href="#/dashboard" class="snipcart-cart-header__option snipcart-cart-header__sign-in" v-if="showAccountMenu || showSummary">
                        <icon name="user" class="snipcart-cart-header__icon"></icon>
                        {{ $localize('signin_form.signin')}}
                    </sign-in-action>

                    <sign-out-action class="snipcart-cart-header__option snipcart-cart-header__sign-out" v-if="showAccountMenu || showSummary">
                        <icon name="sign-out" class="snipcart-cart-header__icon"></icon>
                        {{ $localize('customer_dashboard.sign_out')}}
                    </sign-out-action>

                    <customer-account-link tag="a" href="#/dashboard" class="snipcart-cart-header__option snipcart-cart-header__customer-account" v-if="(showAccountMenu || showSummary) && showAccountLink">
                        <icon name="user" class="snipcart-cart-header__icon"></icon>
                        {{ $localize('customer_dashboard.my_account') }}
                    </customer-account-link>

                    <show-detailed-cart-action class="snipcart-cart-header__option snipcart-cart-header__count snipcart__font--secondary snipcart__font--bold" v-if="showItemsCount">
                        <div>new icon here</div>
                        <template v-if="!hasSubscription">
                            {{ itemsCount }}
                        </template>
                    </show-detailed-cart-action>

                    <media name="mobile, tablet" class="snipcart-modal__header-summary" v-if="showSummary && !loading">
                        <div class="snipcart-modal__header-summary-title snipcart__font--large snipcart__font--secondary snipcart__font--bold" @click.prevent="toggleSummary">
                            <icon name="cart" class="snipcart-cart-header__icon"></icon>
                            <span>
                                {{ cart.total | money(cart.currency) }}
                            </span>
                            <icon :name="summaryIcon" class="snipcart-cart-header__icon snipcart__icon--medium"></icon>
                        </div>

                        <cart-summary class="snipcart-cart-summary--small" v-if="summaryVisible" @close="closeSummary">
                        </cart-summary>
                    </media>
                </div>
            </header>
            <header class="snipcart-cart-header" v-else>
                <close-cart-action class="snipcart-modal__close">
                    <icon class="snipcart-modal__close-icon" name="back-arrow"></icon>
                    <span class="snipcart-modal__close-title snipcart__font--std">
                        {{ $localize('actions.continue_shopping') }}
                    </span>
                </close-cart-action>
            </header>
        </div>
    <cart-header>
1 Like