What is Shopify Section object alternative?

[rkaucorp]

I am trying to make a shopify theme extension where I have radio button and radio button form should hit form="{{ product_form_id }}"and product_form_id is coming from {%- assign product_form_id = 'product-form-' | append: section.id -%} since shopify restricted section object in theme extension how can I use this id ?

[Sky-bits]

@rkaucorp can you post the complete error tracer log

[olso]

.js workaround that will mostly work if merchant adds it to product page

1. Create option for your block/embed where merchant can edit the selector query

{
        "label": "Product form selector",
        "id": "productFormSelector",
        "type": "textarea",
        "default": "form[id^='product-form-template']",
        "info": "Query for document.querySelector"
      },

2. Make data available to .js via .liquid

<script type="text/json" data-CHANGE_ME>
  {
    "settings": {{ block.settings | json }}
  }
</script>

3. In .js access that data

const scriptText = document.querySelector(
      "script[data-CHANGE_ME]"
    )?.textContent;

    if (!scriptText) return null;

    try {
      const dataRaw = JSON.parse(scriptText) as Maybe<DataRaw>;

4. Create a function to get product form id

const getProductFormId: UseShopify["getProductFormId"] = useCallback(() => {
    const productForm = document.querySelector<HTMLFormElement>(
      data.blockSettings.productFormSelector
    );

    if (!productForm) {
      return null;
    }

    const id = productForm.getAttribute("id");

    if (!id) {
      return null;
    }

    return id;
  }, []);