[RUBY] Erstellen einer EC-Site mit Rails 5 ⑨ ~ Erstellen einer Warenkorbfunktion ~

Einführung

Dies ist eine Fortsetzung der Serie "Erstellen einer EC-Site mit Rails 5 (](https://qiita.com/GreenFingers_tk/items/0d2caea916a82e234af2), die eine EC-Site erstellt, auf der Sie in einer fiktiven Bäckerei einkaufen können. Dieses Mal werden wir eine Wagenfunktion machen. Das Erscheinungsbild der EC-Site ist endlich fertig.

Quellcode

https://github.com/Sn16799/bakeryFUMIZUKI

Modellassoziation

Die mit der Wagenfunktion verbundenen Modelle sind hauptsächlich Kunde und Produkt. In der Warenkorbfunktion gibt es keinen Hauptteil des Warenkorbs. Wenn Sie ein Produkt auswählen und auf die Schaltfläche "In den Warenkorb" klicken, wird für jedes Produkt ein Datenelement registriert. Das CartItem-Modell fungiert als Zwischentabelle, in der nur die Kunden- und Produkt-IDs sowie die Anzahl der Produkte gespeichert sind.

Controller

app/controllers/cart_items_controller.rb

class CartItemsController < ApplicationController

  before_action :authenticate_customer!
  before_action :set_cart_item, only: [:show, :update, :destroy, :edit]
  before_action :set_customer

  def create
    @cart_item = current_customer.cart_items.build(cart_item_params)
    @current_item = CartItem.find_by(product_id: @cart_item.product_id,customer_id: @cart_item.customer_id)
    #Wenn sich das gleiche Produkt nicht im Warenkorb befindet, fügen Sie ein neues hinzu, falls vorhanden, und fügen Sie es den vorhandenen Daten hinzu
    if @current_item.nil?
      if @cart_item.save
        flash[:success] = 'Der Artikel wurde in den Warenkorb gelegt!'
        redirect_to cart_items_path
      else
        @carts_items = @customer.cart_items.all
        render 'index'
        flash[:danger] = 'Der Artikel konnte nicht in den Warenkorb gelegt werden.'
      end
    else
      @current_item.quantity += params[:quantity].to_i
      @current_item.update(cart_item_params)
      redirect_to cart_items_path
    end
  end

  def destroy
    @cart_item.destroy
    redirect_to cart_items_path
    flash[:info] = 'Ich habe den Artikel im Warenkorb storniert.'
  end

  def index
    @cart_items = @customer.cart_items.all
  end

  def update
    if @cart_item.update(cart_item_params)
      redirect_to cart_items_path
      flash[:success] = 'Die Artikel im Warenkorb wurden aktualisiert!'
    end
  end

  def destroy_all #Löschen Sie alle Artikel im Warenkorb
    @customer.cart_items.destroy_all
    redirect_to cart_items_path
    flash[:info] = 'Ich habe meinen Wagen geleert.'
  end

  private

  def set_customer
    @customer = current_customer
  end

  def set_cart_item
    @cart_item = CartItem.find(params[:id])
  end

  def cart_item_params
    params.require(:cart_item).permit(:product_id, :customer_id, :quantity)
  end
end

Wenn Sie in der Aktion "Erstellen" nur "Speichern" schreiben und versuchen, dasselbe Produkt zu kaufen, wird dasselbe Produkt als unterschiedliche Daten registriert, z. B. "Brot 1, Brot 2, Brot 1, ..." **. Dies geschieht aufgrund der Struktur der Tabelle. Da es jedoch praktisch ist, die zusätzlichen Artikel, die später zum Warenkorb hinzugefügt werden, anzeigen zu können, wird die Verarbeitung durch die if-Anweisung geteilt.

Wenn ich in der Lage sein wollte, die Artikel im Warenkorb einzeln zu stornieren und den Inhalt des Warenkorbs auf einmal zu leeren, ist dies praktisch als destroy_all. Ich habe eine Methode gefunden.

View

Indexbildschirm

html:app/views/cart_items/index.html.erb

