cruc components for Magento 2

Quote Items 

<div class="quote-items">
    <table class="table table--odd-even quote-table-items" tabindex="0" role="table">
        <thead>
            <tr role="row">
                <th class="" scope="col" role="columnheader">
                    Product name
                </th>
                <th class="" scope="col" role="columnheader">
                    SKU
                </th>
                <th class="" scope="col" role="columnheader">
                    Price
                </th>
                <th class="" scope="col" role="columnheader">
                    Stock
                </th>
                <th class="" scope="col" role="columnheader">
                    Qty
                </th>
                <th class="" scope="col" role="columnheader">
                    Subtotal
                </th>
                <th class="" scope="col" role="columnheader">

                </th>
            </tr>
        </thead>
        <tbody>
            <tr role="row">
                <td class="" data-th="Product name:" role="gridcell">
                    <a href="#">Some product long name</a>
                </td>
                <td class="" data-th="SKU:" role="gridcell">
                    NVV-036B1-2-N-T-L-1-MN-W10P5L
                </td>
                <td class="" data-th="Price:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="Stock:" role="gridcell">
                    0
                </td>
                <td class="" data-th="Qty:" role="gridcell">
                    <input id="cart-62-qty" name="cart[62][qty]" value="1" class="input-text" />
                </td>
                <td class="" data-th="Subtotal:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="" role="gridcell">
                    <a href="#">Remove item</a>
                </td>
            </tr>
            <tr role="row">
                <td class="" data-th="Product name:" role="gridcell">
                    <a href="#">Some product long name</a>
                </td>
                <td class="" data-th="SKU:" role="gridcell">
                    NVV-036B1-2-N-T-L-1-MN-W10P5L
                </td>
                <td class="" data-th="Price:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="Stock:" role="gridcell">
                    0
                </td>
                <td class="" data-th="Qty:" role="gridcell">
                    <input id="cart-62-qty" name="cart[62][qty]" value="1" class="input-text" />
                </td>
                <td class="" data-th="Subtotal:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="" role="gridcell">
                    <a href="#">Remove item</a>
                </td>
            </tr>
            <tr role="row">
                <td class="" data-th="Product name:" role="gridcell">
                    <a href="#">Some product long name</a>
                </td>
                <td class="" data-th="SKU:" role="gridcell">
                    NVV-036B1-2-N-T-L-1-MN-W10P5L
                </td>
                <td class="" data-th="Price:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="Stock:" role="gridcell">
                    0
                </td>
                <td class="" data-th="Qty:" role="gridcell">
                    <input id="cart-62-qty" name="cart[62][qty]" value="1" class="input-text" />
                </td>
                <td class="" data-th="Subtotal:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="" role="gridcell">
                    <a href="#">Remove item</a>
                </td>
            </tr>
            <tr role="row">
                <td class="" data-th="Product name:" role="gridcell">
                    <a href="#">Some product long name</a>
                </td>
                <td class="" data-th="SKU:" role="gridcell">
                    NVV-036B1-2-N-T-L-1-MN-W10P5L
                </td>
                <td class="" data-th="Price:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="Stock:" role="gridcell">
                    0
                </td>
                <td class="" data-th="Qty:" role="gridcell">
                    <input id="cart-62-qty" name="cart[62][qty]" value="1" class="input-text" />
                </td>
                <td class="" data-th="Subtotal:" role="gridcell">
                    $9,962.50
                </td>
                <td class="" data-th="" role="gridcell">
                    <a href="#">Remove item</a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr role="row">
                <td class="" colspan='100' role="gridcell">
                    <button type="button">Update</button>
                </td>
            </tr>
        </tfoot>
    </table>

    <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>
 
<div class="quote-items">
    {{ render '@table' quoteTable }}
    {{ render '@quote-totals' }}
</div>
 
