Code Snippets Manager

In this article we will provide a full explanation on the usage of the Custom Snippets found in PinnacleCart. A practical guide will be published soon

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

Complexity Level: Medium

Estimated Time for Completion: 5 - 10 minutes

Settings > Advanced Settings > Snippets

Script Name - the nick name for this snippet to help you remember what it is for

Script ID - 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 of 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 own little piece of css or js/jquery you need loaded

  • 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 own 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 End Body 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 no 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
Was this article helpful?
0 out of 0 found this helpful