<div class="quote-table-totals-wrap">
    <table class="table quote-table-totals" tabindex="0" role="table">
        <tfoot>
            <tr class="catalog_price_table" role="row">
                <td class="" colspan="2" role="gridcell">
                    <table class="table " tabindex="0" role="table">
                        <tbody>
                            <tr role="row">
                                <th class="" scope="row" role="gridcell">
                                    <strong>Subtotal (Excl. Tax)</strong>
                                </th>
                                <td class="" data-th="Subtotal (Excl. Tax)" role="gridcell">
                                    $3,117.00
                                </td>
                            </tr>
                            <tr role="row">
                                <th class="" scope="row" role="gridcell">
                                    <strong>Subtotal (Incl. Tax)</strong>
                                </th>
                                <td class="" data-th="Subtotal (Incl. Tax)" role="gridcell">
                                    $3,117.00
                                </td>
                            </tr>
                            <tr role="row">
                                <th class="" scope="row" role="gridcell">
                                    <strong>Discount</strong>
                                </th>
                                <td class="" data-th="Discount" role="gridcell">
                                    $0.00
                                </td>
                            </tr>
                            <tr role="row">
                                <th class="" scope="row" role="gridcell">
                                    <strong>Estimated Tax</strong>
                                </th>
                                <td class="" data-th="Estimated Tax" role="gridcell">
                                    $0.00
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </td>
            </tr>
            <tr role="row">
                <th class="" scope="row" role="gridcell">
                    <strong>Quote Subtotal (Excl. Tax)</strong>
                </th>
                <td class="" data-th="Quote Subtotal (Excl. Tax)" role="gridcell">
                    $3,117.00
                </td>
            </tr>
            <tr role="row">
                <th class="" scope="row" role="gridcell">
                    <strong>Estimated Tax</strong>
                </th>
                <td class="" data-th="Estimated Tax" role="gridcell">
                    $0.00
                </td>
            </tr>
            <tr role="row">
                <th class="" scope="row" role="gridcell">
                    <strong>Quote Grand Total (Incl. Tax)</strong>
                </th>
                <td class="" data-th="Quote Grand Total (Incl. Tax)" role="gridcell">
                    <strong>$3,117.00</strong>
                </td>
            </tr>
        </tfoot>
    </table>

</div>
<div class="quote-table-totals-wrap">
    {{render '@table' tableTotals }}
