product quickview with upsell block

api-product-quickview.liquid

<div data-api-content>
  <div class="drawer__top quickview__modal__top" data-quickview-head>

    <div class="drawer__top__left">
      {%- render 'product-title', product: product, block: block, section: section -%}
      {%- render 'product-price', product: product, block: block, section: section -%}
    </div>

    <button class="drawer__button drawer__close"
      data-first-focus
      data-micromodal-close tabindex="-1"
      aria-label="{{ 'general.accessibility.close' | t }}">
      {% render 'icon-core-x' %}
    </button>
  </div>

  <div class="drawer__body" data-drawer-scrolls>
    {%- if product.media.size > 0 -%}
      <div class="quickview__modal__images" data-product-slideshow data-slideshow-desktop-style="none" data-slideshow-mobile-style="none">
        {% for media in product.media %}
          {% render 'media', media: media, section: section %}
        {% endfor %}
      </div>
    {%- endif -%}
  </div>

    <div class="quickview__form">
      {%- assign uniq_id = 'quickview-form-' | append: section.id | append: '-' | append: product.id -%}

      {% capture form_attr %}form="uniq_id"{% endcapture %}
      {%- render 'sibling-color-as-line-prop' product: product, attributes: form_attr -%}

      <div class="product__form__outer product__align-left">
        <button type="button" class="quickview__form__toggle btn standard__cta is-active hide" data-toggle-button>
          <span>{{ 'products.general.hide_options' | t }}</span>
          <span>{{ 'products.general.show_options' | t }}</span>
        </button>

        <div class="quickview__form__wrapper is-expanded" data-quickview-form-area data-product-form-wrapper>
          {%- render 'product-variant-options' product: product, uniq_id: uniq_id -%}
          {%- render 'product-quantity' product: product, uniq_id: uniq_id, show_quantity: true -%}
          {%- render 'product-subscription' product: product, uniq_id: uniq_id, enable: true -%}
          {%- render 'product-buttons' product: product, uniq_id: uniq_id -%}


{%- liquid
   
  assign cart_products = ''
  for line_item in cart.items
    assign cart_products = cart_products | append: line_item.product.id | append: ','
  endfor
   
  assign upsell_product_first = nil

    # Use the single upsell or first from the upsell_list
    assign upsell_list = product.metafields.theme.upsell_list.value
    assign upsell_product = product.metafields.theme.upsell.value

    if upsell_product and upsell_product.available
      unless cart_products contains upsell_product.id
        if upsell_product_first == nil
          assign upsell_product_first = upsell_product
        endif
      endunless
    endif

   if upsell_product_first == nil
    for upsell_product in upsell_list
      if upsell_product and upsell_product.available
        unless cart_products contains upsell_product.id
          if upsell_product_first == nil
            assign upsell_product_first = upsell_product
            break
          endif
        endunless
      endif
    endfor
   endif
   
-%}

{%- if upsell_product_first -%}
  <div class="upsell__holder">
    <div class="upsell__holder__title">
      <h2 class="upsell__holder__title__text">
        {{ 'products.general.buy_with' | t }}
      </h2>
    </div>
    {%- render 'product-clip' card_product: upsell_product_first -%}
  </div>
{%- endif -%}



      </div>

    </div>
  </div>
</div>