[Composite Products] Process composite product information in the product detail screen

[atorresveiga]

This task is about the work to process the composite product information.

Composite product information is part of the product request result.

"composite_virtual": false,
"composite_layout": "paged-componentized",
"composite_add_to_cart_form_location": "default",
"composite_editable_in_cart": false,
"composite_sold_individually_context": "product",
"composite_shop_price_calc": "min_max",
"composite_components": [
    {
        "id": "1674764843",
        "title": "sweatshirts & hoodies",
        "description": "<p>sweatshirts &amp; hoodies</p>\n",
        "query_type": "product_ids",
        "query_ids": [
            16,
            17,
            23,
            24,
            25
        ],
        "default_option_id": "16",
        "thumbnail_id": 54,
        "thumbnail_src": "https://superlativecentaur.wpcomstaging.com/wp-content/uploads/2023/01/long-sleeve-tee-2.jpg",
        "quantity_min": 1,
        "quantity_max": 1,
        "priced_individually": false,
        "shipped_individually": false,
        "optional": false,
        "discount": 10,
        "options_style": "dropdowns",
        "pagination_style": "classic",
        "display_prices": "absolute",
        "show_sorting_options": false,
        "show_filtering_options": false,
        "attribute_filter_ids": [],
        "product_title_visible": true,
        "product_descr_visible": true,
        "product_price_visible": true,
        "product_thumb_visible": true,
        "subtotal_visible_product": true,
        "subtotal_visible_cart": true,
        "subtotal_visible_orders": true
    },
    {
        "id": "1674764844",
        "title": "t-shirt",
        "description": "<p>t-shirt</p>\n",
        "query_type": "product_ids",
        "query_ids": [
            15,
            18,
            35,
            26
        ],
        "default_option_id": "15",
        "thumbnail_id": 42,
        "thumbnail_src": "https://superlativecentaur.wpcomstaging.com/wp-content/uploads/2023/01/vnech-tee-blue-1.jpg",
        "quantity_min": 1,
        "quantity_max": 1,
        "priced_individually": false,
        "shipped_individually": false,
        "optional": false,
        "discount": 15,
        "options_style": "dropdowns",
        "pagination_style": "classic",
        "display_prices": "absolute",
        "show_sorting_options": false,
        "show_filtering_options": false,
        "attribute_filter_ids": [],
        "product_title_visible": true,
        "product_descr_visible": true,
        "product_price_visible": true,
        "product_thumb_visible": true,
        "subtotal_visible_product": true,
        "subtotal_visible_cart": true,
        "subtotal_visible_orders": true
    },
    {
        "id": "1674764845",
        "title": "beanie",
        "description": "<p>beanie &amp; cap</p>\n",
        "query_type": "product_ids",
        "query_ids": [
            19,
            36,
            21
        ],
        "default_option_id": "19",
        "thumbnail_id": 48,
        "thumbnail_src": "https://superlativecentaur.wpcomstaging.com/wp-content/uploads/2023/01/beanie-2.jpg",
        "quantity_min": 1,
        "quantity_max": 1,
        "priced_individually": true,
        "shipped_individually": false,
        "optional": true,
        "discount": "",
        "options_style": "dropdowns",
        "pagination_style": "classic",
        "display_prices": "absolute",
        "show_sorting_options": false,
        "show_filtering_options": false,
        "attribute_filter_ids": [],
        "product_title_visible": true,
        "product_descr_visible": true,
        "product_price_visible": true,
        "product_thumb_visible": true,
        "subtotal_visible_product": true,
        "subtotal_visible_cart": true,
        "subtotal_visible_orders": true
    }
],
"composite_scenarios": [],

[rachelmcr]

We need to watch out for default_option_id. According to the extension API schema this field should return an integer. However, it can return an integer or empty string. And as we see in the sample response above, the default option ID is sometimes sent as a string instead of an integer.

In my testing, if a component has a single, non-optional component option, the default option ID is sent as an integer; otherwise, it is sent as a string. I'll follow up on this with the extension team to check the expected behavior, but for now we should be prepared to handle the default option ID as an integer or string, and no default option as an empty string.