OhMyEtch

https://docs.ohmyetch.com
Admin
OhMyEtch brings atomic, headless-style components to WordPress, providing accessible UI components,...
Tokens:293,956
Snippets:2,663
Trust Score:4.2
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Quick Start: Coupon Form and Applied List

Source: https://docs.ohmyetch.com/woo/component-families/coupons

Quick start example showing the coupon form and applied coupon list with a remove button slot.

```svelte
<OmeWooCouponForm />  

  

<OmeWooCouponAppliedList>  

{#slot default}  

  <OmeWooCouponRemoveButton />  

{/slot}  

</OmeWooCouponAppliedList>  

```

--------------------------------

### Serialized Multi-Value Meta authoring setup

Source: https://docs.ohmyetch.com/docs/facets/argument-modes.md

Configuration example for the Serialized Multi-Value Meta mode. Authored option values must match the stored string values, not visible labels.

```text
argument_mode = serialized_meta
serialized_meta_argument.meta_key = mk_meta_types
option values = omv, ff, veg
```

--------------------------------

### Facet Target Configuration Example

Source: https://docs.ohmyetch.com/docs/facets/component-families/facet-target.md

Text-based example illustrating how to configure a Facet Target and a Search Facet with a shared target ID.

```text
Target ID: article-results
Facet Target:
- target = article-results
- loop slot = WP Query loop
- fallback slot = "No posts found."

Search Facet:
- target = article-results
- default query argument = search
```

--------------------------------

### Install Devkit Dependencies

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/install-and-prepare.md

Installs the devkit's dependencies using Bun. Run this after extracting the ZIP.

```sh
bun install
```

--------------------------------

### Session start sequence: etch_recall_project_memory, etch_get_status, etch_get_document_tree

Source: https://docs.ohmyetch.com/oh-my-idetch/mcp/daily-workflow

Run these three commands at the start of every session to inherit previous sessions' learning. The comment indicates to record a brief and digest first, then check availability and unsaved changes, then get the current document.

```shell

etch_recall_project_memory     → digest + record brief first, always  

etch_get_status                → availability, unsaved changes  

etch_get_document_tree         → current document  

```

--------------------------------

### Unzip package structure and install runtime with bun install

Source: https://docs.ohmyetch.com/oh-my-idetch/mcp/install

Shows the unzipped package layout and the command to install the locked runtime from the package root. Requires Bun 1.3.14 or newer; the ZIP contains no connector code, which is installed locally under its own license terms.

```text
etch-agent/  

├── README.md  

├── AGENTS.md  

├── CHANGELOG.md  

├── onboarding.md  

├── LICENSE  

└── mcp/  

    ├── server.js            ← the MCP server your harness launches  

    ├── package.json         ← locked runtime manifest  

    ├── bun.lock  

    └── skills/              ← core and user agent skills  


```

```bash
bun install --cwd mcp --frozen-lockfile --no-save  


```

--------------------------------

### SearchSelect Facet Example

Source: https://docs.ohmyetch.com/docs/facets/component-families/search-select-facet.md

Example configuration for a SearchSelect facet targeting posts with a placeholder and an option with value and label.

```text
SearchSelect Facet:
- target = posts
- argument_mode = default
- facet_key = name
- placeholder = Search by slug

Option:
- value = beta-bar
- label = Beta Bar Post
```

--------------------------------

### Purchase draft stepper usage example

Source: https://docs.ohmyetch.com/llms-woo.txt

Example demonstrating how to configure the component with counter-stepper presentation suitable for integration within a ProductProvider for variable products, showcasing typical attribute values for behavior, quantity constraints, and accessibility labels.

```JSX
```jsx
<OmeWooAddToBasketButton
  behavior='{{"mode":"counter","prosentasjon":"stepper","trigger":"form_submit"}}'
  quantity='{{"default":"1","minimum":"1",maximum":"","step":"1"}}'
  content='{{"decrement_content":"−","increments_content":"+"}}'
  accessibility='{{"input_watermark_label":"Quantity","decrement_watermark_label":"Decrease quantity","increments_watermark_label":"Increase quantity"}}'
