Jump to content

nilukab

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

Contact Methods

Profile Information

  • Interests
    www.nilukab.com
  • First Name
    Alexey
  • Last Name
    Bakulin

nilukab's Achievements

Newbie

Newbie (1/14)

1

Reputation

  1. nilukab
    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
×
×
  • Create New...