0

How to add a button adjacent to add to cart button using uiComponent in magento 2.2.0..

https://i.stack.imgur.com/evz8C.jpg like this image,

  • Have you find the solution? – aravind Jan 28 '20 at 10:31
  • not yet,I want to create that button with components provided by the UI library and without any overriding method. – Rumith Witharana Jan 29 '20 at 10:19
0

If you want to do the exact thing then you have to modify your template rather than changing the layout. Play with the code here for your chosen template.

Here's the code that will help you to produce the result that you are looking for (do look at the tag):

I hope this will work for you.

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

// @codingStandardsIgnoreFile

/**  @var $block \Magento\Checkout\Block\Cart\Grid */ ?> <?php $mergedCells = ($this->helper('Magento\Tax\Helper\Data')->displayCartBothPrices() ? 2 : 1); ?> <?= $block->getChildHtml('form_before') ?> <form action="<?= /* @escapeNotVerified */ $block->getUrl('checkout/cart/updatePost') ?>"
          method="post"
          id="form-validate"
          data-mage-init='{"validation":{}}'
          class="form form-cart">
    <?= $block->getBlockHtml('formkey') ?>
    <div class="cart table-wrapper<?= $mergedCells == 2 ? ' detailed' : '' ?>">
        <?php if ($block->getPagerHtml()): ?>
            <div class="cart-products-toolbar cart-products-toolbar-top toolbar" data-attribute="cart-products-toolbar-top"><?= $block->getPagerHtml() ?></div>
        <?php endif ?>
        <table id="shopping-cart-table"
               class="cart items data table"
               data-mage-init='{"shoppingCart":{"emptyCartButton": "action.clear",
               "updateCartActionContainer": "#update_cart_action_container"}}'>
            <caption role="heading" aria-level="2" class="table-caption"><?= /* @escapeNotVerified */ __('Shopping Cart Items') ?></caption>
            <thead>
                <tr>
                    <th class="col item" scope="col"><span><?= /* @escapeNotVerified */ __('Item') ?></span></th>
                    <th class="col price" scope="col"><span><?= /* @escapeNotVerified */ __('Price') ?></span></th>
                    <th class="col qty" scope="col"><span><?= /* @escapeNotVerified */ __('Qty') ?></span></th>
                    <th class="col subtotal" scope="col"><span><?= /* @escapeNotVerified */ __('Subtotal') ?></span></th>
                </tr>
            </thead>
            <?php foreach ($block->getItems() as $_item): ?>
                <?= $block->getItemHtml($_item) ?>
            <?php endforeach ?>
        </table>
        <?php if ($block->getPagerHtml()): ?>
            <div class="cart-products-toolbar cart-products-toolbar-bottom toolbar" data-attribute="cart-products-toolbar-bottom"><?= $block->getPagerHtml() ?></div>
        <?php endif ?>
    </div>
    <div class="cart main actions">
        <?php if ($block->getContinueShoppingUrl()): ?>
            <a class="action continue"
               href="<?= $block->escapeUrl($block->getContinueShoppingUrl()) ?>"
               title="<?= $block->escapeHtml(__('Continue Shopping')) ?>">
                <span><?= /* @escapeNotVerified */ __('Continue Shopping') ?></span>
            </a>
        <?php endif; ?>
        <button type="submit"
                name="update_cart_action"
                data-cart-empty=""
                value="empty_cart"
                title="<?= $block->escapeHtml(__('Clear Shopping Cart')) ?>"
                class="action clear" id="empty_cart_button">
            <span><?= /* @escapeNotVerified */ __('Clear Shopping Cart') ?></span>
        </button>
        <button type="submit" /*as per your choice*/
                name="update_cart_action"
                data-cart-item-update=""
                value="update_qty"
                title="<?= $block->escapeHtml(__('Update Shopping Cart')) ?>"
                class="action update">
            <span><?= /* @escapeNotVerified */ __('Update Shopping Cart') ?></span>
        </button>
        <input type="hidden" value="" id="update_cart_action_container" data-cart-item-update=""/>
    </div> </form> <?= $block->getChildHtml('checkout.cart.order.actions') ?> <?= $block->getChildHtml('shopping.cart.table.after') ?>

For the reference: https://github.com/magento/magento2/blob/9c14af7a97bcf338662de365d2613c7ca9dbf8c6/app/code/Magento/Checkout/view/frontend/templates/cart/form.phtml#L60

  • I want to create a button in addtocart block(Magento\Catalog\Block\Product\View) using uiComponent – Rumith Witharana Jan 28 '20 at 11:55
  • Yes, if you want to use drag and drop functionality then, it won't be applicable for this. Besides, you can add the button in addtocart block with the help of this code. – Ashmal ur Rehman Jan 28 '20 at 12:38
  • I want to create button with components provided by the UI library – Rumith Witharana Jan 29 '20 at 10:16
  • Refer to this Magento 2 DevDoc, I hope you will find this helpful by tweaking the right module(directory). devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/… – Ashmal ur Rehman Jan 30 '20 at 10:30

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.