[RUBY] Création d'un site EC avec Rails5 ⑧ ~ Modèle de produit, affichage restreint conditionnel pour les parents et les enfants ~

introduction

Il s'agit de la suite de la série "Créer un site EC avec Rails 5 (7)" (https://qiita.com/GreenFingers_tk/items/32a501bf47e6e2151511), qui crée un site EC sur lequel vous pouvez faire vos achats dans une boulangerie fictive. Cette fois, nous allons mettre en œuvre un modèle de produit qui affiche une liste de produits et des détails. Le produit étant géré côté site d'administration, seul le processus d'affichage de l'écran est effectué côté site client.

Cependant, le modèle Genre qui regroupe les produits et le modèle de produit qui lui appartient ont le statut "En vente / arrêté". En plus de la mise en vente / arrêt pour chaque produit, le même réglage peut être effectué pour chaque genre. Il est un peu difficile de préciser car seuls ceux qui sont "valides" pour le genre et le produit sont affichés sur le site client.

Code source

https://github.com/Sn16799/bakeryFUMIZUKI

Association de modèles

controller

app/controllers/products_controller.rb

class ProductsController < ApplicationController

  #Pour l'affichage de la barre latérale
  before_action :set_genres

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

  def index
    #Affiner les produits avec des genres valides et un statut de produit valide
    @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

Dans l'index, les conditions sont définies dans la colonne de validité du modèle Genre (parent) et dans la colonne d'état du modèle Produit (enfant) à affiner. Vous avez maintenant récupéré le groupe de produits avec "genre valide" et "état du produit valide". De plus, nous avons préparé un pager (kaminari) afin que 9 produits puissent être affichés sur chaque page.

app/models/product.rb

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

app/models/genre.rb

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

Is_active et is_valid dans le contrôleur sont des champs d'application qui restreignent la validité / invalidité des produits et des genres. Ce n'est pas essentiel car ce n'est pas un processus qui est effectué plusieurs fois dans cette application, mais la définition de la portée facilite la modification ultérieure et montre visuellement quel processus est exécuté sur le code source. Ce sera plus facile à comprendre.

view

écran d'index

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

<div class="col-lg-10 space">
  <div class="container">
  <h2>
    <span style="display: inline-block;">Liste de tous les produits</span>
    <span style="display: inline-block;">（<%= @products.count %>la graine)</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 %>

Le modèle partiel est un petit div avec 'produits / boîte' avec des photos, noms, prix, etc. pour chaque produit, et 'genres / index' est une barre latérale avec des liens pour voir les produits par genre. La source HTML est [Article précédent](https://qiita.com/GreenFingers_tk/items/32a501bf47e6e2151511#%E9%83%A8%E5%88%86%E3%83%86%E3%83%B3%E3% Il est publié à 83% 97% E3% 83% AC% E3% 83% BC% E3% 83% 88).

afficher l'écran

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>Description de l'article</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 :Nombre d'achats%>
    <%= f.number_field :quantity, value: 1 ,min:1, max:99 %>Pièces
    <%= f.hidden_field :product_id, value: @product.id  %>
    <%= f.submit "Ajouter au chariot", class: "btn btn-danger" %>
    <% end %>
  </div>
  </div>
</div>

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

Sur l'écran du salon, vous pouvez voir la description du produit et ajouter celle que vous aimez au panier.

Il est conçu pour afficher un formulaire vierge, mais comme rien n'est écrit dans CartItemController, le fait d'appuyer sur le bouton «Ajouter au panier» à ce moment entraînera une erreur. S'il vous plaît soyez prudente.

Postscript

En créant un écran avec beaucoup de produits, cela ressemble à un site de boulangerie. Comme d'habitude, il n'y a pas d'aspect fonctionnel. De plus, le pager et la boîte du produit ne sont pas du tout traités avec CSS, de sorte que la sensation d'être un peu trouble ne peut pas être effacée. La décoration se fera ensemble à la fin, je veux donc me dépêcher de terminer la fonction en premier.

Le prototype de ce site EC est une application créée par l'équipe d'implémentation de l'école, mais quand je la regarde maintenant, il y a des omissions inattendues telles que la validation. Je pensais que même si trois personnes travaillaient ensemble, il y aurait certaines parties qui seraient négligées, mais peut-être que ce n'était pas seulement un problème avec des exigences aussi détaillées définies.

Il s’agit du deuxième développement, je voudrais donc m’en tenir à ce domaine également. Continuez vers La prochaine fois!

référence

Je souhaite effectuer une recherche dans le petit modèle Rails par informations sur le modèle parent