Link button to add_to_cart outside spree engine on view

Question

I am creating a product and adding a button that I would like to go straight to add_to_cart spree path. I have tried the following:

<%= link_to t("cart_info.add_to_cart"), spree.cart_path(@spree_product), class: "button button-rounded button-flat-action", style: "margin-top: 10px", type: :submit %>

And the button goes to an empty cart. How can add or link my view button to add_to_cart outside the spree engine?

For clarity, I am trying to populate the cart with my own custom button, which is this button on spree:

<%= f.submit Spree.t(:add_to_cart), class: 'button button-rounded button-flat-action', id: 'add-to-cart-button', type: :submit %>

Here is my partial file for the product description that has the button Add to cart.

<div class="cart-form" style="clear: both; text-align: right; border: 1px solid #ddd; border-radius: 5px; padding: 15px;">
  <%= form_for :order, url: spree.populate_orders_path do |f| %>
    <div class="row" id="inside-product-cart-form" data-hook="inside_product_cart_form" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      <%= hidden_field_tag "variant_id", @spree_product.master.id %>

      <% if @spree_product.price_in(current_currency) && !@spree_product.price.nil? %>
        <div data-hook="product_price" class="col-md-5 inner-price-box">
          <div id="product-price" style="font-weight: bold; font-size: 1.5em;">
            <div>
              <span class="lead price selling" itemprop="price" content="<%= @spree_product.price_in(current_currency).amount.to_d %>">
                <% if @spree_product.variants.count > 1 %>
                   <%= t("cart_info.from") %>
                 <% end %>
                   <%= display_price(@spree_product) %> <%= t("cart_info.ex_vat") %>
              </span>
              <span itemprop="priceCurrency" content="<%= current_currency %>"></span>
            </div>

            <% if @spree_product.master.can_supply? %>
              <link itemprop="availability" href="https://schema.org/InStock" />
            <% elsif @spree_product.variants.empty? %>
              <br />
              <span class="out-of-stock"><%= Spree.t(:out_of_stock) %></span>
            <% end %>
          </div>

          <div class="inner-price-box">
            <% if @spree_product.variants.present? %>
              <%= link_to t("cart_info.configure"), spree.product_path(@spree_product), class: "button button-rounded button-flat-action", style: "margin-top: 10px", data: { turbolinks: false } %>
            <% else %>
              <%= f.number_field :quantity, value: 1, class: 'title form-control', min: 1 %>
              <%= link_to t("cart_info.add_to_cart"), spree.product_path(@spree_product), class: "button button-rounded button-flat-action", style: "margin-top: 10px", type: :submit %>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

The custom button on the file above is on app/views/products/_cart_form partial:

<%= link_to t("cart_info.add_to_cart"), spree.product_path(@spree_product), class: "button button-rounded button-flat-action", style: "margin-top: 10px", type: :submit %>

At the moment it goes from the product image when clicked then goes to the product description, then goes to the spree product page which goes to the customer's cart. So I just want to be able to go to the customer's cart from the product description instead of going to the spree product page and then the customer's cart.

Answer 1

I managed to resolve this. I contacted the guys from Spree via slack and they managed to give me a clue on how to solve it. So took a look at the javascript assets inside the Spree frontend library. Used the Ajax query API.