<div class="col-lg-10 offset-lg-1 space">
  <div class="container-fluid">
    <!--Titel+Alle Methoden löschen-->
    <div class="row">
      <div class="col-lg-4">
        <h2>
          <span style="display: inline-block;">Einkaufen</span>
          <span style="display: inline-block;">Wagen</span>
        </h2>
      </div>
      <div class="col-lg-4">
        <%= link_to 'Leeren Sie den Wagen', destroy_all_cart_items_path, method: :delete, class: 'btn btn-danger' %>
      </div>
    </div>

    <!--Liste der Produkte im Warenkorb-->
    <div class="d-none d-lg-block">
      <div class="row space">
        <div class="col-lg-5"><h4>Produktname</h4></div>
        <div class="col-lg-2"><h4>Stückpreis (inkl. MwSt.)</h4></div>
        <div class="col-lg-2"><h4>Menge</h4></div>
        <div class="col-lg-2"><h4>Zwischensumme</h4></div>
      </div>
    </div>

    <% sum_all = 0 %>
    <% @cart_items.each do |cart_item| %>
    <div class="row space-sm">
      <div class="col-lg-3">
        <%= link_to product_path(cart_item.product) do %>
        <%= attachment_image_tag(cart_item.product, :image, :fill, 100, 100, fallback: "no_img.jpg ") %>
        <% end %>
      </div>
      <div class="col-lg-2">
        <%= link_to product_path(cart_item.product) do %>
        <%= cart_item.product.name %>
        <% end %>
      </div>
      <div class="col-lg-2">
        <%= price_include_tax(cart_item.product.price) %>
      </div>
      <div class="col-lg-2">
        <%= form_with model: cart_item, local: true do |f| %>
        <%= f.number_field :quantity, value: cart_item.quantity, min:1, max:99  %>
        <%= f.submit "Veränderung", class: "btn btn-primary" %>
        <% end %>
      </div>
      <div class="col-lg-2">
        <%= sum_product = price_include_tax(cart_item.product.price).to_i * cart_item.quantity %>Kreis
        <% sum_all += sum_product %>
      </div>
      <div class="col-lg-1">
        <%= link_to "löschen", cart_item_path(cart_item), method: :delete, class: "btn btn-danger"%>
      </div>
    </div>
    <% end %>

    <!--Gesamtgebühr+Dateneingabe-->
    <div class="row space">
      <div class="col-lg-2 offset-lg-7 space-sm">
        <%= link_to "Mit dem Einkaufen fortfahren", customer_top_path, class: "btn btn-danger "%>
      </div>
      <div class="col-lg-3 space-sm">
        <div class="row">
          <h4>Gesamtgebühr:<%= sum_all %>Kreis</h4>
        </div>
      </div>
    </div>
    <div class="row space">
      <div class="col-lg-3 offset-lg-9">
        <%= link_to "Fahren Sie mit der Informationseingabe fort", new_order_path, class: "btn btn-danger btn-lg" %>
      </div>
    </div>

  </div>
</div>

Die Zwischensumme für jedes Produkt und die Gesamtsumme für alle Produkte werden angezeigt, indem die Berechnungsformel in jede Anweisung in der Ansicht aufgenommen wird. Im Allgemeinen scheint es nicht wünschenswert zu sein, detaillierte Berechnungen und Verzweigungsverarbeitungen durchzuführen. Gibt es also eine andere gute Methode?

app/helpers/application_helper.rb

def price_include_tax(price)
  price = price * 1.08
  "#{price.floor}Kreis"
end

Dies ist der Helfer, mit dem der steuerpflichtige Preis des Produkts im obigen HTML-Code angezeigt wird. Der Teil nach dem Dezimalpunkt wird vom Boden abgeschnitten. Weitere Informationen zum Umgang mit Dezimalstellen finden Sie unter hier.

app/assets/stylesheets/application.scss

.space-sm {
  padding-top: 20px;
}

Nachtrag

Die Implementierung von Funktionen ist etwas komplizierter geworden und wird endlich interessant. Selbst wenn Sie sich die Website ansehen, können Sie viel einkaufen, wenn Sie die Artikel in den Warenkorb legen. Wenn Sie danach eine Bestellung erstellen (Bestellinformationen), ist die Kundenseite fertig!

In dieser Serie wird die Admin-Site jedoch auch von mir selbst erstellt, sodass die Codemenge etwa die Hälfte beträgt. Die Funktion des Order-Modells war jedoch äußerst schwierig zu verstehen, als ich es das letzte Mal gemacht habe. Wenn ich das könnte, könnte ich etwas dagegen tun.

Kann ich nun das schwierigste Bestellmodell auf leicht verständliche Weise erklären? Weiter zum nächsten Mal!

Referenz

Pikawaka [Ruby] Runden, aufrunden und abrunden, indem Sie die Anzahl der Nachkommastellen angeben!