3

How to display swatch on cart page for added products in cart. Right now it shows as Text, like Color Blue, but it should show like swatch icon.

0

Copy the below file to your theme:

/vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml

Your theme location;

/app/design/frontend/[vendor]/[theme]/Magento_Checkout/templates/cart/default.phtml

And use the below code for default.phtml

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

// @codingStandardsIgnoreFile

/** @var $block \Magento\Checkout\Block\Cart\Item\Renderer */

$_item = $block->getItem();
$product = $_item->getProduct();
$isVisibleProduct = $product->isVisibleInSiteVisibility();
/** @var \Magento\Msrp\Helper\Data $helper */
$helper = $this->helper('Magento\Msrp\Helper\Data');
$canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);

$swatchhelper = \Magento\Framework\App\ObjectManager::getInstance()->get('Magento\Swatches\Helper\Data');
?>

<tbody class="cart item">
    <tr class="item-info">
        <td data-th="<?= $block->escapeHtml(__('Item')) ?>" class="col item">
            <?php if ($block->hasProductUrl()):?>
                <a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"
                   title="<?= $block->escapeHtml($block->getProductName()) ?>"
                   tabindex="-1"
                   class="product-item-photo">
            <?php else:?>
                <span class="product-item-photo">
            <?php endif;?>
            <?= $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml() ?>
            <?php if ($block->hasProductUrl()):?>
                </a>
            <?php else: ?>
                </span>
            <?php endif; ?>
            <div class="product-item-details">
                <strong class="product-item-name">
                    <?php if ($block->hasProductUrl()):?>
                        <a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"><?= $block->escapeHtml($block->getProductName()) ?></a>
                    <?php else: ?>
                        <?= $block->escapeHtml($block->getProductName()) ?>
                    <?php endif; ?>
                </strong>
                <?php if ($_options = $block->getOptionList()):?>
                    <dl class="item-options">
                        <?php foreach ($_options as $_option) : ?>
                            <?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
                            <dt><?= $block->escapeHtml($_option['label']) ?></dt>
                            <dd>
                                <?php $optionValue = $_option['option_value']; ?>
                                <?php $swatch = $swatchhelper->getSwatchesByOptionsId(array($optionValue)); ?>
                                <?php if($swatch[$optionValue]['type'] != 0): ?>
                                    <div class="swatch-option" style="background: <?= $swatch[$optionValue]['value']; ?>"></div>
                                <?php else: ?>
                                    <?php if (isset($_formatedOptionValue['full_view'])): ?>
                                        <?= /* @escapeNotVerified */ $_formatedOptionValue['full_view'] ?>
                                    <?php else: ?>
                                        <?= /* @escapeNotVerified */ $_formatedOptionValue['value'] ?>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </dd>
                        <?php endforeach; ?>
                    </dl>
                <?php endif;?>
                <?php if ($messages = $block->getMessages()): ?>
                    <?php foreach ($messages as $message): ?>
                        <div class="cart item message <?= /* @escapeNotVerified */ $message['type'] ?>"><div><?= $block->escapeHtml($message['text']) ?></div></div>
                    <?php endforeach; ?>
                <?php endif; ?>
                <?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
                <?php if ($addInfoBlock): ?>
                    <?= $addInfoBlock->setItem($_item)->toHtml() ?>
                <?php endif;?>
            </div>
        </td>

        <?php if ($canApplyMsrp): ?>
            <td class="col msrp" data-th="<?= $block->escapeHtml(__('Price')) ?>">
                <span class="pricing msrp">
                    <span class="msrp notice"><?= /* @escapeNotVerified */ __('See price before order confirmation.') ?></span>
                    <?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
                    <a href="#" class="action help map" id="<?= /* @escapeNotVerified */ ($helpLinkId) ?>" data-mage-init='{"addToCart":{"helpLinkId": "#<?= /* @escapeNotVerified */ $helpLinkId ?>","productName": "<?= /* @escapeNotVerified */ $product->getName() ?>","showAddToCart": false}}'>
                        <span><?= /* @escapeNotVerified */ __("What's this?") ?></span>
                    </a>
                </span>
            </td>
        <?php else: ?>
            <td class="col price" data-th="<?= $block->escapeHtml(__('Price')) ?>">
                <?= $block->getUnitPriceHtml($_item) ?>
            </td>
        <?php endif; ?>
        <td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
            <div class="field qty">
                <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
                    <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
                </label>
                <div class="control qty">
                    <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                           name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                           data-cart-item-id="<?= $block->escapeHtml($_item->getSku()) ?>"
                           value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                           type="number"
                           size="4"
                           title="<?= $block->escapeHtml(__('Qty')) ?>"
                           class="input-text qty"
                           data-validate="{required:true,'validate-greater-than-zero':true}"
                           data-role="cart-item-qty"/>
                </div>
            </div>
        </td>

        <td class="col subtotal" data-th="<?= $block->escapeHtml(__('Subtotal')) ?>">
            <?php if ($canApplyMsrp): ?>
                <span class="cart msrp subtotal">--</span>
            <?php else: ?>
                <?= $block->getRowTotalHtml($_item) ?>
            <?php endif; ?>
        </td>
    </tr>
    <tr class="item-actions">
        <td colspan="100">
            <div class="actions-toolbar">
                <?= /* @escapeNotVerified */ $block->getActions($_item) ?>
            </div>
        </td>
    </tr>
</tbody>

Add the below css to your styles for cart page or inline to your default.phtml

<style type="text/css">
    .swatch-option {
    /*width: 30px;*/
    padding: 1px 2px;
    min-width: 30px;
    max-width: 90px;
    height: 20px;
    float: left;
    margin: 0 10px 5px 0;
    text-align: center;
    cursor: pointer;
    position: relative;
    border: 1px solid rgb(218, 218, 218);
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
  • The code is not showing on summary on checkout the function is written I can get the JS code as then that way it will be fixed everywhere – LAW Jul 4 '18 at 4:52
  • But shouldn't the code be more uniform, that is it should work everywhere. Because I have already managed to do the task myself(Not the most optimum way ofcourse), but I wanted a solution that works all around, hence I have kept the question here. – LAW Jul 4 '18 at 5:17
  • It should work everywhere because on some place variables are different. Due to this you cannot create one code and use everywhere. If you check Magento default swatch even they are coded twice for listing and product page. – Sukumar Gorai Jul 4 '18 at 5:21

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.