添加新项目时的购物车模式 - rails 5 jquery

Posted 2023-05-08

【中文标题】添加新项目时的购物车模式 - rails 5 jquery

【英文标题】：Shopping Cart modal when adding a new item - rails 5 jquery

【发布时间】：2021-06-13 22:13:06

【问题描述】：

我希望购物车在用户向其中添加商品时显示为模式。 “添加到购物车”按钮位于 products#show 视图页面上，在 form_tag 内，该标签发布到 order_items#create 控制器，以便在购物车中创建新项目。我很困惑，因为我想要的是购物车的展示，但我想我不想调用我的购物车控制器，只需从 order_item 创建操作中调用它的视图。 我在我的views/order_items 文件夹中添加了一个create.js.erb，并在布局文件夹中添加了一个部分。我得到的是这个错误： ActionController::UnknownFormat (OrderItemsController#create 缺少此请求格式和变体的模板。 我不知道如何让 rails 找到正确的模板。有人可以帮忙吗？

产品#show

        <%= form_tag order_items_path  class: "coffee_form", remote: true do %>

        <%= select_tag "grind", raw("#raw_str"), multiple: false, class:"coffee_form btn-block form-control-lg"  %>


        <%= label_tag Product.human_attribute_name("weight")%>
        <%= select_tag "weight", raw("<option>250</option><option>1000</option>"), multiple: false, class:"coffee_form btn-block form-control-lg", id:"selected_weight", onchange: "displayPrice();"  %>
        <%= hidden_field_tag 'product_id', @product.id %>
          <div class='mt-3'>
            <%= submit_tag t("addcart"), class: 'btn btn-block btn-warning', data:  toggle: 'modal', target: '#myModal' %>

OrderItems#create

 def create
   chosen_weight = params[:weight].to_i
   chosen_product = Product.find(params[:product_id])
....
      @order_item = OrderItem.new
....

      if session[:cart_id] == nil
          @current_cart = Cart.create
          session[:cart_id] = @current_cart.id
      end


      @order_item.cart_id = @current_cart.id
      @order_item.product = @product
      @order_item.grind = params[:grind]
      @order_item.quantity = params[:quantity]
      @order_item.shipping_points = @product.shipping_points * params[:quantity].to_i


     @order_item.save!

    respond_to do |format|
        format.html # create.html.erb
        format.js # create.js.erb

    end

在views/order_items 文件夹中创建.js.erb

$('myModal').html('<%= j render "layouts/modal"');

views/layouts 文件夹中的_modal.html.erb

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

一件事。 $('myModal').html('<%= j render "layouts/modal"'); 你还没有关闭 Rails 标签。关于你的问题，你有更多的背景吗？你能在浏览器中看到一个 XHR 调用吗？当您将表单传递为remote: true 并同时拥有 HTML 和 JS 模板时，应该没问题。

【参考方案1】：

您可能希望从 order_items#create 操作重定向到 carts#show，但请确保在没有布局的情况下进行渲染。

然后，当您使用fetch 发布新订单商品时，获取呈现的内容并将其放入您的 modal/popover/other 中。

如果您使用 turbo，只需在 turbo-frame 中渲染模态框，就可以使其自动发生。

【讨论】：

感谢您的回答@rewritten。以前我在 orderItems#create 控制器中有一个：redirect_to cart_path(current_cart)。如何在没有布局的情况下渲染它？要么，我不确定如何使用“获取”。你的意思是，在创建控制器中？