0

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.

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>
1
  • Awesome! It's working for me. Thank you so much for your help :) – Kamlesh Yaduwanshi Jul 27 '20 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.