購入後にSOLD OUTを表示させた話

こんにちは！

テックキャンプ40日目残り33日

少しブログの投稿をサボってしまいましたので今日から復活します☺️

もう9月に入りテックキャンプの終了が見えてきました💦

8月からの学習時間も300時間を超えてきましたが、まだまだ自走力は低いので引続き

精進して参ります！

さて本題に入りますと、現在最終課題では某フリマアプリのクローンアプリを作成しています！

そこで購入完了後は商品画像にSOLD OUTの文字が追加される実装をしたのでアウトプットをしていきます。

結論からお話しすると結構簡単に実装する事ができました☺️

では実装に入っていきます！

まずHTMLにマークアップをしていきます！

div class='sold-out'>

<span>Sold Out!!</span>

</div>

次にcssにスタイルを当てていきます！

.sold-out {

position: absolute;

top: 40%;

width: 100%;

text-align: center;

background-color: crimson;

transform: skewY(-10deg);

}

.sold-out>span {

color: #FFF;

font-size: 45px;

font: bold;

}

この辺の詳しい説明は割愛させていただきます。

あとはHTML側に『購入されてる場合は表示する』と分岐を付けます

<% if item.purchase.present?%>

<div class='sold-out'>

<span>Sold Out!!</span>

</div>

<% end %>

<% if item.purchase.present?%>について説明していきます！

item.purchaseで商品に紐ずく購入履歴という意味です。

present?はオブジェクトの中身が存在すればtrue、無ければfalseを返します

これを組み合わせる事で、購入されていればSOLD OUTを表示する事ができました😊

present?はこれからよく使いそうなのでしっかり身に付けるようにしていきます！

こんな感じで今日は終わろうと思います！

今日は朝投稿なので今から10時間テックキャンプ頑張って参ります