Ability to display a list of products

Introduction

We will summarize the product display functions that were packed in the implementation this time.

Implementation function

・ Three displays of image, product, and product name. ・ Products are displayed in order of earliest posting date. ・ Sold out is displayed for sold products.

Image / Product. 3 displays of product name

<%= @item.price %>Circle<br><%= @item.shipping_method.name %>

When listing the product this time, Active Hash was used for ** delivery method, product status, prefecture, etc. **.

Points to note

Since Active Hash is used, if the above name is the same id as the column, the id will be displayed.

Products are displayed in order of posting date

Use the order method in the index action of the controller.

oreder method

A method that changes the order of instances that have record information obtained from the table. There are two types of sort order: ASC (ascending order) and DESC (descending order).

@users = User.all.order(Column name: :Sort order)

In this case, I want to display ** from the earliest saved time **. Therefore, I used the ** (created_at) column ** to save the saved time as shown below. Since the sort order is ** new to old (descending) **, desc is used.

@items = Item.all.order(created_at: :desc)

Show sold out for sold items

The method used to implement this feature -I want to display sold out when the product is sold out using the if statement. So how can you tell when a product is sold out and not sold out? The answer can be solved by using the ** present method **.

present method

It is a method that returns true if the value of the receiver that is an object exists, and false if it does not exist. It is often used when using conditional branching such as if statements.

Variable name.present?

Used by describing as above. ?? Put together. If you use this method to display sold out on the products sold this time, it will be as follows.

<% if item.purchase.present?  %>
   <div class='sold-out'>
    <span>Sold Out</span>
   </div>
<% end %>

・ ** item is the variable name of the table containing the product information ** ・ ** purchase is the variable name of the table that contains the information of the purchased product ** These two need to form an association in advance.