Support add to cart

In Shopify, your theme is leading on how to connect Tweakwise JS with the cart. Due to this fact, there is not a unified way to support add to cart from Tweakwise JS.

To support add to cart for your theme:

Add an add-to-cart button in Plugin Studio.
Use the event hooks to add the product to your Shopify cart.
On succesfully adding the product to the cart, choose what needs to be done
- Redirect to the cart page
- Open the minicart, sidebar
- etc.

Example: redirect to the cart after succesfully adding the produc

Lister pages (i.e. search or commerce)

tweakwiseListerPage({
  //... other options ...,
  on: { 
    // ... other events ...,
    'twn.add-to-cart': function (event) {

      var formData = {
        'items': [{
          'id': event.data.itemno,
          'quantity': 1
        }]
      };

      fetch(location.protocol + '//' + location.host + '/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      })
        .then(response => { return response.json(); })
        .then(response => {

          // redirect to cart, optionally display the cart drawer/popup
          location.href = '/cart'

          return response;
      	}
			)
    }	
  }
})

window['twn-starter-config'].on = {
	// ...,
  'twn.add-to-cart': function (event) {

    var formData = {
      'items': [{
        'id': event.data.itemno,
        'quantity': 1
      }]
    };

    fetch(location.protocol + '//' + location.host + '/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    })
      .then(response => { return response.json(); })
      .then(response => {
      
        // redirect to cart, optionally display the cart drawer/popup
				location.href = '/cart'

        return response;
      })

  }

};

Suggestions

tweakwiseSuggestions({
  //... other options ...,
  on: { 
    // ... other events ...,
    'twn.add-to-cart': function (event) {

      var formData = {
        'items': [{
          'id': event.data.itemno,
          'quantity': 1
        }]
      };

      fetch(location.protocol + '//' + location.host + '/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      })
        .then(response => { return response.json(); })
        .then(response => {

          // redirect to cart, optionally display the cart drawer/popup
          location.href = '/cart'

          return response;
      	}
			)
    }	
  }
});

Recommendations

tweakwiseRecommendations({
  //... other options ...,
  on: { 
    // ... other events ...,
    'twn.add-to-cart': function (event) {

      var formData = {
        'items': [{
          'id': event.data.itemno,
          'quantity': 1
        }]
      };

      fetch(location.protocol + '//' + location.host + '/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      })
        .then(response => { return response.json(); })
        .then(response => {

          // redirect to cart, optionally display the cart drawer/popup
          location.href = '/cart'

          return response;
      	}
			)
    }	
  }
});

Guided selling

tweakwiseGuidedSelling({
  //... other options ...,
  on: { 
    // ... other events ...,
    'twn.add-to-cart': function (event) {

      var formData = {
        'items': [{
          'id': event.data.itemno,
          'quantity': 1
        }]
      };

      fetch(location.protocol + '//' + location.host + '/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      })
        .then(response => { return response.json(); })
        .then(response => {

          // redirect to cart, optionally display the cart drawer/popup
          location.href = '/cart'

          return response;
      	}
			)
    }	
  }
});