{
  "quoteTable": {
    "class": "table--odd-even quote-table-items",
    "mainTags": [
      {
        "mainTag": "thead",
        "rowTags": [
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "th",
                "content": "Product name",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\""
              },
              {
                "childTag": "th",
                "content": "SKU",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\""
              },
              {
                "childTag": "th",
                "content": "Price",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\""
              },
              {
                "childTag": "th",
                "content": "Stock",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\""
              },
              {
                "childTag": "th",
                "content": "Qty",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\""
              },
              {
                "childTag": "th",
                "content": "Subtotal",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\""
              },
              {
                "childTag": "th",
                "content": "",
                "childTagAttributes": "scope=\"col\" role=\"columnheader\""
              }
            ]
          }
        ]
      },
      {
        "mainTag": "tbody",
        "rowTags": [
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Product name:\" role=\"gridcell\"",
                "content": "<a href=\"#\">Some product long name</a>"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"SKU:\" role=\"gridcell\"",
                "content": "NVV-036B1-2-N-T-L-1-MN-W10P5L"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Stock:\" role=\"gridcell\"",
                "content": "0"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
                "content": "<input id=\"cart-62-qty\" name=\"cart[62][qty]\" value=\"1\" class=\"input-text\" />"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"\" role=\"gridcell\"",
                "content": "<a href=\"#\">Remove item</a>"
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Product name:\" role=\"gridcell\"",
                "content": "<a href=\"#\">Some product long name</a>"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"SKU:\" role=\"gridcell\"",
                "content": "NVV-036B1-2-N-T-L-1-MN-W10P5L"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Stock:\" role=\"gridcell\"",
                "content": "0"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
                "content": "<input id=\"cart-62-qty\" name=\"cart[62][qty]\" value=\"1\" class=\"input-text\" />"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"\" role=\"gridcell\"",
                "content": "<a href=\"#\">Remove item</a>"
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Product name:\" role=\"gridcell\"",
                "content": "<a href=\"#\">Some product long name</a>"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"SKU:\" role=\"gridcell\"",
                "content": "NVV-036B1-2-N-T-L-1-MN-W10P5L"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Stock:\" role=\"gridcell\"",
                "content": "0"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
                "content": "<input id=\"cart-62-qty\" name=\"cart[62][qty]\" value=\"1\" class=\"input-text\" />"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"\" role=\"gridcell\"",
                "content": "<a href=\"#\">Remove item</a>"
              }
            ]
          },
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Product name:\" role=\"gridcell\"",
                "content": "<a href=\"#\">Some product long name</a>"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"SKU:\" role=\"gridcell\"",
                "content": "NVV-036B1-2-N-T-L-1-MN-W10P5L"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Price:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Stock:\" role=\"gridcell\"",
                "content": "0"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Qty:\" role=\"gridcell\"",
                "content": "<input id=\"cart-62-qty\" name=\"cart[62][qty]\" value=\"1\" class=\"input-text\" />"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"Subtotal:\" role=\"gridcell\"",
                "content": "$9,962.50"
              },
              {
                "childTag": "td",
                "childTagAttributes": "data-th=\"\" role=\"gridcell\"",
                "content": "<a href=\"#\">Remove item</a>"
              }
            ]
          }
        ]
      },
      {
        "mainTag": "tfoot",
        "rowTags": [
          {
            "rowTag": "tr",
            "rowTagAttributes": "role=\"row\"",
            "childTags": [
              {
                "childTag": "td",
                "content": "<button type=\"button\">Update</button>",
                "childTagAttributes": "colspan='100' role=\"gridcell\""
              }
            ]
          }
        ]
      }
    ]
  }
}
  • Content: 
    $quote-items__input-max-width  : 80px !default;
$quote-items__input-min-width  : 56px !default;
$quote-items__input-text-align : center !default;

.quote-items {
    .quote-title {
        display: none;
    }

    .quote-table-items {
        .input-text {
            @extend .input__field;
            max-width: $quote-items__input-max-width;
            min-width: $quote-items__input-min-width;
            text-align: $quote-items__input-text-align;
        }

        .table-caption {
            display: none;
        }

        .actions-toolbar {
            &._disabled {
                &:after {
                    content: '-';
                    display: block;
                }

                a {
                    display: none;
                }
            }
        }
    }
}
  • URL: /components/raw/quote-items/_items.scss
  • Filesystem Path: build/components/Organisms/b2b/quote/items/_items.scss
  • Size: 804 Bytes

There are no notes for this item.