new.html.erb

<%= render :partial => 'spree/shared/error_messages', :locals => { :target => @product } %>

<%= form_for [:admin, @product], method: :post, url: admin_products_path, :html => { :multipart => true } do |f| %>

  <fieldset data-hook="new_product">

    <legend align="center"><%= Spree.t(:new_product) %></legend>

    <%= f.field_container :name do %>
      <%= f.label :name, class: 'required' %><br />
      <%= f.text_field :name, :class => 'fullwidth title', :required => true %>
      <%= f.error_message_on :name %>
    <% end %>

    <div data-hook="new_product_attrs" class="row">
      <% unless @product.has_variants? %>
        <div data-hook="new_product_sku" class="alpha four columns">
          <%= f.field_container :sku do %>
            <%= f.label :sku, Spree.t(:sku) %><br />
            <%= f.text_field :sku, :size => 16, :class => 'fullwidth' %>
            <%= f.error_message_on :sku %>
          <% end %>
        </div>
      <% end %>

      <div data-hook="new_product_prototype" class="four columns">
        <%= f.field_container :prototype do %>
          <%= f.label :prototype_id, Spree::Prototype.model_name.human %><br />
          <%= f.collection_select :prototype_id, Spree::Prototype.all, :id, :name, {:include_blank => true}, {:class => 'select2 fullwidth'} %>
        <% end %>
      </div>

      <div data-hook="new_product_price" class="four columns">
        <%= f.field_container :price do %>
          <%= f.label :price, class: 'required' %><br />
          <%= f.text_field :price, :value => number_to_currency(@product.price, :unit => ''), :class => 'fullwidth', :required => true %>
          <%= f.error_message_on :price %>
        <% end %>
      </div>

      <div data-hook="new_product_available_on" class="omega four columns">
        <%= f.field_container :available_on do %>
          <%= f.label :available_on %>
          <%= f.error_message_on :available_on %>
          <%= f.text_field :available_on, :class => 'datepicker fullwidth' %>
        <% end %>
      </div>

    </div>

    <div class='row'>
      <div data-hook="new_product_shipping_category" class="alpha four columns">
        <%= f.field_container :shipping_category do %>
          <%= f.label :shipping_category_id, Spree::ShippingCategory.
                model_name.human, class: 'required' %><br />
          <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { :include_blank => Spree.t('match_choices.none') }, { :class => 'select2 fullwidth', :required => true }) %>
          <%= f.error_message_on :shipping_category_id %>
        <% end %>
      </div>
    </div>

    <div class="clearfix" data-hook="product-from-prototype" id="product-from-prototype">
      <%= render :file => 'spree/admin/prototypes/show' if @prototype %>
    </div>

    <%= render :partial => 'spree/admin/shared/new_resource_links' %>

  </fieldset>
<% end %>

<script type="text/javascript">
//<![CDATA[
  (function($){
    var base_url = "<%= admin_prototypes_url %>";
    var prototype_select = $('#product_prototype_id');
    prototype_select.change(function() {
      var id = prototype_select.val();
      if (id.length) {
        var url = new Uri(base_url);
        url.setPath(url.path() + '/' + id);
        $('#product-from-prototype').load(url.toString());
      } else {
        $('#product-from-prototype').empty();
      }
    })
    if (prototype_select.html() == "") {
      prototype_select.change();
    }
  })(jQuery);
//]]>
</script>