Adding "Add to Cart Button" To Summary Block

Site URL: http://www.nuestramesabk.com/menu

Hello,

I am trying to add an "Add to Cart" button to the products I'm displaying on a summary block. I found the following code below from a similar issue and it creates the button for each item with the correct appearance. When clicked, it just redirects to the page for the product. Website is nuestramesabk.com/menu

<style>
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
    padding-bottom: 50px !important;
  }
  .summary-content {
    position:relative;
  }
  .summary-title .summary-title-link::after {
    content: 'order';
    background-color: #f29182;
    border-radius: 30px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background-color: normal;
    border-color: normal;
    position: absolute;
    bottom: -45px;
  }
</style>

Edit: I also found this code which adds an "Add to Cart" button to the grid view of the shop page - I'm hoping there's a way to add that functionality to the button I have showing up on my summary block. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>



<style>
  .products .grid-item {
    padding-bottom: 100px;
    width: 100% !important;
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 30;
    left: 0;
    right: 0;
    width: 100px;
    min-width: 100px;
    margin: 20px;
    padding:5px 5px;
  }
</style>

<script>
  $(".products .grid-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Order</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);
    });
  });
  
.product-block .sqs-add-to-cart-button {
    width: 10px;
   margin:auto
}
</script>

Maybe there is a fix with JQuery? I found this code (attached below) that added an "Add to Cart" button to the grid on the general shop page - it normally doesn't feature this. I'm wondering if there's a way to implement that with the button I have showing up now on my summary block. I've added the code to the original post above.

36 minutes ago, irarosekim said:

I found this code (attached below) that added an "Add to Cart" button to the grid on the general shop page - it normally doesn't feature this.

Please point us to where you found this code.

https://www.bradgood.net/articles/how-to-add-an-add-to-cart-button-to-a-squarespace-product-list-page

2 minutes ago, creedon said:

Please point us to where you found this code.

I just tested the code and it does not add a true add to cart button but takes you to the product page. Where then you can click on the add to cart button.

20 minutes ago, creedon said:

I just tested the code and it does not add a true add to cart button but takes you to the product page. Where then you can click on the add to cart button.

I have it working on mine right now. The link is nuestramesabk.com/order - apologies for the garish appearance

1 hour ago, irarosekim said:

I have it working on mine right now. The link is nuestramesabk.com/order - apologies for the garish appearance

My bad. Ignore what I posted about the button not working.

I have it working now after a fashion as well. I did notice that a service product I have in my test store didn't work. The service product has variations on it which Brad mentioned doesn't work. So that could be a problem.

Unfortunately I don't think this code can be easily adapted to use for a summary block. The problem is that summary blocks don't provide the product id (data-item-id in the code) as part of the summary. Whereas the main store page does provide that info. The product id is critical to being able to create Add to Cart buttons.

No worries on the garish appearance.

Is there anyway to draw this into the summary block or pull it from else where on the site so the code I would have on the summary block could draw on it?

3 minutes ago, creedon said:

The problem is that summary blocks don't provide the product id (data-item-id in the code) as part of the summary. Whereas the main store page does provide that info. The product id is critical to being able to create Add to Cart buttons.

I am just thinking that the summary block creates the grid with products from your store so that there is hopefully someway for it to then also grab the id as well.

Upon further digging summary blocks do include the product id if the Quick View option is enabled and you have an image attached to a product.

The only other thing that comes to mind and is not simple (i.e automatic) would be a manual mapping between summary block link urls and product ids. That would have to be maintained manually.

At this point I wonder if the Lazy Summaries plug-in includes product ids in it's summaries? Without the need for quick view and images.

how do I add a (add to cart button to my summary block? on my homepage)

www.huntandgathergrocer.com.au 

at the momment it only displays the price? is there a way I can add a add to cart button under the price using stying css or javascript?

Thank you

15 hours ago, christina_marie_333 said:

how do I add a (add to cart button to my summary block? on my homepage)

www.huntandgathergrocer.com.au 

at the momment it only displays the price? is there a way I can add a add to cart button under the price using stying css or javascript?

 

Thank you

Hi. Have you tried above code yet?

I am trying to use this code to add the cart button to my product grid page.  I tried it and it adds huge buttons over the top of my product images.  No matter what I do, it doesn't look right.

Can someone help?

@Jrich58

Please post the URL for the product grid on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

2 hours ago, creedon said:

@Jrich58

Please post the URL for the product grid on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

thank you!  https://www.redlinedesigns.org/shop

temp password is tyKryf-potgyh-rezro3

Hi there, 

I am attempting to create this shopify product layout (screenshot attached below) in Squarespace. The layout I am referring to can be seen in the second section of the homepage of the Shopify site. To build it out in Squarespace, I have placed an Image Block next to a Summary Block and then added "Shop" buttons to the summary block items. I haven't quite worked out the layout of the shop buttons and product names/prices but the gist is there. You can check it out towards the bottom of this page (pw: standout).

I really love the way the section adapts as the browser size shrinks as demonstrated in this screen recording: https://www.loom.com/share/6716690d937b4695b1d682086239fc24

Does anyone have any insight on how this could be achieved in Squarespace? I've attached a screenshot of the mockup I am trying to achieve (it is the screenshot that features red buttons). I'd also love insight on how to make it so that my product titles/price & shop buttons are the same width as the images they sit beneath (as displayed in my mock up). Does anyone know how to do that?

Would love any insight. Thank you all!