Magento 2 Add selected products to cart from cms page

Question

I am working in Magento 2.3.5. I have 4 custom checkboxes to select product id on a cms page, I want to add selected products to add to cart by clicking on a button "Add selected items to cart". Can anyone help me with this? Please provide complete steps to implement this feature.

Thank you so much in advance.

Answer 1

You can use my Magento2_AjaxButton module to achieve this.

Use the template code below in a CMS page static block. Here you can see the products / checkboxes which can be selected and the add to cart button which adds the products via ajax.

You can try a working example of this code and module here https://magento2.gaiterjones.com/en/gaiterjones-dev/mage-se-add-products-from-cms-using-custom-checkbox-selection.html

<?php

$_productIDs=array(15,18,19);

?>
<div>

    <ol class="row list">
        <?php foreach ($_productIDs as $_productID):?>
        <li>
            <span>Product ID <?php echo $_productID;?> <input class="productselect" type="checkbox" value="<?php echo $_productID;?>" /></span>
        </li>
        <?php endforeach;?>
    </ol>

    <div style="padding-top:50px" class="row justify-content-center">
        <div id="gj-ajaxbutton-wrapper-1" class="gj-ajaxbutton-wrapper ajaxbutton"><div class="container">
            <div class="row">
                <button class="gj-ajaxbutton default" type="button"><span>Add selected items to cart</span></button>    </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
  require([
    'jquery'
  ], function ($) {

          var AjaxButtonId = 1;

          $("#gj-ajaxbutton-wrapper-" + AjaxButtonId).on("click", ".gj-ajaxbutton", function () {

                event.preventDefault();

                  var productid = $("input:checkbox:checked").map(function(){
                      return this.value;
                  }).toArray();

                  if (productid.length > 0)
                  {
                      console.log(productid);

                      var AjaxUrl = 'https://magento2.gaiterjones.com/en/ajaxbutton/index/view/',
                          AjaxData = {
                              action: 'getData',
                              action_template: 'addproductstocart',
                              action_data: {
                                addtocart: 1,
                                productids: productid.join()
                              }
                            };

                        console.log(JSON.stringify(AjaxData));

                      $.ajax({
                          context: '#gj-ajaxbutton-wrapper-' + AjaxButtonId,
                          url: AjaxUrl,
                          data: {ajaxdata:AjaxData},
                          type: "POST",
                          beforeSend: function () {
                              $('#gj-ajaxbutton-wrapper-' + AjaxButtonId).trigger('processStart');
                          }
                      }).done(function (response) {

                          $('#gj-ajaxbutton-wrapper-' + AjaxButtonId).trigger('processStop');
                          if (typeof response.output.html !== 'undefined')
                          {
                              $(this).html(response.output.html);
                              // cart update!
                              require('Magento_Customer/js/customer-data').reload();

                          } else {

                              $(this).html('Error - no data returned!');
                          }

                      });

                  } else {
                      alert("Please select a product!");
                  }

                  return true;
          });

  });
</script>