Create Custom PHP-page for a Landing page for Adwords

nilukab · May 26, 2015

Hello everyone,

First of all I should say I´m very far from being an expert in Prestashop, just trying to use simple solutions created by others. Also, sorry for my English.

So, here is what I am trying to do:

I have a store (www.nilukab.com) and would like to add some new landing pages to improve conversions from Google Ads. The idea is to make one landing page for one product or a promotion and tell the customers about the advantages of this product. Each page has a Call to Action button (BUY NOW) which redirects to a particular product page in the main store.

I want these landing pages to be located under the same domain as the store and have a different design, by which I mean not use any elements from the main store, such as header, footer, etc. (so creating more CMS pages is not the option I am looking for).

And here is what I´ve done:

I have downloaded a free template for a landing page. It contains various archives:

index.html

+style.css

+normalize.min.css

+functions.js

+html5shiv.js

+jquery-1.9.1.min.js

+template.json

+various images in png

I have copied all the css and js files to my store to the: themes/mytheme/css and themes/mytheme/js.

And copied all the images to the img folder in the root.

(with template.json file I´m not sure what to do)

After some research I came to the conclusion that in order to implement this new Landing Page I should create a new PHP-file in my Prestashop store without using CMS. Basically, I followed the instructions from: this link.

So, I´ve created the PHP file in the root of the store:

cuento-personalizado-cumpleanos-nino.php with the following code:

<?php


  include(dirname(__FILE__).'/config/config.inc.php');
  Tools::displayFileAsDeprecated();




  $smarty->display(_PS_THEME_DIR_.'cuento-personalizado-cumpleanos-nino.tpl');

Then, I have added a controller: /controllers/front/cuentopersonalizadocumpleninocontroller.php. Here it is:

<?php


  /*  The classname here will be the name of the controller  */
  class CuentoPersonalizadoCumpleNinoController extends FrontController{


    public function init(){
      parent::init();
    }
     
    public function initContent(){
      parent::initContent();
      $this->setTemplate(_PS_THEME_DIR_.'cuento-personalizado-cumpleanos-nino.tpl');
    }


  /*  The following code portion is optional.
  /*  Remove the double-slashes to activate the portion
  /*  if you want to use external stylesheet and JavaScript for the page.
  /*  Create the CSS and JS files in the css and js directories of the theme accordingly
   */
   
    public function setMedia(){
      parent::setMedia();
      $this->addCSS(_THEME_CSS_DIR_.'styles.css');
 $this->addCSS(_THEME_CSS_DIR_.'normalize-min.css');
      $this->addJS(_THEME_JS_DIR_.'html5shiv.js');
 $this->addJS(_THEME_JS_DIR_.'jquery-1.9.1.min.js');
 $this->addJS(_THEME_JS_DIR_.'functions.js');
    }
    
}

As you can see, I inserted all css and js there, not sure if it was the right thing to do, just followed the instructions (maybe not the right way).

And finally I created the TPL file: themes/mytheme/cuento-personalizado-cumpleanos-nino.tpl. I just copied all the code from index.html from the Landing Page template between div in the TPL-file:

