Jump to content

Add to Cart button on category or list page?

Go to solution Solved by paul2009,

Recommended Posts

How do you add an Add to Cart button next to products in a list or category page? 

I have a situation where users need will go over a list selecting the inventory they need. Drilling down to every product detail page to add them to the cart will be very tedious.

I don't have much experience with SQSP commerce, so I apologize for the basic question.

No site exists for this question. If this isn't possible, I'll have to use a non-SQSP solution for the project.

Thanks!

Link to comment
22 hours ago, DV2 said:

How do you add an Add to Cart button next to products in a list or category page? 

You can add a Product Block for each product to a single page. Each block can have an add to cart button.

If this is too much work (for example, for 100s of products) then you'll need a code solution.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Thanks Paul! 

It would be 150 to 200 items on a category page with 5 different categories, around 800 products total. 

I was actually planning on using your wishlist plugin on this project. Can you run queries on the sqsp product database or did you mean a code solution outside of sqsp? 

Link to comment
  • Solution
18 minutes ago, DV2 said:

did you mean a code solution outside of sqsp? 

I was referring to the use of some JavaScript to include Add to Cart buttons on the Product List Page so that customers do not need to visit individual Product Detail Pages.

On Squarespace 7.1, a simplified example would look something like this (add to Settings > Advanced > Code Injection > FOOTER):

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
<script>
  $(".products .grid-item").each(function(e) {
      $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-button-element--primary" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".products .grid-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>

image.thumb.png.b5e0890f8f8253a2e9fc084f3cea8f7c.png

 

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.