The Product ID in the example is 25, so change that to the corresponding product that you wish to add to the page.
Default method: an anchor link
Copy one of the below links to add the product to the cart.
For direct purchase
<a href="/#/shopping-cart/product-25">Buy now</a>
For requesting a quote
<a href="/#/quote-cart/product-25">Request for a quote</a>
Secondary method: using a CSS classes
Sometimes the CMS makes it impossible to use anchors in links. An alternative way is to use custom CSS classes that HeadQ will recognize.
For direct purchase
<a href="#" class="headq-add-to-cart headq-item-id-25">
Buy now
</a>
Third method: using data-attribute
<button data-item-id="123" class="headq-add-to-cart">
Buy now
</button
If you have total control of the source code, you can use data attributes to explicitly define the ID of the product. Define product ID with attribute data-item-id.
Fourth method: using SDK directly
Please note that the SDK is not fully implemented and documented yet, but some features can already be used.
Once the HeadQ library has been loaded, it can be accessed with JavaScript from the headq object in the DOM.
headq.ui.configureItem(25)