Jump to content

irarosekim

Member
  • Posts

    7
  • Joined

  • Last visited

Posts posted by irarosekim

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

     

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

     

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

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