Snippets provide an easy way to implement commonly used code or functions into a larger section of code. In this article, we will provide you with the steps on how you can add custom snippets in PinnacleCart.


Applies to Version(s): 3.8.6 (or Current)

Complexity Level: Medium

Estimated Time for Completion: 5 - 10 minutes


Adding Snippets

        1. Go to the admin panel of your cart and navigate to Front-End > Snippets. To add a Snippet, click on the blue Add Snippet button.

add snippets


        2. Fill up the necessary snippet details then click Save once done or Save/Add More if you want additional snippets.

snippet details


Script Name - This is the nickname for this snippet to help you remember what it is for.


Script ID - This is auto-generated from your Script Name, you can leave it alone unless you desire to change it. It is an internal reference and customers don't see it.


Priority - This is to control which order your snippets are fired in. If you have two or more snippets with the same priority, they will be loaded in the order in which they were added to the cart back end.


Language - Currently, the Snippets tool supports Javascript and CSS-based code and/or files.


Type - Here you can choose from "chunk" or include Chunk - A chunk is your little piece of CSS or js/jquery you need to load.

  • JS Chunk Example:
    1.  $(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
});


  • CSS Chunk Example:
    1. @import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.snip1582 {
background-color: #c47135;
border: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: 'BenchNine', Arial, sans-serif;
font-size: 1em;
font-size: 22px;
line-height: 1em;
margin: 15px 40px;
outline: none;
padding: 12px 40px 10px;
position: relative;
text-transform: uppercase;
font-weight: 700;
}

  • Include - An include is to load your library or file via URL.
  • JS Include example:https://code.jquery.com/jquery-3.2.1.slim.min.js
  • CSS Include example:https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css


Placement - Depending on the installation instructions for your plugin or custom code, you may need to load it in certain spots. To do so, choose from one of the following options:

  • Head - Loads the snippet or chunk inside of the <head></head> code block.
  • Before Body End Tag - Loads the snippet or chunk just before the closing </body> tag.
  • After Body Tag - Loads the snippet or chunk just after the opening <body> tag.
  • Footer - Loads the snippet or chunk inside of the <footer></footer> code block.


Visible - Specifies whether or not the Snippet is active.


Location - Specifies on what page your snippet and or chunk will load.

  • All - Loads your chunk or snippet on all pages.
  • Home Page - Loads your chunk or snippet on just the home page.
  • Category Pages - Loads your chunk or snippet on just the category pages.
  • Product Details - Loads your chunk or snippet on just the product pages.
  • Checkout - Loads your chunk or snippet on just the checkout page.
  • Thank You Page - Loads your chunk or snippet on just the "thank you" page, which is the page that appears after checkout.


If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.