# @yellowbear/app-order-return
> TheOz App Return Order
Latest version **1.0.2** (published 2022-04-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install @yellowbear/app-order-return
pnpm add @yellowbear/app-order-return
yarn add @yellowbear/app-order-return
bun add @yellowbear/app-order-return
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-04-21 |
| First published | 2022-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 472.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yellowbear |
## Links
- npm: https://www.npmjs.com/package/@yellowbear/app-order-return
- npm.io page: https://npm.io/package/@yellowbear/app-order-return
## Dependencies (1)
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.13.0
## Recent versions
- 1.0.2 (latest) — 2022-04-21
- 1.0.1 — 2022-04-21
- 1.0.0 — 2022-04-21
- 0.0.23 — 2022-04-21
- 0.0.22 — 2022-04-21
- 0.0.21 — 2022-04-20
- 0.0.20 — 2022-04-20
- 0.0.19 — 2022-04-20
- 0.0.18 — 2022-04-20
- 0.0.17 — 2022-04-20
- 0.0.16 — 2022-04-20
- 0.0.15 — 2022-04-07
- 0.0.14 — 2022-04-07
- 0.0.13 — 2022-04-07
- 0.0.12 — 2022-04-07
- … 11 more at https://npm.io/package/@yellowbear/app-order-return/versions
## README
# TheOz - Order return app
Custom order return app by TheOz.
Once installed on the client's site, the module will be accessible:
- from a dedicated return page
- from the `/account` section
# Prerequisites
- The return app must have been **initialised** by the **back-end team** of TheOz (this can be verified by checking an `order-returns` develop app exists)
# Installation
## 0. Create a Storefront API token
The storefront token will be necessary to display product images.
1. In Shopify's BO, go to *Apps > Develop apps > Create an app*.
- App name: `order-returns-ui`
- App developer: [your store owner]
2. Click on "**Create app**"
3. Once created, click on "**Configure Storefront API scopes**"
4. In **Products**, select `unauthenticated_read_product_listings`
5. Take note of your Storefront API token, we'll need it later
## 1. Update `settings_schema.json`
1. In `settings_schema.json`, add [the following settings](doc/shopify/settings/settings_schema.json)
2. Add your **storefront token** in the app, by navigating to the settings you've just created:
*Online Store > Themes > [select your development theme] > Customize > Theme settings > App - Order return > Storefront token*
## 2. Add translation files
Add relevant translations for your theme:
1. In `en.json`, add [English translations](doc/shopify/locales/en.json)
2. In `fr.json`, add [French translations](doc/shopify/locales/fr.json)
3. Translate those for any other language your store uses
## 3. Create Return page
The return page is the entry point to the order return app.
1. In the **live theme**, create a new **liquid template** for **pages** called `order-returns`
2. Follow the same step in your *development theme*, and copy-paste [the template's content](doc/shopify/templates/page.order-returns.liquid) in it
3. In Shopify's BO, create a page that uses that template and publish it
4. You can now navigate to that page, and verify that the order return module is loading. It should look like something like this:
## 3. Include return links in account/orders
Next, we'll take care of displaying appropriate links in the `account/order` section.
- If an order can be returned, **"Demander un retour"** will be displayed.
- If an order has already been partially or fully returned, **"Mes retours"** will be displayed.
Steps:
1. Add [account-order-return-links.liquid](doc/shopify/snippets/account-order-return-links.liquid) to your `snippets` folder
2. Locate the liquid file where orders are displayed (by default Shopify displays them in `account.liquid`, but custom themes could display them in `account-orders.liquid` or similar)
3. Copy-paste this code where you want the "Demander un retour" and "Mes retours" to be displayed
```html
{%- if settings.enable_order_return_app -%}
{% render 'account-order-return-links', order: order %}
{%- endif -%}
```
The end result should look like something like this, once we have elligible orders:
## 4. Test the installation with a test order
1. Create an order in Shopify's BO
2. Link the order to a customer
*Note*: the customer needs to have a **postal address**
3. Mark the order as **paid**
4. Fulfill the order
5. Your order should now have 2 tags:
- `CLIENT_RETURN_PERIOD|XX`
- `CLIENT_RETURN_DEADLINE|XXXX-XX-XX`
6. You can now test your installation by going to the return page you created. Use the email address of the customer you've linked the order to, and the order reference of your test order.
# [ dev ] Notes
- To run the app locally:
1. In `index.html`, inside the `` component, replace :
- `store-name` value with your store name (without `myshopify.com`, ex: `order-returns`)
- `storefront-token` value with your storefront token
2. Run `npm run start` in your terminal
# [ dev ] To-do list when updating the app
- Modify script version in [page.order-returns.liquid](doc/shopify/templates/page.order-returns.liquid)
- Modify app version in [app-order-return.tsx](src/components/app-order-return/app-order-return.tsx)
- Record changes in the [changelog](changelog.md)
---
_Source: https://npm.io/package/@yellowbear/app-order-return · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._