@gfsdeliver/gfs-droppoint NPM

The gfs-droppoint widget is used to show the available droppoints on the map.

Usage

Install

$ npm i --save '@gfsdeliver/gfs-droppoint

Import In a HTML file:

<html>
    <head>
        <script type="module">
            import '@gfsdeliver/gfs-droppoint/gfs-droppoint.js';
        </script>
    </head>
    <body>
        <gfs-droppoint
            container-class="dp-card"
            show-opening-hours="true"
            button-type="standard"
            droppoint-data='{"id":"COLLECTPLUS-57338","title":"Amco Newsagents","address":["69 Webbs Road","SW11 6SD","GB"],"geo":{"lat":51.4554461436296,"long":-0.161675620057261,"distance":241},"detail":"/api/droppoints/COLLECTPLUS-57338","provider":"COLLECT PLUS","countryCode":"GB","isDroppoint":true,"isStore":false,"marker":"","droppointDescription":"amco newsagents","chosen":true,"weekCollection":[{"dayOfWeek":"sunday","slots":[{"from":"07:00","to":"13:00","fromTime":"07:00","toTime":"13:00"}]},{"dayOfWeek":"monday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"tuesday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"wednesday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"thursday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"friday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"saturday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]}]}'>
        </gfs-droppoint>
    </body>
</html>

In a Polymer 3 element

import { PolymerElement, html } from '@polymer/polymer';
import '@gfsdeliver/gfs-droppoint/gfs-droppoint.js';

class CustomElement extends PolymerElement {
    static get template() {
        return html`
            <gfs-droppoint
                container-class="dp-card"
                show-opening-hours="true"
                button-type="standard"
                droppoint-data='{"id":"COLLECTPLUS-57338","title":"Amco Newsagents","address":["69 Webbs Road","SW11 6SD","GB"],"geo":{"lat":51.4554461436296,"long":-0.161675620057261,"distance":241},"detail":"/api/droppoints/COLLECTPLUS-57338","provider":"COLLECT PLUS","countryCode":"GB","isDroppoint":true,"isStore":false,"marker":"","droppointDescription":"amco newsagents","chosen":true,"weekCollection":[{"dayOfWeek":"sunday","slots":[{"from":"07:00","to":"13:00","fromTime":"07:00","toTime":"13:00"}]},{"dayOfWeek":"monday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"tuesday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"wednesday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"thursday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"friday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]},{"dayOfWeek":"saturday","slots":[{"from":"06:00","to":"19:00","fromTime":"06:00","toTime":"19:00"}]}]}'>
            </gfs-droppoint>
        `;
    }
}
customElements.define('custom-element', CustomElement);

More info, demo and all the available properties can be found at GFS widget portal

License

Apache License 2.0

GFS droppoint web-components web-component

@polymer/polymer @polymer/iron-ajax @polymer/paper-spinner @gfsdeliver/gfs-button @gfsdeliver/gfs-toast

@everything-registry/sub-chunk-359 @infinitebrahmanuniverse/nolb-_gf @gfsdeliver/gfs-checkout-widget

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago