0

I am having an issue with double configurable swatches on the related product tab. It is working properly with single swatches such as color swatches only but it creates an issue on products with double swatches such as color and size.

When I choose any option from the main product above

enter image description here

the swatches on the product in the related tab should display the label of the options selected above. But it doesn't. It shows th selected label on both the options.

enter image description here

Can someone help me with this?

This is my items.phtml

<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); ?>

<?php
$stockRegistry = $objectManager->create(\Magento\CatalogInventory\Api\StockRegistryInterface::class);

$product = $block->getCurrentProduct();
$currencySymbol = $block->getCurrencySymbol();
$items = [];
$packageTitle = $block->getGeneralConfig('display_title');


switch ($type = $block->getType()) {

    case 'related':
        /** @var \Tekglide\PackageProducts\Block\Product\ProductList\Related $block */
        if ($exist = $block->getItems()->getSize()) {

            $type = 'related';
            $class = $type;

            $image = 'related_products_list';
            $title = __($packageTitle);
            $items = $block->getItems();
            $limit = 0;
            $shuffle = 0;
            $canItemsAddToCart = $block->canItemsAddToCart();

            $showAddTo = false;
            $showCart = true;
            $templateType = null;
            $description = false;
        }
        break;
    case 'other':
        $exist = false;
        break;
}
/** @var \Tekglide\PackageProducts\Block\Product\ProductList\Related $block */
?>
<?php if ($exist):?>

    <?php if ($type == 'related'): ?>
        <?php if ($type == 'related'): ?>
