2

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.

1
  • I have recently installed 2.1.5 and this issue was not present ie it was possible to select the configurable product option and add-to-cart from the category page. But with 2.1.6 the problem is back! Add-to-cart redirects to product page with a prompt to select required options (when they have just been selected).
    – Brian
    Apr 18, 2017 at 16:49

3 Answers 3

4

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.

2
  • Hi Rakesh i used your code but it did not work for me. can you help me in this regards Jun 29, 2017 at 12:13
  • Hi Rakesh, I need to add multiple products with multiple sizes on the Category page at once. Can you help me?
    – kiran
    May 22, 2019 at 3:04
0

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

2
  • How to apply patch ? I have apply list file changes but not success. please give more detail to me. May 3, 2016 at 14:30
  • I found a different way, by using an observer (the plugin method, basically). See my last answer here: github.com/magento/magento2/issues/2434
    – TommyK
    May 7, 2016 at 9:53
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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