A great starting point for building print templates for Adapt Retail.
# Clone repository
git clone https://github.com/AdaptRetail/print-template
# Go to directory
cd print-template
# Install dependencies
npm install 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.
When getting product data from Adapt Make sure you reference to a Adapt Data Collection.
# Open file in default browser (browser-sync) and
# auto refresh browser on file save
npm run watchYou can also display your production on other devices on your local network. Check your terminal for information after running
npm run watch.
# Compile files to dist/ folder
npm run prodThe npm run prod command is compiling and minifying the css and javascript.
All your files will be compiled to the dist/ folder.
To prepare data from Adapt Retail for development you need to create a new Collection production.
The collection needs one product and a snippet with all attributes to include from Adapt.
Publish the collection and get the product, campaign and production ids from the url and add them to the getAdaptData function.
If you only want to use the preview data, remember to set
preview: true, in thegetAdaptDatafunction.
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 productions, 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.
This file
// Get the AdaptPrintData class from NODE
import AdaptPrintData from '@adapt-retail/print-data';
/**
* Create the Template class
* We will handle the logic if local or in production
*/
export default class Template extends AdaptPrintData {
/**
* The template that should be rendered to DOM
* We uses mustache syntax to render the variables to template
*
* @return String
*/
template() {
return `
<div class="product">
<img src="{{ image }}">
<h1>{{ name }}</h1>
</div>
`;
}
/**
* Setup what API data we use if we are on local development
*
* @return Object
*/
getAdaptData() {
return {
account: 'priceco58c12436f20b4',
project: 1,
campaign: 1,
production: 1,
}
}
/**
* Format the data we get from Adapt
*
* @return Object
*/
format( item ) {
return {
name: item.name,
image: this.asset( item.image ),
}
}
/**
* Script that runs after template is rendered to DOM
*
* this.template represents the element containing the template
*
* @return void
*/
script() {
console.log(this.data);
}
}
/**
* After the class has been created we must initialize it to execute our code
*/
new Template;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";
This project is using different dependencies to make it easier to make display banners.
Micro frontend framework containing helpers like grid system using flex.
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.
Communicate with Adapt Retail productions through our API.
We are extending laravel-mix with Laravel mix extender to include helpers like the sass-asset-inline
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 insrc/Style/main.scss.
Publishing to Adapt Retail
- Log in to your Adapt retail account
- Click on template section in your left navigation bar
- Create a new
Outlinetemplate - Set your properties in
Detailstab - Select
Filestab - Prepare files to Adapt Retail by running
npm run prodin your terminal. - Drag
dist/ad.jsanddist/ad.cssto thedropzone (Drop files or click to upload)in Adapt - And you are done!
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.