Magento 2: Show different colors of same configurable product without colorswatch/configurable colors

Question

I am looking for a solution for the following:

Example

2 Configurable products (sizes) of the Same T-shirt though different color:

1. Configurable product T-shirt A color Blue (size 1-10)
2. Configurable product T-shirt A color Red (size 1-10)

What is the best way to relate those products to eachother? I want for every color a different Page / URL.

How I would like to see is like this:

https://www.venroy.com.au/knitted-hoodie-grey-marl

You see different colours. And those colours are linked to different productpages / urls (so different configurable products).

How can i achieve this the best way?

Answer 1

For configurable child product visibility should be 'Catalog, Search'. So when you browse child product you need some custom code. So create a plugin for Magento\Catalog\Controller\Product\View::execute Following way:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Controller\Product\View">
        <plugin name="vendor_configurable_product_controller_view" type="VendorName\ModuleName\Plugin\Catalog\Controller\Product\View" sortOrder="1"/>
    </type>
</config>

VendorName/ModuleName/Plugin/Catalog/Controller/Product/View.php

namespace VendorName\ModuleName\Plugin\Catalog\Controller\Product;


class View
{
    /**
     * @var \Magento\Framework\ObjectManagerInterface
     */
    protected $objectManager;

    /**
     * @param \Magento\Framework\ObjectManagerInterface $objectManager
     */
    public function __construct(
        \Magento\Framework\ObjectManagerInterface $objectManager
    ) {
        $this->objectManager = $objectManager;
    }

    /**
     * Product view action
     *
     * @return \Magento\Framework\Controller\Result\Forward|\Magento\Framework\Controller\Result\Redirect
     */
    public function aroundExecute(
        \Magento\Catalog\Controller\Product\View $subject,
        \Closure $proceed
    )
    {
        $productId = (int) $subject->getRequest()->getParam('id');
        $parentIds = $this->objectManager->get('Magento\ConfigurableProduct\Model\Product\Type\Configurable')
            ->getParentIdsByChild($productId);

        $parentId = array_shift($parentIds);

        if($parentId) {
            $subject->getRequest()->setParam('id', $parentId);
        }

        return $proceed();
    }
}

Now you need to select/pre-select JS code. In that case, If you work with magento default 'select' option code then you need to overwrite 'Magento_ConfigurableProduct/js/configurable.js'. Or your case you need to overwrite 'Magento_Swatches/js/SwatchRenderer.js' _OnClick method and add your logic here.