Magento 2: How I can add Configurable products to cart from category view with selected options

Question

Currently simple products added to cart works from category view. I want same it for configurable products with selected options should be add to cart from category view page.

Currently when I select configurable with options and click to add to cart button it will redirect to detail page.

How it can be done in Magento-2 ? Any have completed ?

Thanks.

Answer 1

you have to override your default list.phtml file with your module.

replace your if else conditonal block,

<?php if ($_product->isSaleable()):    ?>
    <?php $postParams = $block->getAddToCartPostParams($_product); 
    ?>
    <form data-role="tocart-form" action="<?php  echo $this->getBaseUrl().'checkout/cart/add/product/'.$postParams['data']['product']//echo $postParams['action']; ?>" method="post">
        <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
        <input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
        <!-- <input type="hidden" class="super1" name="super_attribute[90]" value="">
        <input type="hidden" class="super2" name="super_attribute[137]" value=""> -->
        <?php echo $block->getBlockHtml('formkey')?>
        <button type="submit"
                title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
                class="action tocart primary">
            <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
        </button>
    </form>
<?php else: ?>
    <?php if ($_product->getIsSalable()): ?>
        <div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
    <?php else: ?>
        <div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
    <?php endif; ?>
<?php endif; ?>

Add javascript inside below,

<script type="text/javascript">
    require(["jquery"],function($){
        jQuery(window).load(function(){
            jQuery('.swatch-option').click(function(){
                var optionid = jQuery(this).attr('option-id');
                var contextClass = jQuery(this).parents('.swatch-attribute').parent().attr('class');
                var getProductId = contextClass.replace ( /[^\d.]/g, '');                
                var currentAttributeid = jQuery(this).parents('.swatch-attribute').attr('attribute-id');
                var formAction = jQuery('.'+contextClass).siblings('.product-item-inner').find("form input[name='super_attribute["+currentAttributeid+"]']").val(optionid);
            });

            jQuery('.product-item-inner form').each(function(){
                var getId = jQuery(this).find("input[name='product']").val();
                //check for swatch is available or not?
                if(jQuery('.swatch-opt-'+getId).length > 0){
                    console.log('getProductid '+getId);
                    var getLength = jQuery('.swatch-opt-'+getId).children().length;               
                    var domInput = '';
                    for(inc = 0; inc < getLength; inc++){
                        var getAttributeId = jQuery('.swatch-opt-'+getId).children().eq(inc).attr('attribute-id');
                        console.log('getAttributeId '+getAttributeId);
                        domInput += "<input type='hidden' value='' name='super_attribute["+getAttributeId+"]'>";
                    }
                    jQuery('.swatch-opt-'+getId).siblings('.product-item-inner').find('form').append(domInput);
                } //if end here
            });

        });        
    });
</script>

Thanks.

Answer 2

I believe that's a bug. There's a patch for that one here: https://github.com/matiasnombarasco/magento2/commit/0e21b007a950df2a35dc1f2939a029e00849bb9c

Answer 3

Reference from, https://magento.stackexchange.com/a/223599/45214

In app/design/frontend/MyCompany/mytheme/Magento_Catalog/templates/product/list/items.phtml please add below code :

<?php if($_item->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE){

 $swatchBlock = $this->getLayout()->createBlock("Magento\Swatches\Block\Product\Renderer\Listing\Configurable")->setTemplate("Magento_Swatches::product/listing/renderer.phtml");
   echo $swatchBlock->setProduct($_item)->toHtml();                           
} ?>

And also in

app/design/frontend/MyCompany/mytheme/Magento_Swatches/layout/catalog_product_view.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <css src="Magento_Swatches::css/swatches.css"/>
  </head>

</page>