valentinloiseau / vue-widget-mondial-relay

Widget mondial relay VUE

Vue Widget Mondial Relay

Mondial Relay Widget https://widget.mondialrelay.com/parcelshop-picker/v4_0/codesamples/Sample-LightImplementation.aspx to Vue

Installation

Using npm

npm i --save vue-widget-mondial-relay

Requirements

Vue 2

Vue 3 ? use the new component -> https://github.com/EduardoMateos/vue3-widget-mondial-relay

Props API

Props	Type	Required	Default	Details
brand	String	true		Provider by Mondial Relay
defaultPostCode	String	false	59000	Default postal Code used for search at loading
defaultCountry	String	false	FR	FR, ES, BE, NL, LU, DE, AT
maxResults	Int	false	7	Must be less than 20
deliveryMode	String	false	24R	Standard [24R], XL [24L], XXL [24X], Drive [DRI]
allowedCountries	Array	false	*	FR, ES, BE, NL, LU, DE, AT
translations	Object	false	texts in spanish	details in documentation

Translations

Prop: translations

Object example:

        :translations="{
          headerTitle: 'Select your mondial relay ®',
          findCpText: 'CP',
          findCityText: 'City',
          cityNoResults: 'no results',
          btnListMobile: 'List',
          btnMapMobile: 'Map'
        }"

Example

<template>
  <div id="app" style="max-width: 980px; margin: auto">
    <WidgetMondialRelay
        brand="BDTEST  "
        defaultPostCode="59000"
        defaultCountry="FR"
        maxResults="7"
        deliveryMode="24R"
        @select="setParcelSelected($event)"
        :translations="{
          headerTitle: 'Select your mondial relay ®',
          findCpText: 'CP',
          findCityText: 'City',
          cityNoResults: 'no results',
          btnListMobile: 'List',
          btnMapMobile: 'Map'
        }"
    />
  </div>
</template>

import WidgetMondialRelay from 'vue-widget-mondial-relay';
import 'vue-widget-mondial-relay/dist/widget-mondial-relay.min.css';

export default {
  name: 'App',
  components: {
    WidgetMondialRelay
  },
  methods:{
    setParcelSelected(data){
      console.log(data)
    }
  }
}