<div class="block <?= /* @noEscape */ $class; ?>  <?php if ($type == 'related') { ?>block-margin box-regimen<?php } ?>" data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' data-limit="<?= /* @noEscape */ $limit; ?>" data-shuffle="<?= /* @noEscape */
$shuffle; ?>">
    <?php else: ?>
    <div class="block <?= /* @noEscape */ $class; ?>" data-mage-init='{"upsellProducts":{}}' data-limit="<?= /* @noEscape */ $limit; ?>" data-shuffle="<?= /* @noEscape */
    $shuffle;
    ?>">
        <?php endif; ?>
        <?php else: ?>
        <div class="block <?= /* @noEscape */ $class; ?>">
            <?php endif; ?>
            <div class="block-title title">
                <h2 id="block-<?= /* @noEscape */ $class?>-heading" role="heading" aria-level="2"><?= /* @noEscape */
                $title; ?>
                </h2>
            </div>
            <div class="block-content content" aria-labelledby="block-<?= /* @noEscape */ $class?>-heading">
                <div class="products wrapper grid products-grid products-<?= /* @noEscape */ $type; ?>">
                <input type="hidden" id="related-checkbox-hidden" name="related_products_hidden" value="0" />
                    <div class="regimen-content">
                    <?php if ($type == 'related'):?>
                        <div class="item product-related-visible product-item ">
                            <div class="product-item-info related-available">
                            <!-- related_products_list-->
                            <div class="testclass">
                            <a id="product-item-photo-main-regimen" href="" 
                            class="product photo product-item-photo" onclick="return false;">
                                <?= $block->getImage($product, $image)->toHtml(); ?>
                            </a>
                            </div>
                            <div class="product details product-item-details">
                                <h2 class="product name product-item-name">
                                    <a href="#"><?= /* @noEscape */ $product->getName(); ?></a>
                                </h2>
                                <div class="actions">
                                    <div class="input-box field choice related choice-related-base">
                                        <input type="checkbox" 
                                        class="input-checkbox checkbox 
                                        related" id="related-checkbox-main" checked="checked" disabled="disabled">
                                        <label for="related-checkbox-main"> <?= /* @noEscape */ __("Item Selected"); ?>
                                    </label>
                                    </div>
                                </div>
                                <?php
                                if ($product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\
                                Configurable::TYPE_CODE) {
                                            $_configChild = $product->getTypeInstance()->getUsedProductIds($product);
                                            $getChildId = '';

                                    foreach ($_configChild as $child) {
                                        $productChild = $objectManager->create(\Magento\Catalog\Model\Product::class)
                                        ->load($child);
                                        if (!$productChild->isSaleable()) {
                                            $getChildId .= $child.',';
                                        }
                                    } ?>
                            <input type="hidden" id="child-out-of-stock" value="<?= /* @noEscape */ $getChildId ?>" />
                                    <?php $swatchBlock = $block->getLayout()
                                    ->createBlock(\Magento\Swatches\Block\Product\Renderer\Configurable::class)->
                                    setTemplate("Magento_Swatches::product/view/renderer.phtml");
                                    ?>
                                    <div class="regimen-swatches">
                                        <?= $swatchBlock->setProduct($product)->toHtml(); ?>
                                    </div>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>


                        <?php $iterator = 1;
                        $citemCount = 0;
                        $childSimpleCount = 0;
                        $outOfStockCount = 0;
                        $ifBothEqual = 0;
                        ?>
                        <?php foreach ($items as $_item):
                            $citemCount++;
                            $childSimpleCount++;
                            $productId = $_item->getId();
                            $parentId = $block->getChildProductOfConfigurable($productId);
                            $linkToSelectedOption = '';
                            if ($type == 'related' && $parentId) {
                                $parentProduct = $block->getProductById($parentId);
                                $productUrl = $block->getProductUrl($parentProduct);
                                $linkToSelectedOption = $block->getLinkToSelectedOption($parentId, $productId, 'size');
                            } else {
                                $productUrl = $block->getProductUrl($_item);
                            }
                            ?>
                            <?php $available = ''; ?>
                                <?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
                                    <?php if (!$_item->getRequiredOptions()): ?>
                                        <?php $available = 'related-available'; ?>
                                <?php endif; ?>
                            <?php endif; ?>
                            <?php if ($type == 'related' || $type == 'upsell'): ?>
                                <?= /* @noEscape */($iterator++ == 1) ?
                                '<div class="item product sub-pack-items product-item" style="display: 
                                none;">' : '</div><div class="item product sub-pack-items product-item"
                                style="display: none;">' ?>
                            <?php else: ?>
                                <?= /* @noEscape */($iterator++ == 1) ?
                                '<div class="item product sub-pack-items product-item">' :
                                 '</div><div class="item product product-item">' ?>
                            <?php endif; ?>
                            <div class="product-item-info <?= /* @noEscape */ $available; ?>">
                                <?= /* @noEscape */ '<!-- ' . $image . '-->' ?>
                                <a href="<?= /* @noEscape */ $productUrl . $linkToSelectedOption ?>"
                                   class="product photo product-item-photo" target="_blank">
                                    <?= $block->getImage($_item, $image)->toHtml(); ?>
                                </a>
                                <div class="product details product-item-details">
                                    <h2 class="product name product-item-name related">
                                        <a class="product-item-link" title="<?= $block->escapeHtml($_item->getName())
                                        ?>"
                                           href="<?= /* @noEscape */ $productUrl . $linkToSelectedOption
                                            ?>" target="_blank">
                                            <?= $block->escapeHtml($_item->getName()) ?></a>
                                    </h2>
                                    <div class="price-box price-final_price" data-role="priceBox" data-product-id="<?=  /* @noEscape */
                                    $_item->getProductId()
                                    ?>">
                                        <span class="price-container price-final_price tax weee">
                                            <span id="product-price-<?=  /* @noEscape */ $_item->getId() ?>" data-price-amount="<?=  /* @noEscape */
                                            $_item->getFinalPrice()
                                            ?>" data-price-type="finalPrice" class="price-wrapper ">
                                            <span class="price"><?=  /* @noEscape */
                                            $block->getCurrencySymbol();
                                            $number = $_item->getFinalPrice();
                                            echo number_format($number, 2, '.', '');
                                            ?></span>
                                            </span>
                                        </span>
                                    </div>

                                    <?php if ($templateType): ?>
                                        <?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
                                    <?php endif; ?>

                                    <?php if ($showAddTo && $showCart): ?>
                                        <div class="product actions product-item-actions">
                                            <?php if ($showCart): ?>
                                                <div class="actions-primary">
                                                    <?php if ($_item->isSaleable()): ?>
                                                        <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)
                                                        ):?>
                                                            <button class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?= /* @noEscape */ $block->getAddToCartUrl($_item) ?>"}}' type="button" title="<?= /* @noEscape */
                                                            __('Add to Cart')
                                                            ?>">
                                                                <span><?= /* @noEscape */ __('Add to Cart') ?></span>
                                                            </button>
                                                        <?php else: ?>
                                                            <?php
                                                            $postData = $block->getPostData($block->getAddToCartUrl(
                                                                $_item
                                                            ), [
                                                                'product'
                                                            => $_item->getEntityId()])
                                                            ?>
                                                            <button class="action tocart primary"
                                                            data-post='<?= /* @noEscape */ $postData; ?>'
                                                            type="button" title="<?= /* @noEscape */ __('Add to Cart')
                                                            ?>">
                                                                <span><?= /* @noEscape */ __('Add to Cart') ?></span>
                                                            </button>
                                                        <?php endif; ?>
                                                    <?php else: ?>
                                                        <?php if ($_item->getIsSalable()): ?>
                                                            <div class="stock available"><span><?=
                                                                /* @noEscape */ __('In stock') ?>
                                                        </span></div>
                                                        <?php else:
                                                            $outOfStockCount++; ?>
                                                            <div class="stock unavailable"><span><?= /* @noEscape */
                                                            __('Notify Me') ?>
                                                        </span></div>
                                                        <?php endif; ?>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($showAddTo): ?>
                                            <div 
                                            class="secondary-addto-links actions-secondary" data-role="add-to-links">
                                                    <?php if ($addToBlock = $block->getChildBlock('addto')): ?>
                                                        <?= $addToBlock->setProduct($_item)->getChildHtml(); ?>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                        <?php if (!$_item->isComposite() && $type == 'related'): ?>
                                            <?php if (!$_item->getRequiredOptions()): ?>
                                                <?php if ($_item->getIsSalable()): ?>
                                                        <?php else: ?>
                                                            <div class="stock unavailable"><span><?= /* @noEscape */
                                                            __('Out of stock')
                                                            ?>
                                                        </span></div>
                                                        <?php endif; ?>
                                            <div class="field choice related choice-related actions" >
                                                <input type="checkbox" class="checkbox related " for="<?=  /* @noEscape */ $_item->getPrice();?>" id="crelated-checkbox<?= /* @noEscape */ $_item->getId() ?>" name="related_products[]" value="<?= /* @noEscape */
                                                $_item->getId()
                                                ?>"/>
                                                <label class="label" for="related-checkbox<?= /* @noEscape */
                                                $_item->getId()
                                                ?>"><span>
                                                    <?= /* @noEscape */ __("Item Selected"); ?></span></label>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?= ($iterator == count($items)+1) ? '</div>' : '' ?>
                        <?php endforeach ?>
                     </div>
                     <?php if ($childSimpleCount > 0 && $outOfStockCount > 0 && $childSimpleCount == $outOfStockCount) {
                                                $ifBothEqual = 1;
                     }?>
                     <input type="hidden" id="if-both-equal" value="<?=  /* @noEscape */ $ifBothEqual ?>">  
                    <?php if ($type == 'related'): ?>
                    <div class="col-total product-shop">
                        <div class="product-shop-wrap">                           
                            <div class="price-box-total">
                                <p class="regular-price">
                                    <span class="price-label">
                                    <p class="total-products" id="regimenTotal">
                                Total price for <span id="number-regimen">1</span> product(s):</p>
                                    <span class="price" id="regimenPrice" for=""></span>
                                </p>
                            </div>
                            <?php if ($product->isSaleable()): ?>
                            <div class="add-to-cart">
                                <button type="button" 
                                title="Add Package to Cart" 
                                class="action primary btn-cart" id="add-all-to-cart">Add Package to Cart
                                </button>
                            </div>
                            <?php else: ?>
                             <div class="add-to-cart">
                                <button type="button" 
                                title="Add Package to Cart" 
                                disabled class="action primary btn-cart" id="add-all-to-cart">Add Package to Cart
                                </button>
                            </div>
                            <?php endif; ?>
                            <script type="text/x-magento-init">
                                {
                                    "*": {
                                        "Tekglide_PackageProducts/js/package": {
                                            "currency":"<?=  /* @noEscape */ $currencySymbol; ?>",
                                            "isProductInStock":"<?=  /* @noEscape */ $block->isProductInStock(); ?>"
                                        }
                                    }
                                }
                            </script>
                        </div>                      
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    <?php endif;?>
</div>
</div>

