1

How to do the following -

Clicking on "Add to Cart" button adds the product to cart then Button Changes to "Go to Cart" and clicking on that redirect to Shopping Cart

Please help me in doing this functionality.

  • are you want after product add dierctly go to checkout page? – Rakesh Jesadiya Nov 2 '17 at 4:52
  • @ Vinay , In which page do you want this requirement ? Inproduct list page or in product details page ? – MGento Nov 2 '17 at 4:55
  • To achieve this, first check your current product id is present in the quote. If so display a button named "Go to Cart" with cart link in it, otherwise display the usual "Add to Cart" button. – MGento Nov 2 '17 at 4:57
  • @Rakesh want this functionality on product page. After product add "Add to Cart" Button Replaces with ""Go to Cart" Button and "Go to Cart" Button Redirect to Shopping Cart. – Vinay Nov 2 '17 at 5:19
  • @MeGento Want this functionality on Product Details Page. Could you please help me a bit more. Like which code i have to add. – Vinay Nov 2 '17 at 5:22
1

Replace your add to cart button in

app\design\frontend\<vendor>\<theme>\Magento_Catalog\templates\product\view
addtocart.phtml

With

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?= /* @escapeNotVerified */ __('Qty') ?></span></label>
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       value="<?= /* @escapeNotVerified */ $block->getProductDefaultQty() * 1 ?>"
                       title="<?= /* @escapeNotVerified */ __('Qty') ?>"
                       class="input-text qty"
                       data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <?php
            $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
            $quoteId = $objectManager-> create('Magento\Checkout\Model\Session')->getQuoteId(); 
            $cartData = $objectManager->create('Magento\Quote\Model\QuoteRepository')->get($quoteId)->getAllVisibleItems();
            $cart = $objectManager->get('\Magento\Checkout\Model\Cart'); 
            $items = $cart->getQuote()->getAllItems(); 
            $count=0;
            foreach($items as $item) {
                if($item->getProductId() == $_product->getId())
                {
                    $count++;
                }
            }

                if($count != 0){?>
                    <button type="button"
                            title="<?php /* @escapeNotVerified */ echo __('Go to Cart') ?>"
                            class="action primary tocart"
                            id="product-addtocart-button"
                            onclick="window.location='<?php echo $block->getUrl('checkout/cart');?>'">
                        <span><?php /* @escapeNotVerified */ echo __('Go to Cart') ?></span>
                    </button>
            <?php }else{ ?>
                    <button type="submit"
                            title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
                            class="action primary tocart"
                            id="product-addtocart-button">
                        <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
                    </button>
            <?php } ?>
            <?= $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>
<?php endif; ?>
<?php if ($block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>
<?php else : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {}
        }
    }
</script>
<?php endif; ?>
  • Thanks for the help, Do i need to replace whole addtocart.phtml. I have added this code by replacing this <div class="actions"> <button type="submit" style="width: 100%; font-size: 1.6rem;" title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>" class="action primary tocart" id="product-addtocart-button"> </button> <?php echo $block->getChildHtml('', true) ?> </div> but Go to Cart button is not showing up after add to cart is clicked – Vinay Nov 2 '17 at 6:27
  • I have replaced the code with the above code. But After "add to cart" ajax starts adds the product and after ajax same "Add to Cart" comes up. No "Go to Cart" is coming on product page. – Vinay Nov 2 '17 at 6:54
  • Cleared Browser Cache, Cleared Magento Cache and Static Files, But still "Add to Cart" Ajax runs and same "Add to Cart" Comes Up – Vinay Nov 2 '17 at 7:00
  • Yes i have refreshed the page, but still no luck. Still "Add to Cart" Coming – Vinay Nov 2 '17 at 7:07
  • Yes, Exact addtocart.phtml is edited. path with template hints app/design/frontend/theme/base/Magento_Catalog/templates/product/view/addtocart.phtml Same path file is edited but Still having same issue. Is there anything need to done with the js ? – Vinay Nov 2 '17 at 7:49
0

Actually its updating buttons caption (whatever set in phtml) in this js file after add to cart pressed.

/opt/lampp/htdocs/mage226/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

On category pages buttons have different captions. like: "Add to Cart", "Back Order", "Pre Order" To preserve same caption you have to provide it in this js file. For that you have to extend this JS file using AMD way.

For that You have to follow following way:

In your custom module you have to add dependency:

1) app/code/LevoSoft/PreOrder/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'LevoSoft_PreOrder/js/catalog-add-to-cart-mixin': true
            }
        }
    }
};

Now you can create file as following in your custom module:-

2) app/code/LevoSoft/PreOrder/view/frontend/web/js/catalog-add-to-cart-mixin.js

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
], function($, $t) {
    "use strict";

    return function (widget) {

        $.widget('mage.catalogAddToCart', widget, {

            disableAddToCartButton: function(form) {
                this.options.addToCartButtonTextDefault = $(form).find(this.options.addToCartButtonSelector).find('span').text();// Here you are getting current buttons caption and assigning it to re-render it whatever the caption is. thats it
                this._super(form);// Now calling parent function
            }
        });

        return $.mage.catalogAddToCart;
    }
});

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.