Identify which products bought together belong to the main product in Supermarket theme

Solution:

Create a product option named Parent SKU:

Edit the option set of your also bought together products and add Parent SKU option to option set. Set Required = No:

Make sure your also bought together products has Parent SKU field:

Now, view a product which has the also bought together products from store front. Verify it has Parent SKU option:

Create a new script in Storefront > Script Manager, insert the code below:

<script>

(function($) {

$('body').on('change', '[data-also-bought-checkbox]', function() {

var $sku = $('.productView [data-also-bought-parent-scope] [data-product-sku]');

$('[data-product-attribute="input-text"]').each(function(i, el) {

var $el = $(el);

if ($el.find('label').text().trim().toLowerCase() === 'parent sku:') {

$el.find('input').val($sku.text().trim());

$el.hide();

}

});

});

})(jQuerySupermarket || jQuery);

</script>

Now view your product page again, you will see that Parent SKU field is hidden:

Add the main product and the also bought product to cart, you will see Parent SKU appear as same as the main product SKU:

This option field also appears on invoices, orders history and so on.