-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #32 from commercelayer/docs-minicart-page
Move the minicart to a dedicated page
- Loading branch information
Showing
15 changed files
with
863 additions
and
802 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `drop-in.css` into your website.' | ||
export const ADDON_ID = 'addon-drop-in-css' as const | ||
export const FILENAME = 'drop-in.css' as const | ||
export const ADDON_NAME = `Enable \`${FILENAME}\`` as const | ||
// export const ADDON_TITLE = `Enable \`${FILENAME}\`` as const | ||
export const ADDON_TITLE = DESCRIPTION | ||
export const TOOL_ID = `${ADDON_ID}/tool` as const | ||
export const PARAM_KEY = ADDON_ID | ||
export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `drop-in.css` into your website.' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `minicart.css` into your website.' | ||
export const ADDON_ID = 'addon-minicart-css' as const | ||
export const FILENAME = 'minicart.css' as const | ||
export const ADDON_NAME = `Enable \`${FILENAME}\`` as const | ||
// export const ADDON_TITLE = `Enable \`${FILENAME}\`` as const | ||
export const ADDON_TITLE = DESCRIPTION | ||
export const TOOL_ID = `${ADDON_ID}/tool` as const | ||
export const PARAM_KEY = ADDON_ID | ||
export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `minicart.css` into your website.' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/blocks' | ||
import * as Stories from './cl-cart--minicart.stories.ts'; | ||
import { codes } from '../assets/constants.ts' | ||
|
||
<Meta of={Stories} /> | ||
|
||
# Minicart | ||
|
||
The [**cl-cart**](?path=/docs/components-cart-cl-cart--docs) component acts as a minicart when rendered inside a [**cl-cart-link**](?path=/docs/components-cart-cl-cart-link--docs) one. With this feature, you can offer your customers a familiar UI experience where the cart slides in on click (or as soon as you add an item) and overlays the page, giving them an overview of the cart summary and the possibility to checkout, as shown in the code snippet below. | ||
|
||
Please note that the minicart is unstyled and hidden by default. You have to write some CSS from scratch in order to make it work as you need. Otherwise, you can import the [**minicart.css**](?path=/docs/getting-started--docs#minicartcss) file into your website, using it as is or as a reference to tweak at your leisure. | ||
|
||
<Canvas of={Stories.Basic} /> | ||
|
||
<ArgsTable story="Basic" /> | ||
|
||
Want to see the `open-on-add` feature in action? Set the related attribute to `true` and click on <cl-add-to-cart class="mx-1 px-2 py-1" code={codes.available}>add to cart</cl-add-to-cart> once again. 😉 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import { type Props } from '@commercelayer/drop-in.js/dist/types/components/cl-cart/cl-cart' | ||
import { type Meta, type StoryFn } from '@storybook/html' | ||
import { html, nothing } from 'lit-html' | ||
import { create } from '../../utils' | ||
|
||
type Args = Props | ||
|
||
const meta: Meta<Args> = { | ||
title: 'Components/Cart/cl-cart (minicart)', | ||
argTypes: { | ||
'open-on-add': { | ||
description: | ||
'Toggle this switch to make the minicart automatically open as soon as an item is added to the shopping cart (available <i>only</i> when the `cl-cart` component is used inside the `cl-cart-link` one).', | ||
type: { name: 'boolean', required: false }, | ||
table: { | ||
category: 'attributes', | ||
defaultValue: { | ||
summary: 'false' | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
||
export default meta | ||
|
||
export const Basic: StoryFn<Args> = (args) => { | ||
return create( | ||
html` | ||
<cl-cart-link> | ||
<svg | ||
width="32" | ||
height="32" | ||
viewBox="0 0 32 32" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" | ||
stroke="black" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
></path> | ||
<path | ||
d="M4 10H28" | ||
stroke="black" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
></path> | ||
<path | ||
d="M21 14C21 15.3261 20.4732 16.5979 19.5355 17.5355C18.5979 18.4732 17.3261 19 16 19C14.6739 19 13.4021 18.4732 12.4645 17.5355C11.5268 16.5979 11 15.3261 11 14" | ||
stroke="black" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
></path> | ||
</svg> | ||
<cl-cart-count></cl-cart-count> | ||
<cl-cart open-on-add=${args['open-on-add'] ?? nothing}></cl-cart> | ||
</cl-cart-link> | ||
` | ||
) | ||
} | ||
Basic.args = {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.