How to add a link to the bottom of the cart screen on both the side and full screen

I need to add some link text to the cart. I currently cant figure out how to add the link to the bottom of the screen. Both the side cart and full screen cart.

image

Hi there,
I have created a little CodeSandbox where you can see how to override the cart template.

Hope this helps!

Thansk @Felix for that.

I did end up finding the component to override. so here is my code for future ref. I created a snipcart-template.htmnl file and added to following code. I added a custom css class to our custom snipcart.css file.

Also I noticed this override component is not documented on your site. I do find the customization is incredibly hard to understand. May need to improve that.

  <summary-fees
    class="snipcart-cart-summary-fees--reverse"
    :summaryData="summaryFeesProvider"
  >
    <div class="root">
      <div>
        <a
          class="tax-exempt"
          href="<insert link>"
          target="_blank"
        >
          Important Tax Exempt Info
        </a>
      </div>
      <div>
        {{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
      </div>
    </div>
  </summary-fees>
1 Like

My fix I thought was working blanks out the tax total info when going to checkout. Your code also doesn’t work since its at the line item level and not at the summary of fees level.

Could you provide me a solution that would not cause the total to not be shown on the checkout screen and the invoice?

Hey @master12,

Is this more what you are looking for?

If so, this is the code I used to override the component. You can omit the hr element if you don’t want your link to be separated in another subsction of the summary:

<cart-summary section="items">
    <div class="root">
        <cart-summary-items-list class="snipcart-cart-summary__items"></cart-summary-items-list>
        <hr class="snipcart-cart-summary__separator" />
        <a href="http" target="_blank" rel="noopener noreferrer">My custom link</a>
    </div>
</cart-summary>

Hope this helps!
Cheers,

Actually that is what I ended up doing however I don’t know why I cant also add that same info to the other screens. Such as the side cart view and the detailed view. I would assume cart-summary would be for all cart summary views.

This is a low priority but the customization is a hard to get working and has unexpected behavior. More than happy to share my thoughts if you ever address this issue.

Hi @master12,
The simple reason is that <cart-summary> is the template for the screenshot you sent before. The side-cart with the checkout button and the detailed-cart the is <cart> template. We designed the customization that way because it allows for more control for the user, as it is easier to modify multiple components than trying to implement conditional rendering in a huge template.
My trick to finding which template are used where is to check the default layout in the browser dev tools and look at the CSS classes, then refer to this link to find the exact template.

Thanks for the insight.

I do look at the inspector and try to figure out how to customize based on classes. However I still find it incredibly time consuming to find the solution.

I also think that the behavior I witnessed when I customized the ‘summary-fees’ component and that somehow had an effect on the order summary page as well as the invoice was surprising. So I do think things should be modular, but I don’t think you have achieved that. I also think the components are too general and its hard to understand what screen does and does not get customized. There are just too many unknowns that the documentation doesn’t cover.

That all being said I would be willing to have a session to show you where I am struggling and perhaps identify some potential solutions. I do have over 20 years of experience, so this isn’t feedback from a novice.

2 Likes

Thanks for the thorough feedback @master12,

We’re well aware that this documentation section lacks clarity. We have plans to redefine the way it’s presented so that it better communicates how and where components are used.

I can also see how reusing our components in various places in the UI makes customization harder. We’ll keep that in mind for sure when making improvements to the cart application.

Cheers,