resourceDOCS.html

<script>
  function showMenu(menu) {
    document.body.classList.remove('composable', 'composer', 'payments', 'api', 'cm', 'developer', 'selfmanaged', 'studio', 'plugin', 'pxm');
    document.body.classList.add(menu);
  }

  window.showMenu = showMenu;
</script>
<div class="docs-dropdown flex max-w-lg flex-col rounded-2xl lg:min-w-[580px]">
  <div class="flex flex-col p-4 lg:min-h-[300px] lg:flex-row">
    <div class="flex flex-1 flex-col gap-4">
      <!-- API -->
      <a
              data-dropdown-docs-menu="api"
              onfocus="document.body.setAttribute('docs-menu', 'api')"
              onmouseover="document.body.setAttribute('docs-menu', 'api')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/api"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/rest-api-icon.svg"
                  class="h-6 w-6"
                  alt="RestAPI Documentation"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">
            API Documentation
          </div>
          <p class="mb-0 text-left text-sm text-text-400">
            API Reference and OpenAPI specifications for Elastic Path Services
          </p>
        </div>
      </a>
      <!-- CM Docs -->
      <a
              data-dropdown-docs-menu="cm"
              onfocus="document.body.setAttribute('docs-menu', 'cm')"
              onmouseover="document.body.setAttribute('docs-menu', 'cm')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/ui"
              datautmcampaign="commerce-manager"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/cm.svg"
                  class="h-6 w-6"
                  alt="Commerce Manager"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Commerce Manager</div>
          <p class="mb-0 text-left text-sm text-text-400">
            A web-based user interface to manage your Elastic Path services.
          </p>
        </div>
      </a>
      <!-- PXM Docs -->
      <a
              data-dropdown-docs-menu="pxm"
              onfocus="document.body.setAttribute('docs-menu', 'pxm')"
              onmouseover="document.body.setAttribute('docs-menu', 'pxm')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/pxm"
              datautmcampaign="pxm"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/pxm.svg"
                  class="h-6 w-6"
                  alt="Commerce Manager"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Product Experience Manager</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Merchandise your products, catalogs, pricing.
          </p>
        </div>
      </a>
      <!-- Subscription Docs -->
      <a
              data-dropdown-docs-menu="subs"
              onfocus="document.body.setAttribute('docs-menu', 'subs')"
              onmouseover="document.body.setAttribute('docs-menu', 'subs')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/subscriptions"
              datautmcampaign="subscriptions"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/subscriptions.svg"
                  class="h-6 w-6"
                  alt="Subscriptions"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Subscriptions</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Drive recurring revenue.
          </p>
        </div>
      </a>
      <!-- Orders -->
      <a
              data-dropdown-docs-menu="carts"
              onfocus="document.body.setAttribute('docs-menu', 'carts')"
              onmouseover="document.body.setAttribute('docs-menu', 'carts')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/orders"
              datautmcampaign="carts"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/cart.svg"
                  class="h-6 w-6"
                  alt="EP Payments"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Carts, Checkout & Orders</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Manage carts and orders
          </p>
        </div>
      </a>
      <!-- Composer
      <a
              data-dropdown-docs-menu="composer"
              onfocus="document.body.setAttribute('docs-menu', 'composer')"
              onmouseover="document.body.setAttribute('docs-menu', 'composer')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/docs/composer"
      >
        <div class="flex-shrink-0">

        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Composer</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Guides and API reference
          </p>
        </div>
      </a>-->
      <!-- Studio -->
      <a
              data-dropdown-docs-menu="studio"
              onfocus="document.body.setAttribute('docs-menu', 'studio')"
              onmouseover="document.body.setAttribute('docs-menu', 'studio')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/docs/studio"
              datautmcampaign="studio"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/studio.svg"
                  class="h-6 w-6"
                  alt="Studio"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Studio</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Landing pages & storefronts.
          </p>
        </div>
      </a>
      <!-- Composer -->
      <a
              data-dropdown-docs-menu="composer"
              onfocus="document.body.setAttribute('docs-menu', 'composer')"
              onmouseover="document.body.setAttribute('docs-menu', 'composer')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/docs/composer"
              datautmcampaign="composer"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/builder.svg"
                  class="h-6 w-6"
                  alt="Composer"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Composer</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Composer is a vertical-specific commerce intelligence IPaaS.
          </p>
        </div>
      </a>
      <!-- Payments -->
      <a
              data-dropdown-docs-menu="payments"
              onfocus="document.body.setAttribute('docs-menu', 'payments')"
              onmouseover="document.body.setAttribute('docs-menu', 'payments')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/docs/payments"
              datautmcampaign="payments"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/payments.svg"
                  class="h-6 w-6"
                  alt="EP Payments"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Payments</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Elastic Path Payments, Powered by Stripe
          </p>
        </div>
      </a>
      <!-- Developer Tools -->
      <a
              data-dropdown-docs-menu="developer"
              onfocus="document.body.setAttribute('docs-menu', 'developer')"
              onmouseover="document.body.setAttribute('docs-menu', 'developer')"
              class="flex cursor-pointer !mt-2 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
              href="/docs/developer-tools"
              datautmcampaign="developer-tools"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/developer.svg"
                  class="h-6 w-6"
                  alt="Developer Tools"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1 ">
          <div class="text-base font-semibold">Developer Tools</div>
          <p class="mb-0 text-left text-sm text-text-400">
            SDKs, Composable CLI Frontend, Postman Collections
          </p>
        </div>
      </a>
      <!--Self Managed-->
      <a
        data-dropdown-docs-menu="selfmanaged"
        onfocus="document.body.setAttribute('docs-menu', 'selfmanaged')"
        onmouseover="document.body.setAttribute('docs-menu', 'selfmanaged')"
        class="flex cursor-pointer !mt-4 items-start justify-start gap-2 border-none bg-transparent text-black dark:text-white"
        href="https://documentation.elasticpath.com"
        target="_blank"
        datautmcampaign="self-managed"
      >
        <div class="flex-shrink-0">
          <img
                  src="/icons/resourceDocs/selfmanaged.svg"
                  class="h-6 w-6"
                  alt="Self Managed Commerce"
          />
        </div>
        <div class="flex flex-col items-start justify-start gap-1">
          <div class="text-base font-semibold">Self Managed Commerce</div>
          <p class="mb-0 text-left text-sm text-text-400">
            Guides and API reference for Self Managed Commerce
          </p>
        </div>
      </a>

    </div>
    <!--Composable Commerce
    <div class="flex-1 p-6">
      <div class="flex flex-col gap-2" data-dropdown-docs="composable">
        <div class="flex flex-1 flex-col">
          <h3 class="!mb-0.5">Composable Commerce Documentation</h3>
          <span class="none hidden text-sm font-normal lg:block">
            Explore our guides and product documentation</span
          >
          <ul class="docs-ul">
            <li>
              <a href="/docs/commerce-cloud" class="docs-link">
                Commerce
              </a>
            </li>
            <li>
              <a href="/docs/commerce-cloud/api-overview" class="docs-link">
                API Overview
              </a>
            </li>
          </ul>
        </div>
      </div>-->
      <!--subscriptions
      <div class="flex flex-col gap-2" data-dropdown-docs="subscriptions">
        <div class="flex w-full gap-2">
          <div class="flex-1">
            <h3>Subscriptions</h3>
            <ul class="list-none pl-0">
              <li>
                <a href="/docs/subscriptions/" class="docs-link">
                  Overview
                </a>
              </li>
              <li>
                <a href="/api/docs/subscriptions/subscriptions-overview" class="docs-link">
                  API Documentation
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>-->
      <!--carts
      <div class="flex flex-col gap-2" data-dropdown-docs="carts">
        <div class="flex w-full gap-2">
          <div class="flex-1">
            <h3>Carts, Checkout & Orders</h3>
            <ul class="list-none pl-0">
              <li>
                <a href="/orders" class="docs-link">
                  Overview
                </a>
              </li>
              <li>
                <a href="/docs/api/carts/elastic-path-composable-commerce" class="docs-link">
                  API Documentation
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>-->
      <!--Studio
      <div class="flex flex-col gap-2" data-dropdown-docs="studio">
        <div class="flex w-full gap-2">
          <div class="flex-1">
            <h3>Studio</h3>
            <ul class="list-none pl-0">
              <li>
                <a href="/docs/studio" class="docs-link">
                  Overview
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>-->
      <!-- <div class="flex gap-2" data-dropdown-docs="plugin">
        <div class="flex-1">
          <h3>Core Docs</h3>

          <ul class="list-none pl-0">
            <li>
              <a href="/plugin-docs" class="docs-link">
                <img src="/static/landing-page/docs-icons/js.png" />
                Javascript
              </a>
            </li>
          </ul>
        </div>
      </div> -->

      <!-- <div class="flex flex-col gap-2" data-dropdown-docs="selfmanaged">
        <div class="flex w-full gap-2">
          <div class="flex-1">
            <h3>Links to services</h3>
            <ul class="list-none pl-0">
              <li>
                <a href="https://documentation.elasticpath.com" class="docs-link">
                  Link Name
                </a>
              </li>
              <li>
                <a href="https://documentation.elasticpath.com" class="docs-link">
                  Link Name
                </a>
              </li>
              <li>
                <a href="https://documentation.elasticpath.com" class="docs-link">
                  Link Name
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div> -->