---
cart: true
---
{{#partial "page"}}
<div class="page">

    <div class="page-content" data-cart>
        {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

        {{> components/cart/page-title}}

        <div data-cart-status>
            {{> components/cart/status-messages}}
        </div>

        {{#if cart.items.length}}
            <div class="loadingOverlay"></div>

            <div data-cart-content class="cart-content-padding-right">
                {{> components/cart/content}}
            </div>

            <div data-cart-totals class="cart-content-padding-right">
                {{> components/cart/totals}}
            </div>

            {{{region name="cart_below_totals"}}}

            {{#if cart.show_primary_checkout_button}}
                <div class="cart-actions cart-content-padding-right">
                    <a class="button button--primary" href="{{urls.checkout.single_address}}" title="{{lang 'cart.checkout.title'}}">
                        <i class="icon"><svg><use xlink:href="#icon-lock"></use></svg></i><span>{{lang 'cart.checkout.button'}}</span>
                    </a>
                    {{#if cart.show_multiple_address_shipping}}
                        <a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}">
                            {{lang 'cart.preview.checkout_multiple'}}
                        </a>
                    {{/if}}
                </div>
            {{else}}
                <div class="cart-actions cart-content-padding-right">
                    <a class="button" href="{{urls.home}}" title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a>
                </div>
            {{/if}}

            {{#if cart.additional_checkout_buttons}}
                <div class="cart-additionalCheckoutButtons cart-content-padding-right">
                    {{#each cart.additional_checkout_buttons}}
                        {{{this}}}
                    {{/each}}
                </div>
            {{/if}}
        {{else}}
            {{#if theme_settings.currentsite '===' 'PKC'}}
                 <h3 tabindex="0">{{lang 'cart.checkout.empty_cart'}}</h3>
            {{/if}}
           
        {{/if}}
        <!-- recommended for you  -->
        <!-- <script>
                // const $cartItemsRows = $('[data-item-row]');
                if($cartItemsRows){
                    const first_product_id = $($cartItemsRows[0]).data('product-id');
                    fetch('/graphql',{
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjaWQiOjEsImNvcnMiOlsiaHR0cHM6Ly9zdG9yZS13MnAzNzJiYzZuLm15YmlnY29tbWVyY2UuY29tIl0sImVhdCI6MTYzOTU4MjQ1NiwiaWF0IjoxNjM5NDA5NjU2LCJpc3MiOiJCQyIsInNpZCI6MTAwMTkwMzIyMSwic3ViIjoiYmNhcHAubGlua2VyZCIsInN1Yl90eXBlIjowLCJ0b2tlbl90eXBlIjoxfQ.IIRAr23HWvIVvUd7sBktYKL8na4vrUYLTxzPZ-5v5VWpahoPnWkjmDXDX5CHzJp81WwIxUFb3NhunvYi5RNRuA'
                        },
                        body: JSON.stringify({
                            query:
                            `
                            query productById {
                                        site {
                                            product(entityId: ${first_product_id}) {
                                            name
                                            relatedProducts{
                                                edges {
                                                    node {
                                                        name
                                                    }
                                                }
                                            }
                                            sku
                                            }
                                        }
                                }
                            `
                        })
                    })
                    .then(res => res.json())
                    .then((res2 => {console.log(res2)})
                )}
               
        </script>

        {{#if product.similar_by_views}}
        <div class="productView-product-list">
            <h4>{{uppercase (lang 'products.recently_viewed')}}</h4>
            <div class="similar-by-views productCarousel-wrapper" id="tab-similar">
                {{> components/products/carousel products=product.similar_by_views columns=4 list="You Recently Viewed"}}
            </div>
        </div>
        {{/if}} -->
        {{#if theme_settings.currentsite '===' 'PK'}}
            <div class="estimate_content">
                <p class="estimate_title">NOTES</p>
                <p>For full and or half pieces orders:</p>
                <p>The yardage listed is an estimate based on average piece sizes for full and or half pieces.</p>
                <p>Actual sizes will vary based on stock. Exact yardage, freight charges, and tax will be calculated at the time of shipping.</p>
            </div>
        {{/if}}
    </div>
</div>
<div class="bottom-checkout-bar-cart">
    <a class="button button--primary" href="{{urls.checkout.single_address}}" title="{{lang 'cart.checkout.title'}}">
        <i class="icon"><svg id="custom-svg"><use xlink:href="#icon-lock"></use></svg></i><span>{{lang 'cart.checkout.button'}}</span>
    </a>
</div>
{{/partial}}
{{> layout/base}}