Video w/ some extra context:
Add to Quote
/// Product Display Page buttons
We inject these using the BC script manager, but they can be hard-coded to the theme if you'd like. You can turn our injected button on and off in the QN dashboard under the form and button settings page. (This assumes you've already been migrated to the latest version of QN.)
For long term maintenance, we find it's best to inject the buttons. We can change the container they are injected to if they are not injecting where you like, or you are using non-standard containers on your custom theme. We have most themes pre-configured to work based on the theme setting in the QN dashboard.
If you would like to hard-code the button, you'd do something similar to the following:
The important part:
onclick="QN.add_product(event, false)"
Sample Code:
<button id="qn-add-to-quote" onclick="QN.add_product(event, false)" class="qn-add-to-quote button button--secondary button button-secondary">Add To Quote</button>
Category Buttons
/// These must be hardcoded to theme.
These will redirect to the product page, validate for options, inventory, etc.
It is possible to set these up to work from the category page, and submit the product directly to our quote cart from the category page. Contact us if this is required.
This code is usually added to card.html or list-item.html files.
The important part:
href="{{url}}?add_to_quote=True"
Sample Code:
<!-- Quote Ninja Category Button -->
<a href="{{url}}?add_to_quote=True" class="button button--small button--primary card-figcaption-button">Add to Quote</a>
<!-- Quote Ninja Category Button -->
☞Note: We used to require a script on the admin pages for these links to work. This is no longer required when using the below updated method of calling our form.
Widget and/or View Quote Button
/// Accessing our Quote Dialog
By default, we inject a widget to get things operating quickly. This is typically replaced by a hardcoded "View Quote" link which needs to be added to the BigCommerce store theme.
The View Quote Button and Widget open the "Current Quote" tab of the Quote Ninja Modal
The important part:
href="/?show_quote_window=quote-view"
Sample "View Quote" code from SuperMarket based theme.
<!-- Quote Ninja Header Link -->
<li class="navUser-item navUser-item--cart">
<a id="quote-view-button" class="navUser-action" href="/?show_quote_window=quote-view">
<span class="navUser-item-icon"><svg class ="icon icon-quote" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" style="height: 25px; width: 25px;"><g><title>View Quote</title><path d="M48.227,42.016c-2.738-0.35-5.412-1.432-7.513-3.024l2.483-3.629c1.719,1.305,3.311,2.196,5.188,2.579v-5.062 c-4.584-1.242-6.844-2.961-6.844-6.749v-0.064c0-3.501,2.674-5.826,6.686-6.24v-1.847h3.311v1.942 c2.26,0.287,4.17,1.114,5.921,2.324l-2.133,3.725c-1.273-0.86-2.642-1.528-3.948-1.878v4.839c4.84,1.306,6.909,3.247,6.909,6.813 v0.063c0,3.566-2.737,5.858-6.749,6.272v3.152h-3.311V42.016z M48.386,28.135v-4.33c-1.56,0.191-2.196,0.955-2.196,1.974v0.063 C46.189,26.862,46.635,27.499,48.386,28.135z M51.378,33.643V38.1c1.498-0.223,2.261-0.892,2.261-2.038v-0.064 C53.639,34.948,53.098,34.28,51.378,33.643z"></path></g><path d="M15.602,5.897v89.41h67.058V5.897H15.602z M78.3,89.495H19.96V11.709H78.3V89.495z"></path><rect x="30.291" y="53.786" width="39.802" height="4.312"></rect><rect x="30.291" y="61.746" width="39.802" height="4.313"></rect><rect x="30.291" y="69.707" width="39.802" height="4.312"></rect><rect x="30.291" y="77.667" width="39.802" height="4.312"></rect></svg></span>
<span class="navUser-item-cartLabel">View Quote</span>
</a>
</li>
<!-- Quote Ninja Header Link Additional CSS applied as well -->
My Quotes
/// This is used to access the submitted quotes section of our form.
This link is helpful when you have a lot of repeat customers that login, or are using a Punchout System where a user must access the quote from a gated portal to load it into their cart . Most customers are going to use the quote from their email, and we consider this a nice to have implementation item, but certainly not critical for everyone. This can be added to an account menu, etc.
The important part:
href="/?show_quote_window=submitted-quotes"
Sample Code:
<a class="navUser-action" href="/?show_quote_window=submitted-quotes">
<span class="navUser-item-quoteLabel">My Quotes</span>
</a>