New to Snipcart, would appreciate help on quick question

Support
#1

Hello!
Appreciate anyone taking the time to help.

I’m kind of new to development, and want to implement a simple customization to the snipcart cart so that it displays the description in the mini cart modal. I followed the documentation and made my snipcart-templates.html file with the overrides.

What I’m confused about is this part when it talks about inserting a node:

"To override a template, insert a node into div#snipcart. The node tag must be the name of the component you want to override.

<div hidden id="snipcart" data-api-key="<API_KEY>">
    <component-to-override>
        <!-- The template must have a single root element -->
        <div class="root">
        </div>
    </component-to-override>
</div>

I understand how to edit that div with a hidden id and the api key, but how do I go about inserting a node into #divsnipcart?

Pardon the ignorance, would appreciate any help with this.

-Alex

#2

Hey @Alex71

The documentation was a bit misleading here and I went and updated it. Basically there were 2 ways before 3.4 to specify components to override:

  1. Directly in the Snipcart div
  2. In an external file

With the new installation script added in version 3.4, we only recommend the external file approach, like you have started. The next documentation snippets were still refering to the Snipcart div instead of the external file. This is now fixed.

Now that this confusion is out of the way, to answer your question, “inserting a node” here means “adding html content inside an html element”.

For example, if you wanted to customize the item-line template, your external snipcart-templates.html file would look like this:

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

	<body>
		<div id="snipcart-templates">
			<item-line>
				<div class="root">
					<h2>Custom Item Line</h2>
					<div>This is my overridden item-line template.</div>
				</div>
			</item-line>
		</div>
	</body>
</html>

Let me know if this helps,
Cheers!

1 Like
#3

Hey Dominic!

Thank you so much, this is exactly the information I needed.

Appreciate your time,
Alex

1 Like