<script type="text/javascript">
 require([ 'jquery', 'jquery/ui','domReady!', 'Magento_Swatches/js/swatch-renderer'], function($){


    $('body').on('click', '.regimen-swatches .swatch-option', function(){
        $('.required-options').hide();
        $('.swatch-option').removeClass('selected');
        $('#color-picker-id').val($(this).attr("option-id"));
        $('#add-all-to-cart').attr('type', 'submit');
        $('.swatch-option').removeClass('sselected');
        $('.regimen-swatches .swatch-option[option-id="'+$(this).attr("option-id")+'"]').addClass('sselected');
        $('.regimen-swatches .swatch-option[option-id="'+$(this).attr("option-id")+'"]').addClass('selected');
        $('.regimen-swatches .swatch-attribute.color').attr('option-selected', $(this).attr("option-id"));
        $('.regimen-swatches .swatch-attribute-selected-option').text($(this).attr("option-label"));
        $('.product-options-wrapper .swatch-option[option-id="'+$(this).attr("option-id")+'"]').trigger("click");
        var productMainImage = $('.fotorama__img').attr('src');
        $('#product-item-photo-main-regimen img').attr('src', productMainImage).load(function() {});
    }); 

     $('body').on('click', '.product-options-wrapper .swatch-option', function(){
        $('.regimen-swatches .swatch-option').removeClass('selected');
        $('.regimen-swatches .swatch-option').removeClass('sselected');
        $('#color-picker-id').val($(this).attr("option-id"));
        $('#add-all-to-cart').attr('type', 'submit');
        if($('.selected').length > 0)
        {
            $('.regimen-swatches .swatch-option[option-id="'+$(this).attr("option-id")+'"]').addClass('sselected');
            $('.regimen-swatches .swatch-attribute.color').attr('option-selected', $(this).attr("option-id"));
            $('.regimen-swatches .swatch-attribute-selected-option').text($(this).attr("option-label"));
        }else{
            $('.regimen-swatches .swatch-attribute-selected-option').text('');
            $('#color-picker-id').val('');
        }
        var productMainImage = $('.fotorama__img').attr('src');
        $('#product-item-photo-main-regimen img').attr('src', productMainImage).load(function() {});
    }); 

 });


</script>


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.