HeadQ is a headless eCommerce platform which allows making orders via API. This makes possible to create point of sale in every place you interact with your customer. Installation is easy and you’re ready sell online within minutes.

For making implementation easy for website, we have generated helpful widgets to implement eCommerce for your current website.

HeadQ eCommerce tag

ECommerce functionality is loaded via Javascript library. It contains the business logic to create and configure orders. Tag is installed to your website template or loaded via tag manager of your choosing. For installation, all you need to know is your store ID.

<script type="text/javascript"> (function(h,e,a,d,q) { h.__HQ__ = { store: 'store_id' } d = e.getElementsByTagName('head')[0]; a = e.createElement('script'); a.type = 'text/javascript'; a.src = '<https://cdn.myheadq.com/static/headq.js>'; d.appendChild(a); q = e.createElement('link'); q.rel = 'stylesheet'; q.href = '<https://cdn.myheadq.com/static/headq.css>'; q.type = 'text/css'; d.appendChild(q); })(window,document); </script>

Widgets

For the store implementation, HeadQ library will add the eCommerce functionality to your existing elements of your website. So you only need to add the elements (such as buttons) to the page and library will take care of the rest. You have the full control how the widgets look on your website and the look and feel of the widgets will come from your own stylesheets.

Add to cart button

Add to cart button is the element you want your clients to push. Typically is placed in the product page next to the product description. It will open the product configurator.

Button can be <button>, <div>, <a> tag or actually any type of element. For the implementation, we have to tell HeadQ library that which item this button will open into the configurator.

<a href="#" data-item-id="123" class="headq-add-to-cart btn btn-primary">Buy now</a>
  • data-item-id is the key to identify which product is in question. You will get the identifier in your store’s product management.

  • data-bundle-id is the key to identify which product bundle is in question. You will get the identifier in your store’s product management. Use this attribute instead of data-item-id if button should add bundle to the cart instead of single product.

  • class value headq-add-to-cart is the key to inform library that store functionality should be added to this button.

Item / bundle price

Item price is the element that contains the price of the product. Typically is placed in the product page next to the buy button. It will automatically update based on current price. This is especially handy, if you store has customer specific prices is use.

Element can any type of element. For the implementation, we have to tell HeadQ library that which item price we are visualizing here.

<span data-item-id="123" class="headq-item-price">$1,599</span>
  • data-item-id is the key to identify which product is in question. You will get the identifier in your store’s product management.

  • data-bundle-id is the key to identify which product bundle is in question. You will get the identifier in your store’s product management.

  • class value headq-item-price is the key to inform library that store functionality should be added to this button.

Cashier (Cart, Login)

Cashier button opens the cart and list the items inside.

Element can any type of element. There can be only one cart at the page.

<button class="headq-cashier"><span class="cart-icon"></span> Cart</button>
  • class value headq-cashier is the key to inform library that store functionality should be added to this button.

Components

Components are collection of user interface elements that allows users to interact with the store. Changing the look and feel for these components are limited but possible via your own stylesheets. Components are core functionality of the library and the their logic can be controlled in your store settings.

Item configurator

Item configurator is an overlay which open when user clicks add to cart button. Overlay contains the featured image and product description defined to the item. Item can also have optional configurations that allows user configure the product. If different configurations have effects to the pricing, the effects are clearly displayed.

When user approves the configuration and price by clicking add to cart button, item is added to the cart with it’s configuration.

Cart contents

Cart contents lists the items in the cart. User has options to remove the items from the cart or checkout.

Did this answer your question?