js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

created e-commerce index

Browse Source
This commit is contained in:
Kelsey Jackson
2025-02-19 10:09:42 -06:00
parent b466ba9d0f
commit 057b76a10a
10 changed files with 184 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/docs/patterns/ecommerce-category-preview.md
View File

@@ -47,6 +47,7 @@ icon: preview
<div></div>
<div></div>
</div>
<div style="--aspect-ratio: 1/.25"></div>
</div>
</div>
```

4
docs/docs/patterns/ecommerce-incentives.md
View File

@@ -2,12 +2,12 @@
title: Incentives
description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
parent: ecommerce
tags: e-commerce
unlisted: true
---
## Promotion Dialog
```html {.example viewport}
```html {.example}
<wa-dialog label="New Here?" with-header class="coupon" style="--width: 50rem;" open>
<div class="coupon-split">
<img style="height: 100%" src="/assets/images/patterns/coupon.jpg" />

33
docs/docs/patterns/ecommerce-order-history.md
View File

@@ -29,7 +29,7 @@ tags: e-commerce
</span>
</div>
<div class="wa-stack">
<div class="wa-flank">
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" style="max-width: 215px">
<div>
<span class="wa-split">
@@ -37,14 +37,15 @@ tags: e-commerce
<span><strong>$215.00</strong></span>
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
<span>
<a href="#">View Product</a> | <a href="#">Buy Again</a>
<div class="wa-split">
<span>
<wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
</span>
<br/>
<span>Delivered</span>
<wa-badge appearance="filled" variant="success">Delivered</wa-badge>
</div>
</div>
</div>
<div class="wa-flank">
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" style="max-width: 215px">
<div>
<span class="wa-split">
@@ -52,14 +53,15 @@ tags: e-commerce
<span><strong>$115.00</strong></span>
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
<span>
<a href="#">View Product</a> | <a href="#">Buy Again</a>
<div class="wa-split">
<span>
<wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
</span>
<br/>
<span>Out for delivery</span>
<wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
</div>
</div>
</div>
<div class="wa-flank">
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" style="max-width: 215px">
<div>
<span class="wa-split">
@@ -67,11 +69,12 @@ tags: e-commerce
<span><strong>$260.00</strong></span>
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
<span>
<a href="#">View Product</a> | <a href="#">Buy Again</a>
<div class="wa-split">
<span>
<wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
</span>
<br/>
<span>Preparing to ship</span>
<wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
</div>
</div>
</div>
</div>

102
docs/docs/patterns/ecommerce-product-features.md
View File

@@ -1,102 +0,0 @@
---
title: Product Features
description: 'Create focus landing pages for your store with detailed descriptions'
parent: ecommerce
tags: e-commerce
---
### With Carousel
```html {.example}
<div class="wa-stack wa-gap-3xl">
<wa-carousel pagination navigation loop style="--aspect-ratio: 3 / 2;">
<wa-carousel-item>
<img
alt="Knit sweater in sand color sleeve detail, showing the seamless design"
src="/assets/examples/carousel/pullover-1.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color sleeve detail, showing loose fit around the arms"
src="/assets/examples/carousel/pullover-2.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color shoulder detail, showing relaxed fit on broader shoulders"
src="/assets/examples/carousel/pullover-3.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color full view, showing waffle knit pattern, relaxed fit, and crew neckline"
src="/assets/examples/carousel/pullover-4.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color sleeve detail, showing rolled sleeves and ribbed cuffs"
src="/assets/examples/carousel/pullover-5.jpg"
/>
</wa-carousel-item>
</wa-carousel>
<div class="wa-grid wa-gap-3xl" style="--min-column-size: 30ch;">
<div class="wa-stack">
<h3>Pullover Sweater</h3>
<span class="wa-heading-l">$140</span>
<wa-rating label="Rating" precision="0.5" value="4.5" readonly></wa-rating>
<p>Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.</p>
<wa-radio-group label="Color" name="color" value="sand" orientation="horizontal">
<wa-radio-button value="sand">
<wa-icon slot="prefix" name="circle" style="color: burlywood;"></wa-icon>
Sand
</wa-radio-button>
<wa-radio-button value="slate">
<wa-icon slot="prefix" name="circle" style="color: dimgray;"></wa-icon>
Slate
</wa-radio-button>
<wa-radio-button value="shale">
<wa-icon slot="prefix" name="circle" style="color: silver;"></wa-icon>
Shale
</wa-radio-button>
</wa-radio-group>
<wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
<wa-radio-button value="xs">XS</wa-radio-button>
<wa-radio-button value="s">S</wa-radio-button>
<wa-radio-button value="m">M</wa-radio-button>
<wa-radio-button value="l">L</wa-radio-button>
<wa-radio-button value="xl">XL</wa-radio-button>
</wa-radio-group>
<wa-button variant="brand">Add to cart</wa-button>
</div>
<div class="wa-stack">
<wa-details summary="Size and Fit" open>
<ul class="wa-caption-m">
<li>True to size with a relaxed fit</li>
<li>Fits all shoulder shapes, broad to narrow</li>
<li>No pinching in the arms or irritating seams</li>
<li>Ribbed cuffs and hem</li>
</ul>
</wa-details>
<wa-details summary="Materials and Care">
<ul class="wa-caption-m">
<li>Durable Merino and Yak wool blend</li>
<li>Machine wash cold on delicate cycle</li>
<li>Lay flat to dry</li>
<li>Made with <wa-icon name="heart" label="love"></wa-icon> in Bentonville, USA</li>
</ul>
</wa-details>
<wa-details summary="Shipping">
<ul class="wa-caption-m">
<li>Flat $9 shipping free for orders under $200.</li>
<li>Free shipping on orders over $200, anywhere in the world.</li>
</ul>
</wa-details>
</div>
</div>
</div>
```

232
docs/docs/patterns/ecommerce-product-overview.md
View File

@@ -1,6 +1,6 @@
---
title: Product Overviews
description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
title: Product Overview
description: 'Create focus landing pages for your store with detailed descriptions'
parent: ecommerce
tags: e-commerce
---
@@ -118,151 +118,97 @@ tags: e-commerce
</wa-button>
</div>
```
## With Image Carousel & Expandable Details
### With Carousel
```html {.example}
<div style="max-width: 960px;margin: 0 auto;">
<wa-carousel class="carousel-thumbnails" navigation loop>
<wa-carousel-item>
<img
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
src="/assets/examples/carousel/pullover-1.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
src="/assets/examples/carousel/pullover-2.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
src="/assets/examples/carousel/pullover-3.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
src="/assets/examples/carousel/pullover-4.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
src="/assets/examples/carousel/pullover-5.jpg"
/>
</wa-carousel-item>
</wa-carousel>
<div class="thumbnails wa-split" style="margin-bottom: 1rem; justify-content: center">
<div class="thumbnails__scroller">
<img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
<img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
<img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
<img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
<img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
<div class="wa-stack wa-gap-3xl">
<wa-carousel pagination navigation loop style="--aspect-ratio: 3 / 2;">
<wa-carousel-item>
<img
alt="Knit sweater in sand color sleeve detail, showing the seamless design"
src="/assets/examples/carousel/pullover-1.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color sleeve detail, showing loose fit around the arms"
src="/assets/examples/carousel/pullover-2.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color shoulder detail, showing relaxed fit on broader shoulders"
src="/assets/examples/carousel/pullover-3.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color full view, showing waffle knit pattern, relaxed fit, and crew neckline"
src="/assets/examples/carousel/pullover-4.jpg"
/>
</wa-carousel-item>
<wa-carousel-item>
<img
alt="Knit sweater in sand color sleeve detail, showing rolled sleeves and ribbed cuffs"
src="/assets/examples/carousel/pullover-5.jpg"
/>
</wa-carousel-item>
</wa-carousel>
<div class="wa-grid wa-gap-3xl" style="--min-column-size: 30ch;">
<div class="wa-stack">
<h3>Pullover Sweater</h3>
<span class="wa-heading-l">$140</span>
<wa-rating label="Rating" precision="0.5" value="4.5" readonly></wa-rating>
<p>Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.</p>
<wa-radio-group label="Color" name="color" value="sand" orientation="horizontal">
<wa-radio-button value="sand">
<wa-icon slot="prefix" name="circle" style="color: burlywood;"></wa-icon>
Sand
</wa-radio-button>
<wa-radio-button value="slate">
<wa-icon slot="prefix" name="circle" style="color: dimgray;"></wa-icon>
Slate
</wa-radio-button>
<wa-radio-button value="shale">
<wa-icon slot="prefix" name="circle" style="color: silver;"></wa-icon>
Shale
</wa-radio-button>
</wa-radio-group>
<wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
<wa-radio-button value="xs">XS</wa-radio-button>
<wa-radio-button value="s">S</wa-radio-button>
<wa-radio-button value="m">M</wa-radio-button>
<wa-radio-button value="l">L</wa-radio-button>
<wa-radio-button value="xl">XL</wa-radio-button>
</wa-radio-group>
<wa-button variant="brand">Add to cart</wa-button>
</div>
<div class="wa-stack">
<wa-details summary="Size and Fit" open>
<ul class="wa-caption-m">
<li>True to size with a relaxed fit</li>
<li>Fits all shoulder shapes, broad to narrow</li>
<li>No pinching in the arms or irritating seams</li>
<li>Ribbed cuffs and hem</li>
</ul>
</wa-details>
<wa-details summary="Materials and Care">
<ul class="wa-caption-m">
<li>Durable Merino and Yak wool blend</li>
<li>Machine wash cold on delicate cycle</li>
<li>Lay flat to dry</li>
<li>Made with <wa-icon name="heart" label="love"></wa-icon> in Bentonville, USA</li>
</ul>
</wa-details>
<wa-details summary="Shipping">
<ul class="wa-caption-m">
<li>Flat $9 shipping free for orders under $200.</li>
<li>Free shipping on orders over $200, anywhere in the world.</li>
</ul>
</wa-details>
</div>
</div>
</div>
<div>
<h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
<span style="display: block;font-size: 32px;">$40</span>
<wa-rating style="margin-bottom: 1rem;" label="Rating" precision="0.5" value="2.5"></wa-rating>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem. In efficitur nisl nec tincidunt mollis. Nulla eu velit porta, tincidunt erat a, scelerisque neque. Quisque tincidunt, erat sit amet cursus posuere, nisi mi aliquam ligula, non pulvinar augue eros eget ligula. Nullam sed molestie magna. Suspendisse porta blandit massa in suscipit. Nulla ultricies purus convallis, tincidunt orci ut, auctor sem. Suspendisse ornare orci lectus. Fusce eu orci et sem sollicitudin pharetra et eu purus. Quisque interdum, ante nec euismod consequat, ante leo maximus dui, ut commodo massa urna et nisi. Proin placerat augue in consequat fringilla.</p>
<wa-radio-group orientation="horizontal" label="Select Color" name="color" value="beige" style="margin-bottom: var(--wa-size);">
<wa-radio-button value="beige">Beige</wa-radio-button>
<wa-radio-button value="gray">Gray</wa-radio-button>
<wa-radio-button value="brown">Brown</wa-radio-button>
</wa-radio-group>
<div>
</div>
<div class="details-group-example">
<wa-details summary="Locally Sourced" open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>
<wa-details summary="Hand Inspected">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>
</div>
</div>
<wa-button variant="brand" size="large" style="margin-top: var(--wa-size);">
<wa-icon slot="suffix" name="cart-plus" variant="solid"></wa-icon>
Add to Cart
</wa-button>
</div>
<style>
.carousel-thumbnails {
--slide-aspect-ratio: 3 / 2;
}
.thumbnails__scroller {
display: flex;
gap: var(--wa-space-s);
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
scroll-padding: var(--wa-space-s);
}
.thumbnails__scroller::-webkit-scrollbar {
display: none;
}
.thumbnails__image {
width: 64px;
height: 64px;
object-fit: cover;
opacity: 0.3;
will-change: opacity;
transition: 250ms opacity;
cursor: pointer;
}
.thumbnails__image.active {
opacity: 1;
}
.details-group-example wa-details:not(:last-of-type) {
margin-bottom: var(--wa-space-2xs);
}
</style>
<script>
{
const carousel = document.querySelector('.carousel-thumbnails');
const scroller = document.querySelector('.thumbnails__scroller');
const thumbnails = document.querySelectorAll('.thumbnails__image');
scroller.addEventListener('click', e => {
const target = e.target;
if (target.matches('.thumbnails__image')) {
const index = [...thumbnails].indexOf(target);
carousel.goToSlide(index);
}
});
carousel.addEventListener('wa-slide-change', e => {
const slideIndex = e.detail.index;
[...thumbnails].forEach((thumb, i) => {
thumb.classList.toggle('active', i === slideIndex);
if (i === slideIndex) {
thumb.scrollIntoView({
block: 'nearest'
});
}
});
});
}
const container = document.querySelector('.details-group-example');
// Close all other details when one is shown
container.addEventListener('wa-show', event => {
if (event.target.localName === 'wa-details') {
[...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
}
});
</script>
```
<!-- ## Split with Image

