Skip to content

Create Page

Jump to bottom Edit New 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:
  • Order:
    • header
    • feed
    • mobile header
    • mobile feeds
    • pop-ups
    • mobile pop-ups
Add a custom footer
Add a custom sidebar
Clone this wiki locally