[RUBY] Implementation of digit grouping in flea market apps

I will describe the summary of the digit grouping implemented in the flea market application development.

ruby"2.5.1" Rails"5.2.4.3"

As the price increases, it becomes difficult to understand the amount, so we will implement digit separators for the product prices on the following three pages. This time we will use a helper method called delimited.

--Top page screen before modification スクリーンショット 2020-08-14 10.48.27.png

--Product detail page screen before modification スクリーンショット 2020-08-14 10.49.04.png

--Product purchase page screen before modification スクリーンショット 2020-08-14 10.49.34.png

① Define helper method in "helpers / products_helper.rb" as follows

(* For product details / purchase page)

products_helper.rb


     module ProductsHelper
       def converting_to_jpy(price)
    	 "#{price.to_s(:delimited, delimiter: ',')}Circle"
       end
     end
(2) Define helper methods in "helpers / tops_helper.rb" as shown below.

(* For top page)

tops_helper.rb


     module TopsHelper
       def converting_to_jpy_top(price)
         "#{price.to_s(:delimited, delimiter: ',')}"
       end
     end
③ Changed the notation of price in "products / show.html.haml"

ruby:show.html.haml


     .show__main__product__content__information__price
       %span
         = converting_to_jpy(@product.price)
④ Changed the notation of price in "products / purchase.html.haml"

ruby:purchase.html.haml


     %p.purchase__main__product-info__inner__content__detail__price
       %span
        = converting_to_jpy(@product.price)
⑤ Change the notation of price in "_item-preview.html.haml"

ruby:_item-preview.html.haml


     .item__caption__details__price
       = converting_to_jpy_top(product.price)

This completes the changes on each page.

--Corrected top page スクリーンショット 2020-08-14 15.18.46.png

--Corrected product detail page スクリーンショット 2020-08-14 15.19.08.png

--Revised product purchase page スクリーンショット 2020-08-14 15.19.26.png

With the introduction of digit grouping, I wondered if the page was a little tighter.

that's all.

Recommended Posts

Implementation of digit grouping in flea market apps
Retrospective record of making flea market apps
Implementation of category selection form using JS in flea market application creation
Implementation of gzip in java
Implementation of tri-tree in Java
Implementation of HashMap in kotlin
Implementation of ls command in Ruby
Implementation of asynchronous processing in Tomcat
Implementation of like function in Java
Implementation of DBlayer in Java (RDB, MySQL)
Implementation of multi-tenant asynchronous processing in Tomcat
Don't forget to summarize the features and points of the flea market apps
SKStoreReviewController implementation memo in Swift UI of iOS14
[Rails] Implementation of retweet function in SNS application
[Rails] Implementation of "notify notification in some way"
Implementation of GKAccessPoint
Implementation of asynchronous processing for single tenant in Tomcat
Remote debugging of Java applications in Azure Web Apps
Consideration of options for implementing native apps (in writing)