Jump to content

Adding "Add to Cart Button" To Summary Block

Recommended Posts

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>

Screenshot 2021-01-09 223059.png

Edited by irarosekim
More info
Link to comment

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.

 

Edited by irarosekim
Consolidation
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

 

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

Edited by Jrich58
Link to comment
  • 1 year later...

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!

Screenshot 2023-02-16 at 1.40.53 PM.png

Screenshot 2023-02-16 at 1.44.09 PM.png

Link to comment

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.