Introduction

This is a continuation of the series that creates an EC site where you can shop at a fictitious bakery, Create an EC site with Rails 5 ⑦. This time, we will implement a Product model that displays a list of products and details. Since the product is managed on the admin site side, only the process of displaying the screen is performed on the customer site side.

However, both the Genre model that bundles the products and the Product model that belongs to it have the status of "On sale / stopped". In addition to setting on-sale / stop for each product, the same setting can be made for each genre. It is a little difficult to narrow down because only those that are "valid" for both Genre and Product are displayed on the customer site.

Source code

https://github.com/Sn16799/bakeryFUMIZUKI

Model association

controller

`app/controllers/products_controller.rb`


class ProductsController < ApplicationController

  #For sidebar display
  before_action :set_genres

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

  def index
    #Narrow down the products for which the genre is valid and the product status is valid
    @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

In the index, conditions are set in the validity column of the Genre model (parent) and the status column of the Product model (child) to narrow down. With this, we have been able to retrieve the product group with "genre is valid" and "product status is valid". In addition, we have prepared a pager (kaminari) so that 9 products can be displayed on each page.

`app/models/product.rb`


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

`app/models/genre.rb`


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

Both is_active and is_valid in the controller are scopes that narrow down the validity / invalidity of products and genres. It is not essential because it is not a process that is performed many times in this application, but defining the scope makes it easier to modify later, and you can see what process is being performed on the code source. It will be easier to understand.

view

index screen

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


<div class="col-lg-10 space">
  <div class="container">
  <h2>
    <span style="display: inline-block;">List of all products</span>
    <span style="display: inline-block;">（<%= @products.count %>seed)</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 %>

The partial template is a small div with'products / box'with photos, names, prices, etc. for each product, and'genres / index' is a sidebar with links to see products by genre. The HTML source is [Previous article](https://qiita.com/GreenFingers_tk/items/32a501bf47e6e2151511#%E9%83%A8%E5%88%86%E3%83%86%E3%83%B3%E3% It is published at 83% 97% E3% 83% AC% E3% 83% BC% E3% 83% 88).

show screen

`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 of item</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 :Number of purchases%>
    <%= f.number_field :quantity, value: 1 ,min:1, max:99 %>Pieces
    <%= f.hidden_field :product_id, value: @product.id  %>
    <%= f.submit "Add to cart", class: "btn btn-danger" %>
    <% end %>
  </div>
  </div>
</div>

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

On the show screen, you can see the item description and add the item you like to the cart.

Although it is designed to display a blank form, since nothing is written in CartItemController, pressing the "Add to cart" button at this time will result in an error. Please be careful.

Postscript

By creating a screen with a lot of products, it looks like a bakery site. As usual, there is no functional aspect. In addition, the pager and product box are not processed with CSS at all, so the feeling of being a little murky cannot be wiped out. The decoration will be done together at the end, so I want to hurry to complete the function first.

The prototype of this EC site is an app made by the school team implementation, but when I look at it now, there are some unexpected omissions such as validation. I thought that even if three people worked together, there would be some parts that would be overlooked, but maybe it wasn't just an issue with such detailed requirements defined.

This is the second development, so I would like to stick to that area as well. Continue to Next time!

reference

I want to search by parent model information from Rails small model

Creating an EC site with Rails5 ⑧ ~ Product model edition, narrowed down display with conditions for both parents and children ~