<div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/normalize.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/functions.js"></script>
</head>
<body>
<header class="site-header-wrap" data-lead-id="header">
<div class="site-header">
<img src="img/logo.png" alt="" class="site-header__logo" data-lead-id="site-header-logo" />
</div>
</header>
<section class="conversion-banner-wrap" data-lead-id="conversion-banner-wrap">
<div class="conversion-banner media">
<img src="img/book.png" alt="" class="conversion-banner__hero-img media__img media--vc" data-lead-id="conversion-banner-hero-img" />
<div class="media__body">
<h1 class="conversion-banner__title" data-lead-id="conversion-banner-title">DESIGN BEST PRACTICES</h1>
<p class="conversion-banner__by-line" data-lead-id="conversion-banner-by-line">By Kimberly Johnson</p>
<div class="conversion-banner__body" data-lead-id="conversion-banner-body">
<p>Looking to create a website from scratch? Looking to update an existing website? <em>Web Design Best Practices</em> is just for you.</p>
<p>This ultimate guide contains all of the obvious and not-so-obvious best practices of web design. Think of this guide as your key to creating a website with any skillset.</p>
<p>This book has been compiled for many years and is finally available at the special price of only!</p>
</div>
<a href="#/optin" class="cta-btn conversion-banner__cta-btn" data-lead-id="conversion-banner-cta-btn">CLICK HERE TO BUY NOW</a>
<div class="credit-cards-wrap conversion-banner__credit-cards-wrap">
<ul class="credit-cards cf" data-lead-id="conversion-banner-credit-cards">
<li data-lead-id="credit-card-visa"><img src="img/visa.png" alt="VISA credit card" class="credit-card" /></li>
<li data-lead-id="credit-card-mastercard"><img src="img/mastercard.png" alt="MasterCard credit card" class="credit-card" /></li>
<li data-lead-id="credit-card-amex"><img src="img/amex.png" alt="American Express credit card" class="credit-card" /></li>
<li data-lead-id="credit-card-discover"><img src="img/discover.png" alt="Discover credit card" class="credit-card" /></li>
</ul>
</div>
</div>
</div>
</section>
<section class="features-wrap" data-lead-id="features-wrap">
<div class="features">
<h2 class="features__title" data-lead-id="features-title">THIS BOOK HAS TO OFFER</h2>
<p class="features__sub-title" data-lead-id="features-sub-title"><em>Web Design Best Practices</em> contains everything you could want to know about creating a website from scratch, from design to implementation.</p>
<ul class="feature-list" data-lead-id="feature-list">
<li class="feature media" data-lead-id="feature-1">
<img src="img/icon-palette-dark.png" alt="" class="feature-icon media__img" data-lead-id="feature-icon-1" />
<div class="media__body">
<h3 class="feature__title" data-lead-id="feature-title-1">EFFECTIVE DESIGN</h3>
<p class="feature__body" data-lead-id="feature-body-1">A website’s design is important. Learn how to create the most effective design for YOUR website.</p>
</div>
</li>
<li class="feature media" data-lead-id="feature-2">
<img src="img/icon-monitor-dark.png" alt="" class="feature-icon media__img" data-lead-id="feature-icon-2" />
<div class="media__body">
<h3 class="feature__title" data-lead-id="feature-title-2">EFFICIENT CODING</h3>
<p class="feature__body" data-lead-id="feature-body-2">A website is tailored to suit YOU. Build your website the way that best works for your understanding and skillset.</p>
</div>
</li>
<li class="feature media" data-lead-id="feature-3">
<img src="img/icon-smartphone-dark.png" alt="" class="feature-icon media__img" data-lead-id="feature-icon-3" />
<div class="media__body">
<h3 class="feature__title" data-lead-id="feature-title-3">MOBILE-FRIENDLINESS</h3>
<p class="feature__body" data-lead-id="feature-body-3">Designing and coding for mobile is essential in our world today. Learn how to tackle making your website mobile-friendly.</p>
</div>
</li>
<li class="feature media" data-lead-id="feature-4">
<img src="img/icon-gear-dark.png" alt="" class="feature-icon media__img" data-lead-id="feature-icon-4" />
<div class="media__body">
<h3 class="feature__title" data-lead-id="feature-title-4">STELLAR HOSTING</h3>
<p class="feature__body" data-lead-id="feature-body-4">Choosing the right host for your website is essential. Read up on suggestions for choosing an affordable, yet reliable host.</p>
</div>
</li>
<li class="feature media" data-lead-id="feature-5">
<img src="img/icon-pencil-paper-dark.png" alt="" class="feature-icon media__img" data-lead-id="feature-icon-5" />
<div class="media__body">
<h3 class="feature__title" data-lead-id="feature-title-5">DIGITAL STRATEGY</h3>
<p class="feature__body" data-lead-id="feature-body-5">What is a website without users? Study up on digital strategies and learn how to measure success with analytics.</p>
</div>
</li>
<li class="feature media" data-lead-id="feature-6">
<img src="img/icon-wrenches-dark.png" alt="" class="feature-icon media__img" data-lead-id="feature-icon-6" />
<div class="media__body">
<h3 class="feature__title" data-lead-id="feature-title-6">QUALITY MAINTENANCE</h3>
<p class="feature__body" data-lead-id="feature-body-6">What will you do when things go wrong? How will you keep your website current? Find out by reading about website upkeep.</p>
</div>
</li>
</ul>
</div>
</section>


<section class="testimonials-wrap" data-lead-id="testimonials-wrap">
<div class="testimonials">
<p class="testimonials__quote" data-lead-id="testimonials-quote">“This book helped me create not only a beautiful and functional website but also one that actively engages users on a regular basis.”</p>
<p class="testimonials__attribution" data-lead-id="testimonials-attribution"><strong>Joe Weber</strong> - Digital Solutions</p>
</div>
</section>


<section class="in-depth-wrap" data-lead-id="in-depth-wrap">
<div class="in-depth">
<div class="in-depth__content-block media" data-lead-id="in-depth-content-block-1">
<img class="content-block__img media__img--rev media--vc" data-lead-id="content-block-1-img" src="img/gears-dark.png" alt="" />
<div class="media__body media--vc">
<h2 class="content-block__title" data-lead-id="content-block-1-title">A Book For All Skill Levels</h2>
<p class="content-block__body" data-lead-id="content-block-1-body">Web Design Best Practices consists of information for people of all skill levels whether you’ve been coding for years or if you’ve never written a single line of HTML. This book will benefit you and dramatically transform your website into a modern, effective, engaging website for all users.</p>
</div>
</div>
<div class="in-depth__content-block media" data-lead-id="in-depth-content-block-2">
<img class="content-block__img media__img media--vc" data-lead-id="content-block-2-img" src="img/graph-dark.png" alt="" />
<div class="media__body media--vc">
<h2 class="content-block__title" data-lead-id="content-block-2-title">A Book Based On Facts</h2>
<p class="content-block__body" data-lead-id="content-block-2-body">This book was written based off of cold, hard facts. These are not opinions or ideas made up on a whim. The information in this book was provided by absolute experts who have studied the ins and outs of web design, development, digital strategy, analytics, and more.</p>
</div>
</div>
</div>
</section>


