@yellowbear/app-order-return v1.0.2

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

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
2. In fr.json, add French translations
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 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 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

{%- if settings.enable_order_return_app -%}
  <div>{% render 'account-order-return-links', order: order %}</div>
{%- 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 <app-order-return> 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
• Modify app version in app-order-return.tsx
• Record changes in the changelog