Describe the current behavior
The fetch call for complimentary products is pulling all of the html for the product section, then deleting everything but the product cards for complimentary products.
https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L455
Possible solution
One solution is to extract the inner content of the <product-recommendations> element to a different section and query just the markup you need instead of the full product template.
So the fetch url would be
/recommendations/products?section_id=api-product-complimentary&product_id=1234567&intent=complementary
Instead of
/recommendations/products?section_id=product-main&product_id=1234567&intent=complementary
The difference is section_id=api-product-complimentary instead of section_id={{section.id}}.
The contents of section/api-product-complimentary.liquid are the inner content of the custom element for <product-recommendations>.
Additional context/screenshots
In this screenshot you can see the network request. The content of the complimentary query is highlighted in red. It loads all of the markup for product media, product description, variant selectors, payment buttons, and block content. This is contrasted by the query for the recommendations section below, highlighted in blue.
Describe the current behavior
The
fetchcall for complimentary products is pulling all of the html for the product section, then deleting everything but the product cards for complimentary products.https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L455
Possible solution
One solution is to extract the inner content of the
<product-recommendations>element to a different section and query just the markup you need instead of the full product template.So the fetch url would be
/recommendations/products?section_id=api-product-complimentary&product_id=1234567&intent=complementaryInstead of
/recommendations/products?section_id=product-main&product_id=1234567&intent=complementaryThe difference is
section_id=api-product-complimentaryinstead ofsection_id={{section.id}}.The contents of
section/api-product-complimentary.liquidare the inner content of the custom element for<product-recommendations>.Additional context/screenshots
In this screenshot you can see the network request. The content of the complimentary query is highlighted in red. It loads all of the markup for product media, product description, variant selectors, payment buttons, and block content. This is contrasted by the query for the recommendations section below, highlighted in blue.