<section class="author-bio-wrap" data-lead-id="author-bio-wrap">
<div class="author-bio media">
<div class="author-bio__video-embed-wrap media__img--rev media--vc" data-lead-id="author-bio-video-embed-wrap">
<div class="author-bio__video-embed" data-lead-id="author-bio-video-embed">
<img src="img/video-placeholder.png" alt="" />
</div>
</div>
<div class="media__body">
<div class="media">
<img src="img/author-photo.png" alt="" class="author-bio__photo media__img media--vc" data-lead-id="author-bio-photo" />
<div class="media__body media--vc">
<h2 class="author-bio__title" data-lead-id="author-bio-title">A Word From The Author</h2>
<p class="author-bio__body" data-lead-id="author-bio-body">“I love the web. I love thinking of <strong>digital strategies</strong> and measuring my website’s <strong>performance</strong>. I want to share my love and passion with the world. That’s what this book is about. This book will teach website best practices to <strong>any skillset</strong>.”</p>
<a href="#/optin" class="cta-btn author-bio__cta-btn" data-lead-id="author-bio-cta-btn">CLICK HERE TO BUY NOW</a>
</div>
</div>
</div>
</div>
</section>


<section class="newsletter-cta-wrap" data-lead-id="newsletter-cta-wrap">
<div class="newsletter-cta">
<a href="#/optin" class="cta-btn newsletter-cta__cta-btn" data-lead-id="newsletter-cta-cta-btn">SIGN UP FOR THE <em>BEST PRACTICES</em> NEWSLETTER</a>
<p class="newsletter-cta__body" data-lead-id="newsletter-cta-body">Sign up for the <em>Best Practices</em> newsletter to stay up-to-date on the latest web technologies and trends.</p>
</div>
</section>


<section class="footer-cta-wrap" data-lead-id="footer-cta-wrap">
<div class="footer-cta">
<h2 class="footer-cta__title" data-lead-id="footer-cta-title">WHY WAIT? BUY NOW!</h2>
<p class="footer-cta__body" data-lead-id="footer-cta-body">Why put off taking your website to the next level? You can buy Web Design Best Practices right now for only . The book comes with a 100% guarantee of your satisfaction.</p>
<img src="img/book.png" alt="" class="footer-cta__hero-img" data-lead-id="footer-cta-hero-img" />
<div class="footer-cta__prices" data-lead-id="footer-cta-prices">
<p class="prices__original" data-lead-id="prices-original">$72.00</p>
<p class="prices__buy-now" data-lead-id="prices-buy-now">$49.00</p>
<p class="prices__disclaimer" data-lead-id="prices-disclaimer">if you buy now.</p>
</div>
<a href="#/optin" class="cta-btn footer-cta__cta-btn" data-lead-id="footer-cta-btn">CLICK HERE TO BUY NOW</a>
<div class="credit-cards-wrap">
<ul class="credit-cards footer-cta__credit-cards cf" data-lead-id="footer-cta-credit-cards">
<li data-lead-id="footer-credit-card-visa"><img src="img/visa.png" alt="VISA credit card" class="credit-card" /></li>
<li data-lead-id="footer-credit-card-mastercard"><img src="img/mastercard.png" alt="MasterCard credit card" class="credit-card" /></li>
<li data-lead-id="footer-credit-card-amex"><img src="img/amex.png" alt="American Express credit card" class="credit-card" /></li>
<li data-lead-id="footer-credit-card-discover"><img src="img/discover.png" alt="Discover credit card" class="credit-card" /></li>
</ul>
</div>
</div>
</section>


<footer class="site-footer-wrap" data-lead-id="footer-wrap">
<div class="site-footer">
<p class="site-footer__fineprint" data-lead-id="fineprint">Copyright @2015. <a href="#">Legal Information</a></p>
</div>
</footer>
</body>
</html>
</div>

OK. So the result, the page does show where it is supposed to:

http://nilukab.com/cuento-personalizado-cumpleanos-nino.php

Now, the questions:

1) How can I edit the content? When I try to change things in the TPL-file (like editing texts) or try to edit styles.css linked to the TPL-file nothing happens.

2) What should I do to create more pages like that for other products? Follow the same pattern or is there maybe a more elegant way to do what I am trying to do?

Please, help

Sign In

Create Custom PHP-page for a Landing page for Adwords

Recommended Posts

nilukab

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com