Integration with BOLD Upsell App



First of all, make sure that the product template in Shopify contains the needed script from BOLD Upsell just above the add to cart form:

// ...some Shopify code here

// this script tag needs to be added
      window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ | json }});
      {%- for variant in product.variants -%} window.BOLD.common.Shopify.saveVariant({{ | json }}, {product_id: {{ | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id | json }}'}); {%- endfor -%}

// then add the form 
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">
      <select hidden name="id" id="ProductSelect-{{ }}" class="product-form__variants no-js">
// ...

Then we need to adjust the code in the ProductCard/view component:

// ...some code here
import { lifecycle } from 'recompose'; //we would need lifecycle

// ...some code here

// An example of an 'Add to cart' button
const AddToCartButton = ({ onClick, item }) => (
      <form enctype='multipart/form-data' class='product-form' id='AddToCartForm' onSubmit={(e) => {e.preventDefault();}} >
        <input hidden name='id' value={item.get(['selected_variant_id'])} />//or the variant that needs to be added to cart
        <button className='findify-product-card__addtobag-bttn addtocart button dark'  onClick={onClick}>//onClick function should do regular add to cart business
            <use xlinkHref="#light--addtobag"/>
          Add to Bag
   const enhancer = lifecycle({
      const { item } = this.props;
      window.BOLD.common.Shopify.saveProduct(item.get('product_url'), item.get('id'));

// ...some code here

// AddToCart component can be added to the productCard
// also see for how to add an 'Add to cart' button

export default enhancer(ProductCardView); //wrap the productCard component with enhancer