我是opencart的新手。我已经用HTML&我的opencart主页的CSS。但我不知道如何将这些部分添加到我的主页。
这是我的代码:
<!-- Global JS [ jQuery, Bootstrap ] -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<!-- APP JS -->
<script type="text/javascript" src="assets/js/app.min.js"></script>
<!-- RSS Feed -->
<script type="text/javascript">
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://output98.rssinclude.com/output?type=asyncjs&id=1131873&hash=43acd66e554d9d915419deb38b1fd5fe';
document.getElementsByTagName('head')[0].appendChild(s);
})();
</script>
<!-- Global CSS [ Bootstrap, Font-Awesome, Animate CSS ] -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway|Roboto|Roboto+Slab|Titillium+Web|Ubuntu" rel="stylesheet">
<!-- APP CSS -->
<link rel="stylesheet" href="assets/css/app.min.css">
<!-- Section - intro -->
<section class="section section-intro pos-rel">
<div class="container text-center">
<h1 class="headline m-0">
Easyink saves its customers time and money by helping them get the right printer for the job, and a quick and easy ordering process guarantees the right cartridge for the printer... backed up by awesome customer support.
</h1>
<h3 class="call-us">
<i class="fa fa-phone faa-ring animated"></i> 0800 893 797
</h3>
</div>
</section>
<!-- End Section - intro -->
<!-- Section - Services -->
<section class="section section-services text-center">
<div class="container">
<!-- Section Headline -->
<h2 class="headline font-Roboto_Slab">What Can We Do For You?</h2>
<!-- End Section Headline -->
<div class="row">
<!-- Service One -->
<div class="col-sm-4">
<div class="thumbnail">
<div class="thumb-img bg-default">
<img src="assets/img/service-printer.png" alt="Service Printer Icon">
</div>
<div class="caption">
<h3><a href="#" class="caption-title">Find the Right Printer</a></h3>
</div>
</div>
</div>
<!-- End Service One -->
<!-- Service Two -->
<div class="col-sm-4">
<div class="thumbnail">
<div class="thumb-img bg-default">
<img src="assets/img/service-printer-cartridge.png" alt="Service Cartridge Icon">
</div>
<div class="caption">
<h3><a href="#" class="caption-title">Find the Right Cartridge</a></h3>
</div>
</div>
</div>
<!-- End Service Two -->
<!-- Service Three -->
<div class="col-sm-4">
<div class="thumbnail">
<div class="thumb-img bg-default">
<img src="assets/img/service-support.png" alt="Service Support Icon">
</div>
<div class="caption">
<h3><a href="#" class="caption-title">Printer and Cartridge Support</a></h3>
</div>
</div>
</div>
<!-- End Service Three -->
</div>
</div>
</section>
<!-- End Section - Services -->
<!-- Section - Home -->
<section class="section section-home">
<div class="container">
<div class="row">
<!-- Video Column -->
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/IuVEW6Fgkvs" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<!-- End Video Column -->
<!-- Home Headline Column -->
<div class="col-sm-6">
<div class="headline-col text-center">
<h2 class="headline m-t-0">
Confused About Which Printer Is Best For You? Complete Our Quick Wizard To Find Out
</h2>
<p class="headline-details font-Raleway">
Need a printer, but not sure where to start? The quickest and easiest way to find out which printer suits you best is to click the button below and complete our wizard. Answer a few simple questions and we’ll send you a customised report based on your answers.
</p>
<p>
<a href="#" class="btn btn-lg btn-success">Start Printer Wizard</a>
</p>
</div>
</div>
<!-- End Home Headline Column -->
</div>
</div>
</section>
<!-- End Section - Home -->
<!-- Section - Testimonials -->
<section class="section section-testimonials">
<div class="container">
<!-- Section Headline -->
<h2 class="headline font-Roboto_Slab text-center">What People Are Saying About Easyink</h2>
<!-- End Section Headline -->
<!-- Testimonial Media -->
<div class="row">
<div class="col-sm-6">
<!-- Quote 1 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Awesome Service</h3>
<p class="quote">
This company is awesome. They fixed my problem without me even asking. Great customer service and follow up. Definitely recommend this company. I have been buying from them for years. Great prices and great product. And now found out that their service is good too. Thank you easyink.
</p>
<h4 class="quote-title">Erwin van den Broek</h4>
</div>
</div>
<!-- Quote 2 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">WOW</h3>
<p class="quote">
First time I have used your service and WOW .....ordered on Monday delivered prior to 8.30 Tues morning to a rural town....that is great service! Your reasonable prices and the speed and ease of the whole transaction, means I will definitely be a return customer who will be recommending to others. Thanks heaps
</p>
<h4 class="quote-title">Rhondda McFarlane</h4>
</div>
</div>
<!-- Quote 3 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Outstanding Service</h3>
<p class="quote">
Outstanding service. Ink arrived in less than 24 hours - and I live in the middle of the Mackenzie Country. I also appreciated the confirmation email containing a link to allow me to check progress through courier tracking automatically. Other online purchases have given me a tracking number, which I then have to follow up myself. As if all this were not enough: I struck a small problem and rang the 0800 number for help. The phone was answered before it had rung twice, and the help was efficient and friendly. This has to be the most satisfactory online purchase I've ever made.
</p>
<h4 class="quote-title">Colin McKinney</h4>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Quote 4 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Great product and great price!</h3>
<p class="quote">
What can I say, once again outstanding delivery time, great product and great price! I ordered a toner cartridge after lunch and it arrived about 8.30 the next morning! Thank you - you constantly outperform other businesses in quality of service and product
</p>
<h4 class="quote-title">Petra</h4>
</div>
</div>
<!-- Quote 5 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">I Like Buying From Easyink</h3>
<p class="quote">
Thank you for your usual excellent service I like buying from Easyink because if I make a mistake with my order they ring to check with me about it and sort it out usually with in minutes of me putting it though. I've recommended them to many others .So hope they use there service too. Thanks Guys Keep up the good work.
</p>
<h4 class="quote-title">Lyn Palmer</h4>
</div>
</div>
<!-- Quote 3 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Most Impressed</h3>
<p class="quote">
I've used easyink for a few years now. When I had an leak issue with a cartridge (a type they no longer handle) they replaced it immediately, no questions asked. I was most impressed. Good service.
</p>
<h4 class="quote-title">Lawrence Goldsmith</h4>
</div>
</div>
</div>
</div>
<!-- End Testimonial Media -->
</div>
</section>
<!-- End Section - Testimonials -->
<!-- Sections - Blog Posts -->
<section class="section section-blog_posts">
<div class="container">
<!-- Masonry Grid -->
<div class="grid">
<!-- Blog Post 1 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 1 -->
<!-- Blog Post 2 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 2 -->
<!-- Blog Post 3 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<div class="caption-img">
<img src="assets/img/section-intro-bg.jpg" alt="">
</div>
<h3 class="caption-title">Your spacific blog title if come with long text. May be it would be two or three lines long.</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 3 -->
<!-- Blog Post 4 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 4 -->
<!-- Blog Post 5 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci, recusandae omnis in vel sed hic alias amet, voluptatibus excepturi earum quidem mollitia! Eaque id hic, est voluptatum eius. Laborum?
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci, recusandae omnis in vel sed hic alias amet, voluptatibus excepturi earum quidem mollitia! Eaque id hic, est voluptatum eius. Laborum?
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 5 -->
<!-- Blog Post 6 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ipsa, saepe dignissimos eius consequatur in magni quas, dolor odio eligendi accusamus, veritatis veniam nostrum modi nobis expedita autem tenetur eveniet.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 6 -->
</div>
<!-- End Masonry Grid -->
</div>
</section>
<!-- End Section - Blog Posts -->
<!-- RSS FEED DEMO -->
<section class="section section-rss-demo">
<div class="container">
<h3>RSS FEED DEMO - This section will be removed after your review report.</h3>
<h4>This is the DEMO design for RSS FEED which has renderd by https://www.rssinclude.com VIA Javascript </h4>
<p>If you want to change the color or size I can do for you. But it will not give you exact design Like above section. But Somehow if you are able to give your rss feed data as JSON encoded format in PHP or Javascript It will be easy to Implement For the above Section design. Please let me know your complement.</p>
<div id="rssincl-box-container-1131873"></div>
</div>
</section>
<!-- End RSS FEED DEMO -->
<!-- UnnamedGroup - Scroller -->
<a href="#" id="btn_back_to_top"><i class="fa fa-2x fa-angle-double-up"></i></a>
<!-- End UnnamedGroup -Scroller -->
任何人都可以帮我解决这个问题吗?
答案 0 :(得分:1)
您可以使用&#34; HTML内容&#34; Opencart 2.x安装包附带的模块,插入代码插入它并将其添加到Home布局。 或者,如果要编辑主题,则必须编辑这些文件:
catalog/view/theme/Your_theme/template/common/header.tpl
//use this file for your links and scripts, you can also use footer.tpl instead of this file for scripts
catalog/view/theme/Your_theme/template/common/home.tpl
//use this file for your html