/>
```
```

--------------------------------

### Account provider with the core endpoints

Source: https://docs.ohmyetch.com/llms-woo.txt

Example showing how to compose the account provider with slots for authentication, dashboard, and orders endpoints.

```APIDOC
## OmeWooAccountProvider

### Description
Account area shell that owns one slot per account endpoint and switches between them. Slots not composed render nothing for that endpoint.

### Usage
```jsx
<OmeWooAccountProvider>
  {#slot auth}
    <OmeWooAccountNotices />
    <OmeWooAccountLoginForm />
  {/slot}
  {#slot dashboard}
    <OmeWooAccountGreeting />
    <OmeWooAccountNotices />
    <OmeWooAccountNavigation />
  {/slot}
  {#slot orders}
    <OmeWooAccountNavigation />
    <OmeWooAccountOrders />
  {/slot}
</OmeWooAccountProvider>
```

### Slots
- **auth** - Slot for the authentication endpoint (sign in and registration).
- **dashboard** - Slot for the dashboard endpoint.
- **orders** - Slot for the orders endpoint.

### Notes
Slots you do not compose render nothing for that endpoint. Start with the endpoints you need and add the rest later.
```

--------------------------------

### Billing and shipping address forms

Source: https://docs.ohmyetch.com/llms-woo.txt

Example usage of the OmeWooBillingAddressForm and OmeWooShippingAddressForm components inside the OmeWooCheckoutForm.

```APIDOC
## OmeWooBillingAddressForm / OmeWooShippingAddressForm

### Description
Renders Etch-authored billing and shipping address fields that follow Woo's field schema. The shipping form includes a different-shipping toggle.

### Usage
```jsx
<OmeWooCheckoutForm>
  {#slot default}
    <OmeWooBillingAddressForm />
    <OmeWooShippingAddressForm />
  {/slot}
</OmeWooCheckoutForm>
```

### Shared Field Props
- `content.legend` - Fieldset legend text.
- `content.show_legend` - Renders or hides the legend.
- `{field}.use_woo_defaults` - Uses Woo label, hint text, and validation copy.
- `{field}.label` - Custom label when Woo defaults are disabled.
- Field hint copy - Custom input hint copy when Woo defaults are disabled.
- `{field}.error_message` - Custom local validation copy when Woo defaults are disabled.
- `accessibility.aria_label` - Fieldset accessible label.
- `preview.state` - Builder preview state.

### Shipping Toggle Props (ShippingAddressForm only)
- `shipping_toggle.label` - Visible toggle label.
- `shipping_toggle.use_aria_label` - Uses a separate ARIA label when true.
- `shipping_toggle.aria_label` - Accessible toggle label when enabled.
- `shipping_toggle.preview_checked` - Builder preview checked state.

### Notes
- Billing includes email and phone fields; shipping does not.
- Runtime hides shipping fields until the toggle is checked.
```

--------------------------------

### /new-project

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/localwp-devkit/first-project.md

Sends the /new-project command to the agent to start the onboarding workflow.

```text
/new-project
```

--------------------------------

### List Local sites and bind project

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/troubleshooting

Use localwp:list to see available sites, then bind the project to the exact site name.

```bash
bun run localwp:list  

bun run localwp:bind -- --project <slug> --site "<Local site name>"  
```

--------------------------------

### Serialized Multi-Value Meta Option Setup

Source: https://docs.ohmyetch.com/llms-facets.txt

Example option setup for the serialized multi-value meta filter: a label for human-readable text and a value matching the stored option key.

```text
Option label: Vegetarian
Option value: veg
```

--------------------------------

### Meta Filter: Example Data and Authoring Setup

Source: https://docs.ohmyetch.com/facets/recipes

Shows example post meta data and the corresponding authoring setup for a meta filter. Use meta mode when the filtered value lives in post meta. The meta query E2E suite verifies exact matches, numeric ranges, char values, bool values, LIKE, NOT LIKE, IN, NOT IN, BETWEEN, and NOT BETWEEN.

```text
Meta key: facet_price  

Values: 10, 25, 50, 75, 100  
```

```text
argument_mode = meta  

meta_key = facet_price  

meta_compare = BETWEEN  

meta_type = numeric  

option value = 25,75  
```

--------------------------------

### Run localwp:doctor

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/daily-workflow

Checks site readiness.

```bash
bun run localwp:doctor -- --project <slug>  
```

--------------------------------

### Shipping method selector JSX example

Source: https://docs.ohmyetch.com/docs/woo/component-families/shipping-selector.md

Quick start example for the OmeWooShippingMethodSelector component. Use this on the cart page or checkout page to let the customer choose a shipping rate. The ui.mode is set to 'button-radio' with an aria label, and content.show_price is true with a price separator.

```jsx
<OmeWooShippingMethodSelector
  ui='{{"mode":"button-radio","aria_label":"Choose a shipping method"}}'
  content='{{"show_price":true,"price_separator":" - "}}'
/>
```

--------------------------------

### Create project with project:create

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/first-project

Creates a new project with the given slug. This is part of the manual setup flow.

```bash
bun run project:create -- my-site  
```

--------------------------------

### Account provider with every endpoint

Source: https://docs.ohmyetch.com/woo/flows/my-account-page

Example of the OmeWooAccountProvider component with slots for auth, dashboard, and orders. Use this as a starting point for composing the account page.

```svelte
<OmeWooAccountProvider>  

{#slot auth}  

  <OmeWooAccountNotices />  

  <OmeWooAccountLoginForm />  

  <OmeWooAccountRegisterForm />  

  <OmeWooAccountLostPasswordForm />  

  <OmeWooAccountResetPasswordForm />  

{/slot}  

{#slot dashboard}  

  <OmeWooAccountGreeting />  

  <OmeWooLogoutLink />  

  <OmeWooAccountNotices />  

  <OmeWooAccountNavigation />  

{/slot}  

{#slot orders}  

  <OmeWooAccountNavigation />  

  <OmeWooAccountOrders />  

{/slot}  

</OmeWooAccountProvider>  


```

--------------------------------

### Run localwp:capabilities

Source: https://docs.ohmyetch.com/oh-my-idetch/localwp-devkit/daily-workflow

Inspects runtime capabilities.

```bash
bun run localwp:capabilities -- --project <slug>  
```

--------------------------------

### Select Facet configuration example

Source: https://docs.ohmyetch.com/facets/component-families/select-facet

Example configuration for the Select Facet: target products, default argument mode, facet_key category_name, single selection mode, and an option with value shoes and label Shoes.

```text
Select Facet:  

- target = products  

- argument_mode = default  

- facet_key = category_name  

- selection_mode = single  

  

Option:  

- value = shoes  

- label = Shoes  

```

--------------------------------

### Quick Start: OmeWooPaymentMethodSelector in OmeWooCheckoutForm

Source: https://docs.ohmyetch.com/woo/component-families/payment-selector

Use this selector inside a checkout form to let the customer choose from supported Woo payment methods. The example sets ui.mode to 'select' with an aria label and shows payment method descriptions.

```html
<OmeWooCheckoutForm>  

{#slot default}  

  <OmeWooPaymentMethodSelector  

    ui='{{"mode":"select","aria_label":"Choose a payment method"}}'  

    content='{{"show_description":true}}'  

  />  

{/slot}  

</OmeWooCheckoutForm>  
```

--------------------------------

### Install locked runtime with bun install

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/mcp/install.md

Installs the locked runtime from the package root. Requires Bun 1.3.14 or newer. Installs the connector, ws, and zod locally inside mcp/node_modules/.

```sh
bun install --cwd mcp --frozen-lockfile --no-save
```

--------------------------------

### Start every session with recall commands

Source: https://docs.ohmyetch.com/docs/oh-my-idetch/mcp/daily-workflow.md

Run these three commands at the start of every session to inherit previous session context. The first command recalls the project memory digest and brief, the second checks availability and unsaved changes, and the third retrieves the current document tree.

```text
etch_recall_project_memory     → digest + record brief first, always
etch_get_status                → availability, unsaved changes
etch_get_document_tree         → current document
```
Tokens:
Raw