Override problems

[iratefox]

Initially, I really enjoyed Snipcart as I started integrating it into a website I’m working on and one of the first things I did was throw in an override to test the capability matches expectations, and it did. However, I didn’t realise that this would be the end of customising as far as I can see…

I just cannot work my way through the documentation. I mean, I think I can - it all seems to make complete sense to me - until I actually implement it on the site, then it totally fails. And because the documentation seems to make sense to me I just have no clue where to start in working out the problems…

I started with <featured-payment-methods> to basically copy the default listing on Default theme reference – Snipcart Documentation to then add in Amex and remove the ‘Secured by Snipcart’ text element. Oddly enough, despite the stressing of the root div requirement, it only worked when this wasn’t wrapped. I didn’t think much of it at the time, as it worked perfectly and I just assumed that the documentation may not be fully up-to-date…

Since then, I’ve tried to update the <cart-summary>, which turns out should have been <cart> based on a forum post I saw here (not clear in docs to be honest) - so I tried again with this element and either end up with a totally blank cart element, or absolutely no changes whatsoever.

As mentioned above, I just don’t actually know where to start with working out what is going wrong here so would really appreciate a detailed tutorial/updated documentation around this.

This works, unexpectedly:

<div hidden id="snipcart" data-api-key="{key}" data-config-modal-style="side" data-currency="gbp">
    <featured-payment-methods>
        <div class="snipcart-featured-payment-methods">
            <ul class="snipcart-featured-payment-methods__list">
                <li class="snipcart-featured-payment-methods__list-item">
                    <icon name="card-visa" custom="true" alt="Visa" height="60px" class="snipcart__icon--brand" style="height: 60px !important;"></icon>
                </li>
                <li class="snipcart-featured-payment-methods__list-item">
                    <icon name="card-mastercard" custom="true" alt="Mastercard" height="60px" class="snipcart__icon--brand" style="height: 60px !important;"></icon>
                </li>
                <li class="snipcart-featured-payment-methods__list-item">
                    <icon name="card-amex" custom="true" alt="Amex" height="60px" class="snipcart__icon--brand" style="height: 60px !important;"></icon>
                </li>
            </ul>
        </div>
    </featured-payment-methods>
</div>

This does not work, unexpectedly:

