Button: Add To Cart

This is a code sample to render a Snipcart anchor (Add To Cart button) with will hold all data-item-* attributes required by Snipcart. The anchor method is provided by MarkupSnipWire module (which is autoloaded) and can be called via custom API variable$snipwire->anchor()

const snicpartAnchorTypeButton = 1;
const snicpartAnchorTypeLink = 2;

$options = array(
    'label' => ukIcon('cart') . ' ' . __('Add to cart'),
    'class' => 'uk-button uk-button-primary',
    'attr' => array('aria-label' => __('Add item to cart')),
    'type' => snicpartAnchorTypeButton,
);
$anchor = $snipwire->anchor($page, $options);

The API call from above would lead to the following HTML output:

<button
  class="snipcart-add-item uk-button uk-button-primary"
  title="Add to cart"
  aria-label="Add item to cart"
  data-item-name="Festish Wet Warmer"
  data-item-id="1713"
  data-item-price='{"usd":"22.20","eur":"19.90"}'
  data-item-url="http://domain.com/snipcart-shop/festish-wet-warmer/"
  data-item-description="A short product description..."
  data-item-image="http://domain.com/site/assets/files/1713/beer2.65x65-hidpi.jpg"
  data-item-categories="Beer"
  data-item-metadata='{"id":1713,"created":1563363120,"modified":1580402487,"published":1563363120,"created_users_id":41,"modified_users_id":41}' 
  data-item-quantity="1"
  data-item-quantity-step="1"
  data-item-stackable="true"
  data-item-taxable="true"
  data-item-taxes="10% VAT" 
  data-item-has-taxes-included="true"
  data-item-shippable="true">
      <span uk-icon="icon: cart"></span> Add to cart
</button>
Most data-item* parameters in the above output depend on the fields you appended to your ProcessWire product template. Please read the docs section Snipcart Product Fields to get more infos!

Arguments

Name Type(s) Description
product Page The product page which holds Snipcart related product fields
options array

Options for the rendered html tag:

  • id (string): Element id to add (default='').
  • class (string): Any additional class names to add, separated by ' ' (default='').
  • attr (array): Any additional tag attributes to add, as attr => value (default: 'title' => 'Add to cart').
  • label (string): The button or link label (default='Add to cart').
  • type (integer) The anchor type - can be: snicpartAnchorTypeButton = 1 or snicpartAnchorTypeLink = 2 [default=1]