[RUBY] Erstellen einer EC-Site mit Rails5 Product ~ Produktmodell, bedingte Verengungsanzeige für Eltern und Kinder ~

Einführung

Dies ist eine Fortsetzung der Serie "Erstellen einer EC-Site mit Rails 5 (7)" (https://qiita.com/GreenFingers_tk/items/32a501bf47e6e2151511), die eine EC-Site erstellt, auf der Sie in einer fiktiven Bäckerei einkaufen können. Dieses Mal implementieren wir ein Produktmodell, das eine Liste von Produkten und Details anzeigt. Da das Produkt auf der Admin-Site-Seite verwaltet wird, wird nur der Prozess der Anzeige des Bildschirms auf der Customer-Site-Seite ausgeführt.

Sowohl das Genre-Modell, das Produkte bündelt, als auch das dazugehörige Produktmodell haben jedoch den Status "Im Verkauf / gestoppt". Zusätzlich zur Einstellung von On-Sale / Stop für jedes Produkt kann für jedes Genre dieselbe Einstellung vorgenommen werden. Es ist etwas schwierig einzugrenzen, da auf der Kundenseite nur "gültige" Artikel für Genre und Produkt angezeigt werden.

Quellcode

https://github.com/Sn16799/bakeryFUMIZUKI

Modellassoziation

controller

app/controllers/products_controller.rb

class ProductsController < ApplicationController

  #Zur Anzeige in der Seitenleiste
  before_action :set_genres

  def show
    @product = Product.find(params[:id])
    @cart = @product.cart_items.build
  end

  def index
    #Grenzen Sie Produkte mit gültigen Genres und gültigem Produktstatus ein
    @products = Product.includes(:genre).where(genres: {validity: true}).is_active.page(params[:page]).per(9)
  end

  private

  def set_genres
    @genre = Genre.is_valid
  end

  def product_params
    params.require(:product).permit(:name,:price,:image_id, :genre_id)
  end
end

Im Index werden Bedingungen in der Gültigkeitsspalte des Genre-Modells (übergeordnet) und in der Statusspalte des Produktmodells (untergeordnet) festgelegt, um sie einzugrenzen. Sie haben jetzt die Produktgruppe mit "Genre gültig" und "Produktstatus gültig" abgerufen. Zusätzlich haben wir einen Pager (Kaminari) vorbereitet, damit auf jeder Seite 9 Produkte angezeigt werden können.

app/models/product.rb

scope :is_active, -> { where(status: true) }

app/models/genre.rb

scope :is_valid, -> { where(validity: true) }

Sowohl is_active als auch is_valid im Controller sind Bereiche, die die Gültigkeit / Ungültigkeit von Produkten und Genres einschränken. Dies ist nicht unbedingt erforderlich, da es sich nicht um einen Prozess handelt, der in dieser Anwendung häufig ausgeführt wird. Die Definition des Bereichs erleichtert jedoch die spätere Änderung und zeigt visuell an, welcher Prozess an der Codequelle ausgeführt wird. Es wird leichter zu verstehen sein.

view

Indexbildschirm

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

<div class="col-lg-10 space">
  <div class="container">
  <h2>
    <span style="display: inline-block;">Liste aller Produkte</span>
    <span style="display: inline-block;">（<%= @products.count %>Samen)</span>
  </h2>
</div>
  <div class="container">
    <div class="row">
    <% @products.each do |gp| %>
      <%= render 'products/box', product: gp %>
    <% end %>
  </div>
  </div>
  <%= paginate @products %>
</div>
<%= render 'genres/index', genres: @genres %>

Die Teilvorlage ist ein kleines Div mit "Produkten / Box", in dem Fotos, Namen, Preise usw. für jedes Produkt aufgelistet sind, und "Genres / Index" ist eine Seitenleiste mit Links, um Produkte nach Genre anzuzeigen. Die HTML-Quelle ist [Vorheriger Artikel](https://qiita.com/GreenFingers_tk/items/32a501bf47e6e2151511#%E9%83%A8%E5%88%86%E3%83%86%E3%83%B3%E3% Es wird veröffentlicht bei 83% 97% E3% 83% AC% E3% 83% BC% E3% 83% 88).

Bildschirm anzeigen

html:app/views/products/show.html.erb

<div class="col-lg-10 space">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 offset-lg-2">
        <%= attachment_image_tag(@product, :image, :fill, 560, 420, fallback: "no_img.jpg ") %>
      </div>
      <div class="col-lg-4">
        <h3>
          <%= @product.name %>
        </h3>
        <h4>Beschreibung des Artikels</h4>
        <%= @product.introduction %>
        <h4>
          <%= price_include_tax(@product.price) %>
        </h4>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="w-50 offset-lg-6">
    <%= form_with(model: [@product, @cart], local: true, url: {controller: 'cart_items', action: 'create'}) do |f| %>
    <%= f.label :Anzahl der Einkäufe%>
    <%= f.number_field :quantity, value: 1 ,min:1, max:99 %>Stücke
    <%= f.hidden_field :product_id, value: @product.id  %>
    <%= f.submit "In den Warenkorb legen", class: "btn btn-danger" %>
    <% end %>
  </div>
  </div>
</div>

<%= render'genres/index', genres: @genres %>

Auf dem Show-Bildschirm können Sie die Produktbeschreibung sehen und die gewünschte in den Warenkorb legen.

Es ist so konzipiert, dass ein leeres Formular angezeigt wird. Da jedoch in CartItemController nichts geschrieben ist, führt das Drücken der Schaltfläche "In den Warenkorb" zu diesem Zeitpunkt zu einem Fehler. Bitte seien Sie vorsichtig.

Nachtrag

Durch das Erstellen eines Bildschirms mit vielen Produkten sieht es aus wie eine Bäckerei. Wie üblich gibt es keinen funktionalen Aspekt. Außerdem werden der Pager und die Produktbox überhaupt nicht mit CSS verarbeitet, sodass das Gefühl, ein wenig trübe zu sein, nicht ausgelöscht werden kann. Die Dekoration wird am Ende zusammen gemacht, also möchte ich mich beeilen, um die Funktion zuerst abzuschließen.

Der Prototyp dieser EC-Site ist eine App, die von der Teamimplementierung der Schule erstellt wurde. Wenn ich sie mir jetzt anschaue, gibt es einige unerwartete Auslassungen wie die Validierung. Ich dachte, selbst wenn drei Personen zusammenarbeiten würden, würde es einige Teile geben, die übersehen würden, aber vielleicht war es nicht nur ein Problem mit solch detaillierten Anforderungen.

Dies ist die zweite Entwicklung, daher möchte ich mich auch an diesen Bereich halten. Fahren Sie fort mit Nächstes Mal!

Referenz

Ich möchte nach übergeordneten Modellinformationen aus dem kleinen Rails-Modell suchen