カートに追加ボタンを追加するカートに追加する

カートに追加ボタンを追加する
カートに追加ボタン

歓迎🎉 ランダムなブログでコードする.このブログでは、カートに追加するボタンを作成する方法について説明します.これはすべての電子商取引のウェブサイトの非常に一般的なコンポーネントです.
このプロジェクトを始めるには、HTML、CSS(SSS)、JavaScriptの基本的な理解が必要です.ホープは私たちのブログを楽しむので、カートのボタンを追加するHTMLの基本的なHTML構造から始めましょう.
HTMLコード

<div class="container">  
   <button class="add-to-cart-button">  
     <svg class="add-to-cart-box box-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="2" fill="#ffffff"/></svg>  
     <svg class="add-to-cart-box box-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="2" fill="#ffffff"/></svg>  
     <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>  
     <svg class="tick" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="#ffffff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"/></svg>  
     <span class="add-to-cart">Add to cart</span>  
     <span class="added-to-cart">Added to cart</span>  
   </button>  
 </div> 

Add to CartのすべてのHTMLコードがあります.必要な数字を作成するには、HTMLタグを使用します.SVG(スケーラブルなベクトルグラフィックス)についての詳細を知るために、簡単な導入のために我々のブログを読んでください.
カートに追加ボタンを追加
CSS/SCSSコード
我々のプロジェクトをスタイル化するために、我々はCSSのより高度な変種であるSCSSを使用しています.SSSは、通常のCSSよりも多くの機能を提供し、それはCSSに似たような構文を使用して、これは簡単に学ぶことができます.

.add-to-cart-button {  
   background: #e6a247;  
   border: none;  
   border-radius: 4px;  
   -webkit-box-shadow: 0 3px 13px -2px rgba(0,0,0,.15);  
   box-shadow: 0 3px 13px -2px rgba(0,0,0,.15);  
   color: #ffffff;  
   display: flex;  
   font-family: 'Ubuntu', sans-serif;  
   justify-content: space-around;  
   min-width: 195px;  
   overflow: hidden;  
   outline: none;  
   padding: 0.7rem;  
   position: relative;  
   text-transform: uppercase;  
   transition: 0.4s ease;  
   width: auto;  
   &:active {  
     -webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3,.45);  
     box-shadow: 0 0 0 0.2rem rgba(252, 186, 3,.45);  
     -webkit-transform: translateY(4px);  
     transform: translateY(4px);  
   }  
   &:hover {  
     cursor: pointer;  
   }  
   &:hover,  
   &:focus {  
     -webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3,.45);  
     box-shadow: 0 0 0 0.2rem rgba(252, 186, 3,.45);  
     -webkit-transform: translateY(-1px);  
     transform: translateY(-1px);  
   }  
   &.added {  
     background: #2fbf30;  
     -webkit-box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);  
     box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);  
     .add-to-cart {  
       display: none;  
     }  
     .added-to-cart {  
       display: block;  
     }  
     .cart-icon {  
       animation: drop 0.3s forwards;  
       -webkit-animation: drop 0.3s forwards;  
       animation-delay: 0.18s;  
     }  
     .box-1,  
     .box-2 {  
       top: 18px;  
     }  
     .tick {  
       animation: grow 0.6s forwards;  
       -webkit-animation: grow 0.6s forwards;  
       animation-delay: 0.7s;  
     }  
   }  
 }  
 .add-to-cart,  
 .added-to-cart {  
   margin-left: 36px;  
 }  
 .added-to-cart {  
   display: none;  
   position: relative;  
 }  
 .add-to-cart-box {  
   height: 5px;  
   position: absolute;  
   top: 0;  
   width: 5px;  
 }  
 .box-1,  
 .box-2 {  
   transition: 0.4s ease;  
   top: -8px;  
 }  
 .box-1 {  
   left: 23px;  
   transform: rotate(45deg);  
 }  
 .box-2 {  
   left: 32px;  
   transform: rotate(63deg);  
 }  
 .cart-icon {  
   left: 15px;  
   position: absolute;  
   top: 8px;  
 }  
 .tick {  
   background: #146230;  
   border-radius: 50%;  
   position: absolute;  
   left: 28px;  
   transform: scale(0);  
   top: 5px;  
   z-index: 2;  
 }  
 @-webkit-keyframes grow {  
   0% {-webkit-transform: scale(0);}  
   50% {-webkit-transform: scale(1.2);}  
   100% {-webkit-transform: scale(1);}  
 }  
 @keyframes grow {  
   0% {transform: scale(0);}  
   50% {transform: scale(1.2);}  
   100% {transform: scale(1);}  
 }  
 @-webkit-keyframes drop {  
   0% {-webkit-transform: translateY(0px);}  
   100% {-webkit-transform: translateY(1px);}  
 }  
 @keyframes drop {  
   0% {transform: translateY(0px);}  
   100% {transform: translateY(1px);}  
 }  
 /* Page style */  
 .container {  
   align-items: center;  
   display: flex;  
   height: 100vh;  
   justify-content: center;  
   width: 100%;  
 }  

カートに追加ボタンを追加
ジャバスクリプトコード
今、私たちは、カートに追加するをクリックしてポップアップディスプレイを作成するときにJavaScriptを追加する“カートに追加”!
ここでは、SetTimeout ()関数を使用します.

addToCartButton = document.querySelectorAll(".add-to-cart-button");  
 document.querySelectorAll('.add-to-cart-button').forEach(function(addToCartButton) {  
   addToCartButton.addEventListener('click', function() {  
     addToCartButton.classList.add('added');  
     setTimeout(function(){  
       addToCartButton.classList.remove('added');  
     }, 2000);  
   });  
 });  

カートに追加HTML出力
結論
あなたはカートのボタンのHTMLに追加したい.出力ビデオとプロジェクトのスクリーンショットを見ることができます.当社の他のブログを参照してフロントエンドの開発の知識を得る.ありがとう🙏💕
Click Here For this project output
Click Here For Website and get 300 free frontend Project
このポストでは、シンプルなHTML & CSSとJavaScriptを使用してカートを追加する方法を学びます.我々は間違いや混乱をした場合は、コメントを返信したり、簡単に学習のお手伝いをしてください.
ランダム/ankiで-コードで書かれた