-
Notifications
You must be signed in to change notification settings - Fork 1
Create Page
Fraser Harris edited this page Nov 7, 2015
·
3 revisions
Create directory structure like this:
apps/light/src/clients/<store_name>/landingpage/default/
Create index.html
Looks like this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
@@include('shared/campaign_head.html')
@@include('shared/campaign_opengraph_tags.html')
<link rel="shortcut icon"
href="http://www.anthropologie.com/anthro/favicon.ico" />
<link rel="stylesheet"
href="/static/light/anthropologie/landingpage/default/styles/main.css"/>
@@include('shared/campaign_respond.html')
<!-- Add Optimizer Tests here -->
<script type="text/javascript">
window.TRACKING_PIXELS = {
'A': {
'view': 'http://9nl.us/rk4p',
'click': 'http://9nl.us/3rrt'
}
};
window.ACTIVE_TEST = 'A';
</script>
{% if environment == 'production' %}
<script type='text/javascript'>
var interval = setInterval(function() {
var test, bindFn;
if (!window.ACTIVE_TEST) {
return;
}
// Because we need to bind some events before anything else, use this fn
// http://stackoverflow.com/a/2641047
$.fn.bindFirst = function(name, fn) {
// bind as you normally would
// don't want to miss out on any jQuery magic
this.on(name, fn);
// Thanks to a comment by @Martin, adding support for
// namespaced events too.
this.each(function() {
var handlers = $._data(this, 'events')[name.split('.')[0]];
// take out the handler we just inserted from the end
var handler = handlers.pop();
// move it at the beginning
handlers.splice(0, 0, handler);
});
};
bindFn = function() {
(new Image).src = window.TRACKING_PIXELS[test].click;
};
clearInterval(interval);
test = window.ACTIVE_TEST;
// Append click pixel
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
$('.tile').bindFirst('click', bindFn);
} else {
// Why doesn't bindFirst work on desktop?
$('body').on('click', '.tile', bindFn);
}
// Append page view pixel
(new Image).src = window.TRACKING_PIXELS[test].view;
}, 1000);
</script>
{% endif %}
<title>{{ page.name|default:"Anthropologie" }}</title>
</head>
<body class="{% if tile %}stl{% endif %}">
<div class='navbar'>
<div class="container">
<a href="http://www.anthropologie.com/" target="_blank">
<img class="logo" src="/static/light/anthropologie/landingpage/default/images/logo.png" />
</a>
</div>
</div>
@@include('shared/campaign_body.html')
<div>
<!-- Custom templates here -->
</div>
<div class="container">
<!-- .container is bootstrap magic, and has a viewport-dependent width. -->
<div id="hero-area"></div>
<div id="hero-sub-banner">
{% if legal_copy %}
<div class="legal us">
{{ legal_copy }}
</div>
{% endif %}
</div>
<div id="category-area"></div>
<div id="discovery-area" class="discovery-area"></div>
<div class="tile-sizer tile"></div>
<div class="no-noscript loading"></div>
<noscript>
<!-- promotions to show when user does not have javascript.
this is a 'we need javascript' message by default.
-->
<div class="alert alert-danger">
<b>Oh no!</b> We need JavaScript enabled to show you this page.
</div>
</noscript>
</div>
<img src="{% url 'apps.tracking.views.pixel' %}"/>
<div>
@@include('shared/default_templates.html')
</div>
<script type="text/javascript" src="/static/light/anthropologie/landingpage/default/scripts/main.js" async></script>
</body>
</html>
Update favicon.ico
Update style sheet reference
Update click meter tracking pixels
Update Page name
Update navbar
Update javascript reference
Create scripts/main.js
Looks like this:
var $ = require('jquery');
var _ = require('underscore');
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
var bootstrap = require('bootstrap.dropdown'); // for menu-bar drop down on mobile
require('landingpage');
Create styles/main.scss
Looks like this:
@import "lib/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss";
@import "src/components/landingpage/styles/base.scss";
On database create theme:
Name: <store_name>
template: <store_name>/landingpage/default/index.html
Create store:
staff: sf
name: <store_name>
slug: <store_name>
Default theme: the above theme
(optional)
Create feed:
Defaults work here
Create Page:
store: store you just created
name: <page_name>
theme: theme you just created
feed: feed you just created
Theming templates:
- Strategy:
- add templates to index.html
- style theme in main.scss
- create/edit
theme settings
- Order:
- header
- feed
- mobile header
- mobile feeds
- pop-ups
- mobile pop-ups