wc-mirrarme v0.0.24

\

Custom mirr-AR-me Html Element

TODOS

- caption class: set background color to transparent if on pc - redir link

• do not set redir if no-default-redir is set
• default pre-set to https://mirrarme.com -x from the DB, not hardcoded (how, we do not use DB) -* do not show default preview if no-default-preview is set
• BUG (fixed, it was old library loaded) - shopify version not showing the QR code after pix2em update on PC views
• in autoGen mode, only use autogenerted values if no values passed in parameters, otherwise use parameter values
  • dlink should not be set from passed in parameters if dlink is numeric, only if it is a url
• remove px in styles, use em's
• PC view
  • no redir on clicking 3D, only redir on clicking button or QR
  • show hand icon on buttor & QR

• Feature request (Zac) - zoom icon to show 3D preview in full size screen
  • add 'virtual try on' button to full size screen ( ?? )
  • add additional info/text/promo links to full size screen ( ?? )
  • by default zoom on touch in iPhone if no dlink / redir set ( ?? )
  • by default zoom on touch in Android & PC ( ?? )

Benefits:

• reusable htmml5 element
• no need to rebuild/submit shopify app if we change UI/behaviour, its external to shopify!
• can be plugged into different hosting solutions (shopify/wix/wordperess/etc)
• HTML custom element syntax, works in all browser

Attributes:

• Required: ( perhaps autodetect/use global variables? )

  • shopId: id of shop on our DB ( could we use merchant auth? - see below)
  • assetId: asset Id on our DB. can be the same as for example shopify productId.

• Optional:

  • redir: url to redirect on click/touch if in PC/Laptop/Tablet, or if no deep lik specified. default: https://mirrarme.com
  • hostEnv: shopify/wix/wordpress, etc - needed for CSS, workarounds/quirks, etc (can autodetect?), default: none
  • autoGen: yes/no - auto generate asset deep link & 3D preview URI's default: no
  • noDefaultAssets boolean - if set, do not show default 3D assets if no asset sources provided - default: false (not set)

• Auto-generated: (from shopId/assetId, can be overriden. If autoGen=no then they should be provided as parameters )

  • dlink: unity deep link
  • src: 3D source URI for Android (.glb)
  • iosSrc: 3D source URI for iOS (.usdz)
  • poster: preview image URI (.png)

• Internal properties:

  • isMobile: autodetected mobile or PC/Laptop/Tablet platform
  • os: operating system iOs/Android/Windows/Linux,etc
  • isTablet: auto-calculated - !isMobile && (os==='ios' || os==='Android' )

• Default local assets, backup assets to display if loading from internet fails

  • stored on firebase storage gs://mrme-shopify-dev.appspot.com/wc-mirrarme
  • TODO: create assets (talk to zac)
  • TODO: setup production storage
  • TODO: dev/live config for these settings
    • default.glb
    • default.usdz
    • default.png

Behaviour:

• iPhone
  • on touch - redirect to deep link (dlink, if set), otherwise redirect to url specified in redir link (if set)
• Mobile - Android / PC Platform / iPad
  • on click - redirect to url specified in redir link (if set) - TODO: later, display popup with pre-defined info AND linik to 'more info' (if redir link is set)
• All Platforms
  • display "Virtual Try On" button
  • if 3D preview assets are set
    • show model-viewer
    • while loading, display poster image (if image asset file is available )
    • display 3D preview if asset files are available for OS platform we are in (Android/iOS)
    • if load of asset fail (eg, network/not available) then display default local assets
  • PC Platform, iPad
    • display QR code to deep link (dlink, if set), otherwise display QR code to url specified in redir link (if set)

Issues to resolve

• move qr creation to new component
  • remmove need for external qr library loaded from html (load in the component)
  • see webcomponent already created (not working, some issue with qrjs lib its using)
• library files hosting/distriution: local / CDN (unpkg!)
  • minification/obsfuscation
  • can be done with webcomponents, see: https://stackoverflow.com/questions/62298299/how-do-i-host-my-web-component-as-a-library-served-over-cdn https://github.com/glade-software/glade-element
• merchant auth: token/domain/ip ?

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

TEST DATA

shopId: mm-mirrarme-test.myshopify.com assetId: 7474577506539 poster: https://firebasestorage.googleapis.com/v0/b/mrme-shopify-dev.appspot.com/o/shops%2Fmm-mirrarme-test.myshopify.com%2F7474577506539.png?alt=media&token=1e6cb582-5311-45e2-867b-3f4605eaa531

src: https://firebasestorage.googleapis.com/v0/b/mrme-shopify-dev.appspot.com/o/shops%2Fmm-mirrarme-test.myshopify.com%2F7474577506539.glb?alt=media&token=56f5825e-1401-4366-b51e-b401aa8a4a83

src-ios: https://firebasestorage.googleapis.com/v0/b/mrme-shopify-dev.appspot.com/o/shops%2Fmm-mirrarme-test.myshopify.com%2F7474577506539.usdz?alt=media&token=1dcf4127-d792-498a-878a-03945f46a963

CURRENT IMPLEMENTATION NOTE: no default redirect url for PC inputs: productId shopName loaded from DB: mrmeAssetId mrmeDeepLink mrmePreviewSrc mrmePreviewIosSrc mrmePreviewPoster

This webcomponent follows the open-wc recommendation.

Installation

npm i wc-mirrarme

Usage

<script type="module">
  import 'wc-mirrarme/wc-mirrarme.js';
</script>

<wc-mirrarme></wc-mirrarme>

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html