<div hidden id="snipcart" data-api-key="{key}" data-config-modal-style="side" data-currency="gbp">
    <featured-payment-methods>
        <div class="snipcart-featured-payment-methods">
            <ul class="snipcart-featured-payment-methods__list">
                <li class="snipcart-featured-payment-methods__list-item">
                    <icon name="card-visa" custom="true" alt="Visa" height="60px" class="snipcart__icon--brand" style="height: 60px !important;"></icon>
                </li>
                <li class="snipcart-featured-payment-methods__list-item">
                    <icon name="card-mastercard" custom="true" alt="Mastercard" height="60px" class="snipcart__icon--brand" style="height: 60px !important;"></icon>
                </li>
                <li class="snipcart-featured-payment-methods__list-item">
                    <icon name="card-amex" custom="true" alt="Amex" height="60px" class="snipcart__icon--brand" style="height: 60px !important;"></icon>
                </li>
            </ul>
        </div>
    </featured-payment-methods>

    <cart isSideCart="true" editingCart="true">
        <layout v-click-outside="clickedOutside">
            <overridable
                name="cart"
                section="header"
            >
                <cart-header
                    title="header.title_cart_summary"
                    :show-items-count="true"
                    :show-account-menu="true"
                    v-if="!editingCart"
                ></cart-header>
            </overridable>
            <loading-screen
                message="cart.loading"
                class="snipcart-layout__content"
                :class="layoutContentCssClasses"
            >
                <div
                    class="snipcart-cart__secondary-header"
                    v-if="editingCart"
                >
                    <h1 class="snipcart__font--secondary snipcart-cart__secondary-header-title snipcart__font--bold snipcart__font--xlarge">
                        {{ $localize("header.title_cart_summary") }}
                    </h1>
                    <close-side-cart-action :isCartSummary="!isSideCart">
                        <icon
                            name="plus"
                            class="snipcart__icon--medium snipcart__icon--angled"
                            alt="item.remove_item"
                        ></icon>
                    </close-side-cart-action>
                </div>
                <flash-message
                    class="snipcart-cart__flash-message"
                    type="error"
                    v-if="promptItemConfigurationError"
                    :title="$localize(`errors.cart_items.${itemConfigurationErrorLocale}.title`)"
                    :description="$localize(`errors.cart_items.${itemConfigurationErrorLocale}.description`)"
                    icon="box"
                >
                    <button-link
                        label="actions.clear_cart"
                        @click="clearCart"
                    ></button-link>
  

                    <button-link
                        label="actions.dismiss"
                        @click="dismissItemConfigurationError"  
                    ></button-link>
                </flash-message>
                <overridable
                    name="cart"
                    v-if="hasItems"
                >
                    <section class="snipcart-cart__content">
                        <item-list
                            item-template="item-line"
                            class="snipcart-item-list--no-shadow"
                            :showDescription="!isSideCart"
                        >
                            <template
                                v-slot:footer
                                v-if="isSideCart && hasActiveDiscountsTriggerableByCode"
                            >
                                <li class="snipcart-item-line snipcart-item-line--cart-edit">
                                    <div class="snipcart-item-line__container">
                                        <discount-box class="snipcart-cart__discount-box"></discount-box>
                                    </div>
                                </li>
                            </template>
                        </item-list>
                        <div class="snipcart-cart__footer">
                            <div class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions">
                                <discount-box
                                    v-if="!isSideCart && hasActiveDiscountsTriggerableByCode"
                                    class="snipcart-cart__discount-box"
                                ></discount-box>
                            </div>
   

                            <div class="snipcart-cart__footer-col">
                                <summary-fees
                                    class="snipcart-cart-summary-fees--reverse"
                                    :summaryData="summaryFeesProvider"
                                >
                                    {{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
                                </summary-fees>
    

                                <footer v-if="!editingCart || isSideCart" class="snipcart-cart__footer-buttons">
                                    <flash-message
                                        type="error"
                                        v-if="errors != null"
                                        :title="$localize('errors.order_validation.custom_fields_validation.title')"
                                    >
                                        {{$localize('errors.order_validation.custom_fields_validation.description')}}
                                    </flash-message>
                                    <!-- BUTTON: checkout -->
                                    <button-primary
                                        label="actions.checkout"
                                        icon="continue-arrow"
                                        :state="checkoutDisabled ? 'disabled' : undefined"
                                        @click="checkout"
                                    ></button-primary>
                                    <button-link
                                        v-if="isSideCart"
                                        label="cart.view_detailed_cart"
                                        @click="viewDetailedCart"
                                    ></button-link>
                                </footer>
    

                                <div class="snipcart-cart__featured-payment-methods-container">
                                    <featured-payment-methods v-if="!editingCart"></featured-payment-methods>
                                </div>
                            </div>
                        </div>
                    </section>
                </overridable>
                <empty-cart v-else></empty-cart>
            </loading-screen>
            <transition name="snipcart-transition--slide-in">
                <router-view />
            </transition>
        </layout>
    </cart>
</div>

I’ve tried wrapping in a root div, I’ve tried without a root div, I’ve tried removing the attributes for cart and leaving as is, I’ve tried placing root divs at alternative levels/places, I’ve also tried only honing in on one element of the cart here to no avail.

I just don’t get it, and I can’t understand why.

This seems like such a great tool with fantastic potential to work for many of the clients our business typically gets, but something seems amiss here…

I see quite a few blogs on the main website about general website design, but nothing really relating to the features like this of the product.

I’d really appreciate some support with where I may be going wrong here… Has anyone made a decent tutorial to customise Snipcart?

Thanks in advance

[iratefox]

So maybe this is more of a documentation/functional thing… I have tried to customise other components today and it’s actually worked as expected most items. This leaves me wondering, what is the cart and cart-summary allowing us to customise if nothing seems to work for these? Is this a documentation problem, are these elements not what I think they may be, or can you not customise the whole element?

I waded through all documentation for Snipcart while trying to resolve this and I have to say that it’s really lacking in good explanations and examples. I’m now comfortable that I understood things correctly, but it still doesn’t explain why I haven’t been able to achieve anything with these components. Guidance here would be useful.

[dominic]

Hi there,

First of all, I want to thank you for this detailed feedback. The component customization is quite an advanced feature and we definitely always keep in mind ways to improve its documentation.

Concerning your particular cases, your first overrided template featured-payment-methods is working as expected: Inside <featured-payment-methods> there is a single root element (<div>) containing all your HTML.

For the cart component, there is an issue with the camel cased props. We are addressing this issue on our end but in the meantime, you can convert the camel-case props (summaryData) into kebab-case (summary-data). For this particular component, the generated template in the documentation is a bit misleading as the actual overridable cart component is deeper in the structure:

<overridable
	name="cart"
	v-if="hasItems"
>
	<section class="snipcart-cart__content">
		<item-list
			item-template="item-line"
			class="snipcart-item-list--no-shadow"
			:show-description="!isSideCart"
		>
			<template
				v-slot:footer
				v-if="isSideCart && hasActiveDiscountsTriggerableByCode"
			>
				<li class="snipcart-item-line snipcart-item-line--cart-edit">
					<div class="snipcart-item-line__container">
						<discount-box class="snipcart-cart__discount-box"></discount-box>
					</div>
				</li>
			</template>
		</item-list>
		<div class="snipcart-cart__footer">
			<div class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions">
				<discount-box
					v-if="!isSideCart && hasActiveDiscountsTriggerableByCode"
					class="snipcart-cart__discount-box"
				></discount-box>
			</div>

			<div class="snipcart-cart__footer-col">
				<summary-fees
					class="snipcart-cart-summary-fees--reverse"
					:summary-data="summaryFeesProvider"
				>
					{{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
				</summary-fees>

				<footer v-if="!editingCart || isSideCart" class="snipcart-cart__footer-buttons">
					<flash-message
						type="error"
						v-if="errors != null"
						:title="$localize('errors.order_validation.custom_fields_validation.title')"
					>
						{{$localize('errors.order_validation.custom_fields_validation.description')}}
					</flash-message>
					<!-- BUTTON: checkout -->
					<button-primary
						label="actions.checkout"
						icon="continue-arrow"
						:state="checkoutDisabled ? 'disabled' : undefined"
						@click="checkout"
					></button-primary>
					<button-link
						v-if="isSideCart"
						label="cart.view_detailed_cart"
						@click="viewDetailedCart"
					></button-link>
				</footer>

				<div class="snipcart-cart__featured-payment-methods-container">
					<featured-payment-methods v-if="!editingCart"></featured-payment-methods>
				</div>
			</div>
		</div>
	</section>
</overridable>

Let me know if this helps,
Cheers!

[iratefox]

Thanks for the update. I’ll look into this again next week and see how I got on.

[ben1]

This one just hit me too - would never have figured it out without this post!
Is the camel-case issue still present on the latest release (I’m on 3.1)?