blog-ahmza-com/layouts/page/shop.html

<!DOCTYPE html>
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">

<head>
    {{- partial "head.html" . }}
    <script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.0.0/dist/drop-in/drop-in.esm.js"></script>
    <link href="/css/minicart.css" rel="stylesheet" />
    <link href="/css/drop-in.css" rel="stylesheet" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body class="
{{- if eq site.Params.defaultTheme `dark` -}}
{{- print " dark" }}
{{- end -}}
" id="top">
    {{- partialCached "header.html" . .Page -}}
    <main class="main">
        <script>
          (function() {
            window.commercelayerConfig = {
              clientId: 'FhOf27nCAGlzcFebyY1I5I_IERTt_9axJ9QTcID62Ao',
              slug: 'ahmza',
              scope: 'market:15644',
              returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
            }
          }());
        </script>

        <div class=shop-nav-div>
          <ul class=shop-nav>
            <li>
              <cl-identity-status type="guest">
                <cl-identity-link type="login" target="_parent">
                  Login
                </cl-identity-link>
              </cl-identity-status>
            </li>
            <li>
              <cl-identity-status type="customer">
                <cl-identity-link type="login" target="_parent">
                  Account
                </cl-identity-link>
              </cl-identity-status>
            </li>
            <li>
              <cl-cart-link>
                cart
                <cl-cart-count hide-when-empty="true"></cl-cart-count>
                <cl-cart></cl-cart>
              </cl-cart-link>
            </li>
          </ul>
        </div>

        <div class=productList>
          {{ range ( where .Site.RegularPages "Type" "products" ) }}
            <div class=product>
              <a href="{{ .RelPermalink }}">
                <div class=prodImage>
                  <img src="{{ .Params.image }}">
                </div>
                <div class=prodTitle>
                  <h4>{{ .Title }}<h4>
                </div>
              </a>
              <div class=prodPrice>
                <cl-price code="{{ .Params.code }}">
                  <cl-price-amount type="compare-at">.</cl-price-amount>
                  <cl-price-amount type="price">.</cl-price-amount>
                </cl-price>
              </div>
              <div class=prodStock>
                <cl-availability code="{{ .Params.code }}">
                  <cl-availability-status type="available" style="color: green;">
                    • in stock
                  </cl-availability-status>
                  <cl-availability-status type="unavailable" style="color: red;">
                    • out of stock
                  </cl-availability-status>
                </cl-availability>
              </div>
              <div class=prodAddToCart>
                <cl-add-to-cart code="{{ .Params.code }}">
                  Add to cart
                </cl-add-to-cart>
              </div>
            </div>
          {{ end }}
        </div>

      <style>
        .main {
          position: relative;
          min-height: calc(100vh - var(--header-height) - var(--footer-height));
          max-width: calc(1024px + var(--gap) * 2);
          margin: auto;
          padding var(--gap)

        }
        .productList {
          display: inline-grid;
          grid-template-columns: auto auto auto;
          grid-auto-rows: 400px;
          grid-gap: 30px 10px;
          margin-top: 10px;
        }
        .product {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background-color: var(--entry);
          border: 1px solid var(--border);
          border-radius: var(--radius);
          text-align: center;
          padding: var(--gap);
        }
        img{
          margin-left: auto;
          margin-right: auto;
        }
        .prodImage {
          display:block;
          width: 100%;
          height: auto;
          max-height: 100%;
          border-radius: var(--radius);
          overflow-clip-margin: content-box;
          overflow: clip;
          padding-bottom: 10px
        }
        .shop-nav {
          list-style-type: none;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          max-width: calc(var(--nav-width) + var(--gap) * 2);
          margin-inline-start: auto;
          margin-inline-end: auto;
        }
        .shop-nav li {
          padding-right:10px;
          font-size: 16px;
        }

        @media only screen and (min-width: 608px) {
          .productList {
            grid-template-columns: auto auto auto;
          }
        }

        @media only screen and (min-width: 609px) {
          .productList {
            grid-template-columns: auto auto auto auto;
          }
          .shop-nav {
            justify-content: flex-end
          }
        }

        @media only screen and (min-width: 992px) {
          .productList {
            grid-template-columns: auto auto auto auto auto;
          }
        }

      </style>

    </main>
    {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
</body>

</html>