</div>
{
  "tableTotals": {
    "class": "quote-table-totals",
    "mainTags": [
      {
        "mainTag": "tfoot",
        "rowTags": [
          {
            "rowTag": "tr",
            "rowTagAttributes": "class=\"catalog_price_table\" role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "colspan=\"2\" role=\"gridcell\"",
                "contentComponent": "table",
                "contentContext": {
                  "mainTags": [
                    {
                      "mainTag": "tbody",
                      "rowTags": [
                        {
                          "rowTag": "tr",
                          "rowTagAttributes": "role=\"row\"",
                          "childTags": [
                            {
                              "childTag": "th",
                              "content": "<strong>Subtotal (Excl. Tax)</strong>",
                              "childTagAttributes": "scope=\"row\" role=\"gridcell\""
                            },
                            {
                              "childTag": "td",
                              "content": "$3,117.00",
                              "childTagAttributes": "data-th=\"Subtotal (Excl. Tax)\" role=\"gridcell\""
                            }
                          ]
                        },
                        {
                          "rowTag": "tr",
                          "rowTagAttributes": "role=\"row\"",
                          "childTags": [
                            {
                              "childTag": "th",
                              "content": "<strong>Subtotal (Incl. Tax)</strong>",
                              "childTagAttributes": "scope=\"row\" role=\"gridcell\""
                            },
                            {
                              "childTag": "td",
                              "content": "$3,117.00",
                              "childTagAttributes": "data-th=\"Subtotal (Incl. Tax)\" role=\"gridcell\""
                            }
                          ]
                        },
                        {
                          "rowTag": "tr",
                          "rowTagAttributes": "role=\"row\"",
                          "childTags": [
                            {
                              "childTag": "th",
                              "content": "<strong>Discount</strong>",
                              "childTagAttributes": "scope=\"row\" role=\"gridcell\""
                            },
                            {
                              "childTag": "td",
                              "content": "$0.00",
                              "childTagAttributes": "data-th=\"Discount\" role=\"gridcell\""
                            }
                          ]
                        },
                        {
                          "rowTag": "tr",
                          "rowTagAttributes": "role=\"row\"",
                          "childTags": [
                            {
                              "childTag": "th",
                              "content": "<strong>Estimated Tax</strong>",
                              "childTagAttributes": "scope=\"row\" role=\"gridcell\""
                            },
                            {
                              "childTag": "td",
                              "content": "$0.00",
                              "childTagAttributes": "data-th=\"Estimated Tax\" role=\"gridcell\""
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "th",
                "content": "<strong>Quote Subtotal (Excl. Tax)</strong>",
                "childTagAttributes": "scope=\"row\" role=\"gridcell\""
              },
              {
                "childTag": "td",
                "content": "$3,117.00",
                "childTagAttributes": "data-th=\"Quote Subtotal (Excl. Tax)\" role=\"gridcell\""
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "th",
                "content": "<strong>Estimated Tax</strong>",
                "childTagAttributes": "scope=\"row\" role=\"gridcell\""
              },
              {
                "childTag": "td",
                "content": "$0.00",
                "childTagAttributes": "data-th=\"Estimated Tax\" role=\"gridcell\""
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "th",
                "content": "<strong>Quote Grand Total (Incl. Tax)</strong>",
                "childTagAttributes": "scope=\"row\" role=\"gridcell\""
              },
              {
                "childTag": "td",
                "content": "<strong>$3,117.00</strong>",
                "childTagAttributes": "data-th=\"Quote Grand Total (Incl. Tax)\" role=\"gridcell\""
              }
            ]
          }
        ]
      }
    ]
  }
}
  • Content:
    $quote-table-totals-wrap-padding        : $spacer--semi-medium $spacer--medium !default;
    $quote-table-totals-wrap-padding\@medium: 56px 80px !default;
    $quote-table-totals-wrap-padding\@large : 56px $spacer--large !default;
    $quote-table-totals-wrap-padding\@xl    : 56px 112px !default;
    $quote-table-totals-wrap-bg             : $gray-lighter !default;
    $quote-table-cell-width                 : 65% !default;
    
    .quote-table-totals-wrap {
        padding: $quote-table-totals-wrap-padding;
        background: $quote-table-totals-wrap-bg;
    
        @include mq($screen-m) {
            padding: $quote-table-totals-wrap-padding\@medium;
        }
    
        @include mq($screen-l) {
            padding: $quote-table-totals-wrap-padding\@large;
        }
    
        @include mq($screen-xl) {
            padding: $quote-table-totals-wrap-padding\@xl;
        }
    
        table {
            width: 100%;
            background: transparent;
            border: 0;
    
            tr {
                padding: 0;
                border: 0;
            }
    
            td,
            th,
            th[scope="row"] {
                background: transparent;
                border: 0;
            }
    
            th,
            th[scope="row"] {
                @include mq($screen-m) {
                    width: $quote-table-cell-width;
                }
            }
    
            th[scope="row"] + td {
                flex-flow: row nowrap;
            }
    
            tfoot {
                td {
                    display: flex;
    
                    @include mq($screen-m) {
                        display: table-cell;
                    }
                }
            }
        }
    
        .catalog_price_table {
            > td {
                padding: 0;
                border-bottom: $table__border;
                flex-direction: column;
    
                &:before {
                    display: none;
                }
            }
        }
    }
    
  • URL: /components/raw/quote-totals/_totals.scss
  • Filesystem Path: build/components/Organisms/b2b/quote/totals/_totals.scss
  • Size: 1.7 KB

Quote totals table

  • We are using Magento classes to avoid override b2b js and templates