Handy little "hack" for Paysnap to put a cart button on all pages

I’m building out a demo site based around the @yabdab Paysnap (it’s actually for a client, but is starting like as a template).

One thing I wanted was to have the cart button (with totals, etc.) on all pages. The site is built with @Lucas UIkit, so adding the Paysnap cart button to all pages was easy…

  1. Stick your Paysnap base in a partial.
  2. Add that partial to all pages.
  3. Add an “Empty” item to the Uikit menu.
  4. Drop the Paysnap cart button into this “empty” item

This worked grand but did present a behaviour element that wasn’t intuitive for the user.

If you use Paysnap, you will know that when you click the cart button, a popup appears with cart details, payment options and a “Keep Shopping” button, which closes the popup.

Now obviously it’s intended that the Paysnap cart button will be on the page with the products, not all pages, so just having the Keep Shopping button close the popup works, but when it’s on all pages it’s doesn’t do what some users might expect: To close the popup and navigate the user to the products page.

This is an easy fix by putting the following code into the Keep Shopping settings box…

<a href="/paystore/store/" style="color: #fff;"><i class="fa fa-cart-plus"></i> Keep Shopping</a>

Obviously, change it as required.

I’ve tested it, and all seems to be working fine. Example: https://samplesites.caffeineinjection.com/paystore/

I know the instances where someone will want to do this is small, but it’s a handy little “hack” to expand the functionality of the brilliant Paysnap stack suite.

4 Likes