🍬 Fudge: Promotions gallery

Front-end promotions gallery web component that implements the Fudge promotions API for displaying offers in various layouts such as carousels and page cards.

• 🌟 Built using Vue 2
• 📦 Compiled using the Vue CLI web components
• 🚀 Display promotional offers in different areas.

🚀 Getting Started

Prerequisite

• Node JS 16
• Vue JS 2

Installation

# install dependencies
npm install

# run the server
npm run serve

📦 Building

To make the most out of caching abilities, we build the web component locally and push the dist folder to the repo, to build the project, run:

# build web component
npm run build:wc

🚀 Usage

To deploy the package, you'll need to ensure that you've installed Vue JS as an external dependency into your project, then, link to our web component and you'll be able to configure it in the page as an element.

<script src="https://unpkg.com/browse/vue@2.7.13/dist/vue.min.js"></script>
<script src="path/to/fudge-promotions-gallery.js"></script>

<!-- use in plain HTML, or in any other framework -->
<fudge-promotions-gallery></fudge-promotions-gallery>

Configuring variables

In the project where you're including the component, you should configure the prop variables, for example, in a Laravel project you might wish to do the following for the uuid prop:

env('FUDGE_PROMOTIONS_GALLERY_UUID', '2a9ea791-8c35-4094-9f78-083a5546242c')