Add Subi widget in Page Builders Apps

{% assign target_product = product %}
<script id="render-subify-widget-{{ target_product.id }}">
console.log("ecom product",{{ product | json }})

  function createSubifyBlock(){
  const parent = document.getElementById("render-subify-widget-{{ target_product.id }}").parentElement;
  const wrapper = document.createElement("div");
  wrapper.className = "subify-app-block-wrapper product-{{ target_product.id }}";
  parent.appendChild(wrapper);
}
  function initSubifyBlock(){
createSubifyBlock();
function renderWidget(){
  const selector = ".subify-app-block-wrapper.product-{{ target_product.id }}";
  subifySdk.renderWidget({{ target_product |  json }},{renderPosition:{wrapper:selector}})
}
if(window.subifySdk){
renderWidget();
}else{
  window.addEventListener("subify:sdkLoaded",()=>{
  renderWidget();
  })
}
}
 initSubifyBlock();
</script>

{% assign target_product = product %}

{% if target_product %}
  <script
    id="render-subify-widget-{{ target_product.id }}"
  >
  function initSubifyBlock() {
    function getSubscriptionTypeSelector (subscriptionType) {
      switch (subscriptionType) {
        case "membership":
          return 'subi-membership-app-block-wrapper';
        case "fixed_bundle":
          return 'subi-fixed-bundle-app-block-wrapper';
        case "product_subscription":
          return 'subify-app-block-wrapper';
      }
    };

    function renderWidget() {
      const product = {{ target_product | json}};
  const productSubscriptionTypes ={% if specific_subscription_type != null %} ["{{ specific_subscription_type }}"] {% else %}  new subifySdk.SubscriptionTypeDetector(product).getSubscriptionType(); {% endif %}

  const customSetting = {%  if widget_settings %} {{ widget_settings }} {% else %} { } {% endif %};
    
  productSubscriptionTypes.forEach(subscriptionType => {
    const selector = `.${getSubscriptionTypeSelector(subscriptionType)}.product-{{ target_product.id }}`;
 
    {% if specific_subscription_type == null %}
    if (document.querySelector(selector)) return;
    {% endif %}
 
    switch (subscriptionType) {
      case "product_subscription":
        subifySdk.renderWidget(product, {
          renderPosition: {
            wrapper: selector
          },
          ...customSetting
        })
        break;

      case "membership":
      
        subifySdk.renderMembershipWidget(product, {
          renderPosition: {
            wrapper: selector
          },
          ...customSetting
        })
        break;

      case "fixed_bundle":
        subifySdk.renderFixedBundleWidget(product, {
          renderPosition: {
            wrapper: selector
          },
          ...customSetting,
        })
        break;
    }

  });
          }

  if (window.subifySdk) {

    renderWidget();
  } else {
    window.addEventListener("subify:sdkLoaded", () => {

      renderWidget();
    })
  }
        }

  initSubifyBlock();
  </script>
{% endif %}