Jump to content

Add to Cart Link

Recommended Posts

Hello!

I am using html and custom css to create a product grid layout, mostly taken from here (demo #2).

Each product includes an add to cart button, but I can't figure how to trigger the action to actually add the item to the cart. My code currently just redirects the user to the cart without adding the item. I've pasted the HTML and CSS code below. The red text portion seems to be where I need to make edits, but I haven't been able to get it to work. (The alphanumeric ID is the Product ID generated by Squarespace.) I've also tried to include "&quantity=1" to the href, but same result.

Any thoughts would be tremendously appreciated.

Cheers!

---

HTML 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="product-grid2">
                <div class="product-image2">
                    <a href="neuroscience/adrecor-with-same-neuroscience">
                        <img class="pic-1" src="https://static1.squarespace.com/static/5f13531f921aa12e07284a88/5f14b6502a4010553e97e5f4/5f14d99e2a4010553e9c86a6/1595202048889/AdreCor+with+SAMe+-+1+-+thumbsize.png">
                        <img class="pic-2" src="https://static1.squarespace.com/static/5f13531f921aa12e07284a88/5f14b6502a4010553e97e5f4/5f14d9ae40592a3871b2d00b/1595202048189/AdreCor+with+SAMe+-+2+-+thumbsize.png">
                    </a>
                   
<a class="add-to-cart" href="cart/add?id=5f14bb65534d5b34f27ddb2d">Add to cart</a>
                </div>
                <div class="product-content">
                    <h3 class="title"><a href="neuroscience/adrecor-with-same-neuroscience">AdreCor with SAMe (NeuroScience)</a></h3>
                    <span class="price">$67.00</span>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>

CSS

.demo{padding:45px 0}
.product-grid2{font-family:'Open Sans',sans-serif;position:relative}
.product-grid2 .product-image2{overflow:hidden;position:relative}
.product-grid2 .product-image2 a{display:block}
.product-grid2 .product-image2 img{width:100%;height:auto;transform:scale(1.5)}
.product-image2 .pic-1{opacity:1;transition:all .5s}
.product-grid2:hover .product-image2 .pic-1{opacity:0}
.product-image2 .pic-2{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;transition:all .5s}
.product-grid2:hover .product-image2 .pic-2{opacity:1}
.product-grid2 .social{padding:0;margin:0;position:absolute;bottom:50px;right:25px;z-index:1}
.product-grid2 .social li{margin:0 0 10px;display:block;transform:translateX(100px);transition:all .5s}
.product-grid2:hover .social li{transform:translateX(0)}
.product-grid2:hover .social li:nth-child(2){transition-delay:.15s}
.product-grid2:hover .social li:nth-child(3){transition-delay:.25s}
.product-grid2 .social li a{color:#505050;background-color:#fff;font-size:17px;line-height:45px;text-align:center;height:45px;width:45px;border-radius:50%;display:block;transition:all .3s ease 0s}
.product-grid2 .social li a:hover{color:#fff;background-color:#3498db;box-shadow:0 0 10px rgba(0,0,0,.5)}
.product-grid2 .social li a:after,.product-grid2 .social li a:before{content:attr(data-tip);color:#fff;background-color:#000;font-size:12px;line-height:22px;border-radius:3px;padding:0 5px;white-space:nowrap;opacity:0;transform:translateX(-50%);position:absolute;left:50%;top:-30px}
.product-grid2 .social li a:after{content:'';height:15px;width:15px;border-radius:0;transform:translateX(-50%) rotate(45deg);top:-22px;z-index:-1}
.product-grid2 .social li a:hover:after,.product-grid2 .social li a:hover:before{opacity:1}
.product-grid2 .add-to-cart{color:#fff;background-color:#404040;font-size:15px;text-align:center;width:100%;padding:10px 0;display:block;position:absolute;left:0;bottom:-100%;transition:all .3s}
.product-grid2 .add-to-cart:hover{background-color:#3498db;text-decoration:none}
.product-grid2:hover .add-to-cart{bottom:0}
.product-grid2 .product-new-label{background-color:#3498db;color:#fff;font-size:17px;padding:5px 10px;position:absolute;right:0;top:0;transition:all .3s}
.product-grid2:hover .product-new-label{opacity:0}
.product-grid2 .product-content{padding:20px 10px;text-align:center}
.product-grid2 .title{font-size:17px;margin:0 0 7px}
.product-grid2 .title a{color:#303030}
.product-grid2 .title a:hover{color:#3498db}
.product-grid2 .price{color:#303030;font-size:15px}
@media screen and (max-width:990px){.product-grid2{margin-bottom:30px}
}

Link to comment
  • Replies 0
  • Views 806
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.