43
docs/docs/patterns/ecommerce-review.md
View File

@@ -52,4 +52,47 @@ tags: e-commerce
--border-color: var(--wa-color-surface-border);
}
</style>
```
### Two Column
```html{.example}
<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<div class="wa-stack wa-align-items-center">
<wa-avatar label="User avatar"></wa-avatar>
<p>Mr. Morale</p>
<wa-rating label="Rating" precision="0.5" value="5"></wa-rating>
<div>
<wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
<wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
</div>
</div>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nascetur cubilia platea proin; elit consectetur porta? Inceptos nunc consectetur aptent ut ridiculus faucibus per eu egestas. Feugiat feugiat sem consequat magnis primis enim mattis. Scelerisque diam pretium felis primis auctor placerat tempus cras. Non morbi himenaeos vitae hendrerit fringilla. Mauris donec cursus netus pulvinar cras congue dictum quisque. Himenaeos eleifend per gravida dapibus primis ac. Egestas lectus penatibus ullamcorper, aliquam volutpat ullamcorper natoque arcu.</p>
</div>
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<div class="wa-stack wa-align-items-center">
<wa-avatar label="User avatar"></wa-avatar>
<p>Metal Face DOOM</p>
<wa-rating label="Rating" precision="0.5" value="5"></wa-rating>
<div>
<wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
<wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
</div>
</div>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nascetur cubilia platea proin; elit consectetur porta? Inceptos nunc consectetur aptent ut ridiculus faucibus per eu egestas. Feugiat feugiat sem consequat magnis primis enim mattis. Scelerisque diam pretium felis primis auctor placerat tempus cras. Non morbi himenaeos vitae hendrerit fringilla. Mauris donec cursus netus pulvinar cras congue dictum quisque. Himenaeos eleifend per gravida dapibus primis ac. Egestas lectus penatibus ullamcorper, aliquam volutpat ullamcorper natoque arcu.</p>
</div>
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<div class="wa-stack wa-align-items-center">
<wa-avatar label="User avatar"></wa-avatar>
<p>Tyler Baudelaire</p>
<wa-rating label="Rating" precision="0.5" value="5"></wa-rating>
<div>
<wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
<wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
</div>
</div>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nascetur cubilia platea proin; elit consectetur porta? Inceptos nunc consectetur aptent ut ridiculus faucibus per eu egestas. Feugiat feugiat sem consequat magnis primis enim mattis. Scelerisque diam pretium felis primis auctor placerat tempus cras. Non morbi himenaeos vitae hendrerit fringilla. Mauris donec cursus netus pulvinar cras congue dictum quisque. Himenaeos eleifend per gravida dapibus primis ac. Egestas lectus penatibus ullamcorper, aliquam volutpat ullamcorper natoque arcu.</p>
</div>
</div>
```

8
docs/docs/patterns/ecommerce-shopping-cart.md
View File

@@ -70,13 +70,13 @@ tags: e-commerce
## Two Columns
```html {.example}
<div>
<div style="max-width: 960px; margin: 0 auto;">
<h1>Shopping Cart</h1>
<div class="wa-grid">
<div class="wa-stack">
<section class="wa-grid" style="border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
<img class="cart-item-image" src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
<div class="wa-split">
<div class="wa-flank">
<div>
<div>
<h3 style="margin-bottom: 0">Classic Tee</h3>
@@ -89,7 +89,7 @@ tags: e-commerce
</section>
<section class="wa-grid" style="border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
<img class="cart-item-image" src="https://images.unsplash.com/photo-1564859227552-81fde4a1df0b?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" >
<div class="wa-split">
<div class="wa-flank">
<div>
<div>
<h3 style="margin-bottom: 0">RVCA Graphic</h3>
@@ -102,7 +102,7 @@ tags: e-commerce
</section>
<section class="wa-grid">
<img class="cart-item-image" src="https://images.unsplash.com/photo-1503341733017-1901578f9f1e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" >
<div class="wa-split">
<div class="wa-flank">
<div>
<div>
<h3 style="margin-bottom: 0">Made Wild Graphic</h3>

1
docs/docs/patterns/ecommerce-store-navigation.md
View File

@@ -3,6 +3,7 @@ title: Store Navigation
description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
parent: ecommerce
tags: e-commerce
unlisted: true
---
## Popup Menu

10
docs/docs/patterns/ecommerce.md
View File

@@ -1,10 +0,0 @@
---
title: E-commerce
description: 'something clever'
layout: page
---

26
docs/docs/patterns/ecommerce.njk Normal file
View File

@@ -0,0 +1,26 @@
---
title: E-commerce
description: 'something clever'
layout: page
---
{% set ecommercePages = collections['e-commerce'] %}
<section class="index-grid">
{%- for page in ecommercePages -%}
<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
<wa-card with-header>
<div slot="header">
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
</div>
<span class="page-name">{{ page.data.title }}</span>
{% if pageSubtitle -%}
<div class="wa-caption-s">{{ pageSubtitle }}</div>
{%- endif %}
</wa-card>
</a>
{%- endfor -%}
</section>