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" />
    <link href="/css/shop.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: 'sU2jXv9bJKNyj8Li6bumfgnrGJTrRKHFmkcdtHlmrss',
              slug: 'ahmza',
              scope: 'market:15657',
              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">
                    • in stock
                  </cl-availability-status>
                  <cl-availability-status type="unavailable">
                    • 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>

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

</html>