Bigcommerce Stencil / Sticky add to cart button not registering product options

Question

I am trying to implement an Add To Cart sticky bar, when the users scrolls down the product page.

Everything seems to be working fine except only the 'default' value for the product works. When I select lets say color Red and size Large and click the sticky Add To Cart, I am redirected to cart with the default values of that product so Medium- Black.

I cannot wrap my head around how to solve this.

So here is my code;

<section class="productStickyAdd fading" id="stickyIckyStuff">
<div class="productStickyAdd-container">
    <div class="sticky-labeling">
        <span class="stickyTitle">
            {{product.title}}
        </span>
        <span class="stickyPrice">
            {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
            {{> components/products/price price=product.price schema_org=schema}}
            {{else}}
            {{> components/common/login-for-pricing}}
            {{/or}}
        </span>
    </div>
    <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
          data-cart-item-add>
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="product_id" value="{{product.id}}"/>
        <div data-product-option-change style="display:none;">
            {{#each product.options}}
            {{{dynamicComponent 'components/products/options'}}}
            {{/each}}
        </div>
        {{#if product.can_purchase}}
            {{> components/products/add-to-cart}}
        {{/if}}
        {{#if product.out_of_stock}}
        {{#if product.out_of_stock_message}}
            {{> components/common/alert-error product.out_of_stock_message}}
        {{else}}
            {{> components/common/alert-error (lang 'products.sold_out')}}
        {{/if}}
        {{/if}}
    </form>
</div>

I am using the same values as in the standard CTA:

        <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
          data-cart-item-add>
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="product_id" value="{{product.id}}"/>
        <div data-product-option-change style="display:none;">
            {{#each product.options}}
            {{{dynamicComponent 'components/products/options'}}}
            {{/each}}
        </div>

But I guess I have to somehow link the dynamic components with JS what has been selected in the upper, original product options?

Because when I tried removing this div:

       <div data-product-option-change style="display:none;">
        {{#each product.options}}
        {{{dynamicComponent 'components/products/options'}}}
        {{/each}}
    </div>

It doesnt even redirected me to the cart, but when the div is there it redirects me to the cart with the 'default' settings.

Has anyone some experience with this, I would be really grateful. Not really sure if JS here is needed or I can handle it without it.

Thank you. Have a nice day!

Answer 1

Solved with leaving the form on the main CTA and just copying the values from it.

$('#stickyBuy').on('click', () => {
    $('[name="product_id"]').parents('form').submit();
});

Credit for the help goes to: https://arcticleaf.io/