AdaptRetail / banner-template

Starting point for creating product based banner ads.

Banner template

A great starting point for building product based display banners.

Table of content

• Whats included
• Install
• Usage
  • Local development
  • Prepare files for production
  • Files
• Dependencies
• Extracted style
• Publish to Adapt Retail
• License

Whats included

This template is using multiple best practices principles for Adapt Retail banners. You do not have to follow them, so change whatever you want.

Anyways, we are including ability to swipe between product swiper on touch devices and desktops, and we stop the carousel on user interaction. The banner is lazy loading product images when the product shows. We have included examples of how to handle product bombs, example of how to handle a splitted price tag, and thanks to Laravel mix, we automaticly adds legacy support.

Install

# Clone repository
git clone https://github.com/AdaptRetail/banner-template

# Go to directory
cd banner-template

# Install dependencies
npm install 

Usage

All dependencies must be installed before you can start using the template.

This template is using npm, Sass and Webpack to build your files and containing some extra helpers to make things easier for you.

Local development

# Open file in default browser (browser-sync) and
# auto refresh browser on file save
npm run watch

You can also display your production on other devices on your local network. Check your terminal for information after running npm run watch.

Prepare files for production

# Compile files to dist/ folder
npm run prod

The npm run prod command is compiling and minifying the css and javascript. All your files will be compiled to the dist/ folder.

Files

All your production files will be found in the src/ folder.

We have provided the files with some content, but this is your files and we don't tell you what you do. This is our approach when we are creating production, and you may add, move and remove files however you want.

All files are thoroughly commented, so if you're in doubt, just read the source.

src/Script/main.js

This is the main file for your JavaScript. What to do from this point is totally up to you.

This file will be compiled down with Webpack using laravel-mix. This gives you some cool opertunities like.

• Up to ECMAScript 6 (ES6) JavaScript syntax
• Import packages through NPM modules
• And more

src/Style/main.scss

This is the main Sass file. This file is including all the other sass files. Do whatever you want from here.

We have set up some logic to get you started. Browse through the files and see what each file does. If you want to overwrite some variables you can do it in src/Style/Utilities/Variables.scss.

Most of the files are containing variables you can over write in this file. Just add the variable here, and it will be overwritten. Try $google-font-name: "Lobster";

src/views/

This folder is optional and is only there for our workflow in the src/Scripts/main.js; where we are including .html files instead of using strings.

Dependencies

This project is using different dependencies to make it easier to make display banners.

Banner style

Micro frontend framework containing helpers like grid system using flex.

sass-asset-inline

Inline assets like image and fonts in your sass files with simple syntax.

@font-face {
    src: inline-font( 'path/to/your/font.ttf' ); // Include full font

    // Subset font by adding regex as second parameter
    // of each character you want to include
    src: inline-font( 'path/to/your/font.ttf', '[0-9]' );
}

body {
    // Inline image
    background-image: inline-image( 'path/to/your/image.png' );

    // Inline and resize image to width (Kepp aspect ratio)
    background-image: inline-image( 'path/to/your/image.png', "200" );

    // Resize image and ignoring aspect ratio
    background-image: inline-image( 'path/to/your/image.png', "200x400" );

    // Resize image to height and keep aspect ratio
    background-image: inline-image( 'path/to/your/image.png', "_x400" );

    // Underscore works also for height.
    // ("200x_" equals "200" as shown above)
}

All files are included from your root folder.

Adapt Data

Communicate with Adapt Retail productions through our API.

laravel-mix

We are extending laravel-mix with Laravel mix extender to include helpers like the sass-asset-inline

Extracted style

Some of the style of this template has been extracted to another git repository. This is to reuse the elements and components in other productions.

This is a recommendation if you are creating multiple templates for Adapt Retail.

Remove the priceco style from the project by removing @import "../../node_modules/@priceco/style/src/main.scss"; line in src/Style/main.scss.

Publishing to Adapt Retail

1. Log in to your Adapt retail account
2. Click on template section in your left navigation bar
3. Create a new Banner template
4. Set your properties in Details tab
5. Select Files tab
6. Prepare files to Adapt Retail by running npm run prod in your terminal.
7. Drag dist/ad.js and dist/ad.css to the dropzone (Drop files or click to upload) in Adapt
8. And you are done!

License

This template heavely dependent on GSAP animation framework, and they are subject to their own license. Read their license to make sure you are on the safe side on how you use this template.

The code provided in this template is available for usage by all clients of Adapt Retail.