In default theme all are fine and showing the homepage slideshow,but implementing other theme not showing the homepage slideshow.Checked the admin panel,there are all exactly same as default theme.How to show the slider?
theme/module/Slideshow.tpl
<div class="slideshow">
<div id="slideshow<?php echo $module; ?>" class="nivoSlider">
<?php foreach ($banners as $banner) { ?>
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
<?php } ?>
<?php } ?>
</div>
</div>
<script type="text/javascript"><!--
$(document).ready(function() {
$('#slideshow<?php echo $module; ?>').nivoSlider();
});
--></script>
slideshow modules are not viewed any kind of images.when <?php echo $slideshow;?>.its showing array().
header.tpl
<?php $slideshow = $modules->getModules('slideshow'); ?>
<?php if(count($slideshow)) { ?>
<!-- Slider -->
<div id="slider" class="<?php if($theme_options->get( 'slideshow_layout' ) == 2) { echo 'fixed'; } else { echo 'full-width'; } ?>">
<div class="background-slider"></div>
<div class="background">
<div class="shadow"></div>
<div class="pattern">
<?php foreach($slideshow as $module) { ?>
<?php echo $module; ?>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
Thanks for share code with me, You are missed to define content_top area in your theme, you have to go here
catalog/view/theme/yourtheme/template/common/home.tpl
go to line no 18 & add this line just below the line 18
<?php echo $content_top; ?>
and your slider will come on your home page.
Related
I'm doing some changes on an online store that is running OpenCart 2.2.
When browsing below the categories on the left side, there are 2 carousels that show different promotions. I want to modify it that before the second carousel there is a description text. To do that I should edit the template file. And here is where I get lost..
This is the code in the template file:
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
From I see in the browser inspector and in my case, this code generates 2 banners with the ids - "banner0" and "banner1". The description text should go at the top of the code (right before ). If I use a simple paragraph, it gets displayed twice - above each banner.. How should I change it so that it will display the paragraph only above the second banner (id - banner1)?
I was thinking about an if-else statement, but I'm not sure if that will work... Could anyone help out a bit? My knowledge in PHP isn't much... :S
Thanks in advance!
Best regards,
Tsvetko Krastev
Then you need to know that this is the second time round the foreach loop. So change the foreach to include the index like this, and add a test inside the loop for $i == 1
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php //foreach ($banners as $banner) {
foreach ($banners as $i => $banner) {
?>
<div class="item">
<?php if ($banner['link']) {
if ( $i == 1 ) {
echo 'YOUR HTML CONTAINING SOME TEXT HERE';
}
?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
If I get the code right, $module is 0/1 (if id's get values banner0 and banner1), then this should work:
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<?php if ($module == "1") { ?>
<p>Your description</p>
<?php } ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
Thank you so very much guys!!! Tried both versions and they throw a error, but looking more carefully into the code and both your solutions, I came up with this:
<div id="desc<?php echo $module; ?>">
<?php if ($module == 1) { ?>
<p>Description</p>
<?php } ?>
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Thank you very much again for the quick responses and the help! :) :3
Best regards,
Tsvetko Krastev
quick question, i want to link the BLOCK1 to another page. Is it possible? do anyone got a solution? i have tried abit and my brain is going mad T_T. there are 5 other blocks that i which to link to other pages aswell.
this is the code below:
<div class="midrow_block axn_block1">
<div class="mid_block_content">
<!--BLOCK1 IMAGE-->
<?php if(!empty($optimizer['block1_image']['url']) && empty($optimizer['block1_img_bg'])){ ?>
<div class="block_img"><img src="<?php echo $optimizer['block1_image']['url']; ?>" width="<?php echo $optimizer['block1_image']['width']; ?>" height="<?php echo $optimizer['block1_image']['height']; ?>" /></div>
<?php } ?>
<div class="block_content">
<h3>
<?php echo do_shortcode( $optimizer['block1_text_id']); ?>
</h3>
<?php echo do_shortcode($optimizer['block1_textarea_id']); ?>
</div>
</div>
</div>
</div>
<?php } ?>
<!--BLOCK1 END-->
Just put a <a>-Tag arount the block you want to link:
<a href="'your link here'"> <!-- start link here -->
<div class="midrow_block axn_block1">
<div class="mid_block_content">
<!--BLOCK1 IMAGE-->
<?php if(!empty($optimizer['block1_image']['url']) && empty($optimizer['block1_img_bg'])){ ?>
<div class="block_img"><img src="<?php echo $optimizer['block1_image']['url']; ?>" width="<?php echo $optimizer['block1_image']['width']; ?>" height="<?php echo $optimizer['block1_image']['height']; ?>" /></div>
<?php } ?>
<div class="block_content">
<h3>
<?php echo do_shortcode( $optimizer['block1_text_id']); ?>
</h3>
<?php echo do_shortcode($optimizer['block1_textarea_id']); ?>
</div>
</div>
</div>
</a> <!-- end link here -->
Or put it around any other part you want to have the link on. It's just basic HTML and has nothing to do with PHP.
here is the fullcode of the block. i missed to copy the top of it:
<?php if ((!empty ($optimizer['block1_text_id'])) || (!empty ($optimizer['block1_textarea_id'])) ) { ?>
<div class="midrow_block axn_block1">
<div class="mid_block_content">
<!--BLOCK1 IMAGE-->
<?php if(!empty($optimizer['block1_image']['url']) && empty($optimizer['block1_img_bg'])){ ?>
<div class="block_img"><img src="<?php echo $optimizer['block1_image']['url']; ?>" width="<?php echo $optimizer['block1_image']['width']; ?>" height="<?php echo $optimizer['block1_image']['height']; ?>" /></div>
<?php } ?>
<div class="block_content">
<h3>
<?php echo do_shortcode( $optimizer['block1_text_id']); ?>
</h3>
<?php echo do_shortcode($optimizer['block1_textarea_id']); ?>
</div>
</div>
</div>
You can use with this JS
<div class="midrow_block axn_block1" onclick="location.href='url'">content</div>
jQuery:
$("div").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
Hello after I add some code to this PHP foreach the page goes blank and all I can see is a round black dot at the top left of screen.
My website is in Joomla3 and I am trying to customize a module. my site is http://get2gethersports.com
I have a recent post module that only shows the articles title.
that code is posted below
<?php if ($items) { ?>
<ul class="rsblog-recent-module unstyled<?php echo $params->get('moduleclass_sfx',''); ?>">
<?php foreach ($items as $item) { ?>
<li>
<a <?php echo $opener; ?> href="<?php echo JRoute::_('index.php?option=com_rsblog&view=post&id='.RSBlogHelper::sef($item->id,$item->alias).$Itemid,false); ?>">
<?php echo $item->title; ?>
</a>
</li>
<?php } ?>
</ul>
<?php } ?>
I would like to add an image abocve like the blog feed on http://vape-co.com
So I navigated to the component and saw the call for the image. which is posted below:
<div class="rsblog-entry-content">
<?php if ($this->item->image) { ?>
<div class="rsblog-entry-image">
<img class="rsblog-entry-thumb img-polaroid" src="<?php echo JURI::root().'components/com_rsblog/assets/images/blog/'.$this->item->image; ?>?nocache=<?php echo uniqid(''); ?>" alt="<?php echo $this->escape($this->item->title); ?>">
</div>
<?php } ?>
but whenever i add it or a snippet of it to the previous code it breaks....
Any ideas why it is breaking the page and how to fix it?
I tried adding in new li tags. Just adding the PHP part above the a link etc...
CODE UPDATE----
<?php if ($items) { ?>
<ul class="rsblog-recent-module unstyled<?php echo $params->get('moduleclass_sfx',''); ?>">
<?php foreach ($items as $item) { var_dump($item);?>
<li>
<div class="rsblog-entry-content">
<?php if ($this->item->image) { ?>
<div class="rsblog-entry-image">
<img class="rsblog-entry-thumb img-polaroid" src="<?php echo JURI::root().'components/com_rsblog/assets/images/blog/'.$this->item->image; ?>?nocache=<?php echo uniqid(''); ?>" alt="<?php echo $this->escape($this->item->title); ?>">
</div>
</div>
<?php } ?>
<a <?php echo $opener; ?> href="<?php echo JRoute::_('index.php?option=com_rsblog&view=post&id='.RSBlogHelper::sef($item->id,$item->alias).$Itemid,false); ?>">
<?php echo $item->title; ?>
</a>
</li>
<?php } ?>
</ul>
<?php } ?>
Try $item->image instead of $this->item->image
Correct code. Looks like it just needed some reduction.
<?php if ($items) { ?>
<ul class="rsblog-recent-module unstyled<?php echo $params -> get('moduleclass_sfx',''); ?>">
<?php foreach ($items as $item) { ?>
<li>
<?php if($item->image != '') ?>
<img src="components/com_rsblog/assets/images/blog/<?php echo $item->image;?>" alt="<?php echo $item->title. "logo";?>" width="100px"/>
<br/>
<a <?php echo $opener; ?> href="<?php echo JRoute::_('index.php?option=com_rsblog&view=post&id='.RSBlogHelper::sef($item->id,$item->alias).$Itemid,false); ?>">
<?php echo $item->title; ?>
</a>
</li>
<?php } ?>
</ul>
<?php } ?>
I have recently been learning the ways of magento, and up until two days ago it was all going great, but then I started learning about different product types .eg Simple, Bundle, Configurable. So anyway i needed to create a configurable product for a plain t-shirt, which had an option for colour and size. I added the image as i would any other product and made sure it was in-stock and done everything i would have done with a simple product, assigned the simple products and everything seemed fine. So i went on to my front end and it shows fine in the category page which its in but when i go to the actual viewing page for the product the Media.phtml file seems to be missing. The main image isn't there and inside the product-img-box div there seems to be nothing there (where my media loads for every other product).
Any help would be appreciated, i have searched everywhere for some sort of answer but haven't found a thing.
Thanks in advance, Josh.
Below is the code of my product/view.phtml page:
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
<div class="product-essential">
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="product-shop">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<?php if ($this->canEmailToFriend()): ?>
<p class="email-friend"><?php echo $this->__('Email to a Friend') ?></p>
<?php endif; ?>
<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<h2><?php echo $this->__('Overview') ?></h2>
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
</div>
<?php endif;?>
<?php echo $this->getChildHtml('other');?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
</div>
<div class="product-img-box">
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getTierPriceHtml() ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
<?php endif; ?>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('media') ?>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php endif; ?>
</div>
<div class="clearer"></div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
</form>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
</div>
<div class="product-collateral">
<?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?>
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php if ($title = $this->getChildData($alias, 'title')):?>
<h2><?php echo $this->escapeHtml($title); ?></h2>
<?php endif;?>
<?php echo $html; ?>
</div>
<?php endforeach;?>
<?php echo $this->getChildHtml('upsell_products') ?>
<?php echo $this->getChildHtml('product_additional_data') ?>
</div>
</div>
Below is the code of my product/view/media.phtml page:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?><div class="product-image product-image-zoom">
<?php
$_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
});
//]]>
</script>
<?php else: ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<div class="product-image">
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<?php endif; ?>
Below is where my catalog.xml loads in media.phtml:
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
Step 1 : Set block and html hints on via admin.
Step 2 : Clear cookies.
Step 3 : Refresh page and you will find block name and .phtml associated with that block.
This will lead you to debug .phtml and block code that should have rendered images as expected.
Now in case this does not solve provide what block and .phtml were called and paste those two files.
I have a magento store with a custom attribute called free shipping
Right now this renders a free shipping icon below the product itself
But I want to make it more appealing by putting a new button on top of the product itself.
Here is the php code for the magento page:
Sample of how a page is rendered:
http://www.theprinterdepo.com/lexmark-optra-t640-printer-20g0100
I need to modify the code in gallery.phtml to put the icon on TOP of the product, RIGHT top corner.
I will modify the image to be transparent.
This is gallery.phtml file:
<?php $_width=$this->getImageWidth() ?>
<div class="product-image-popup" style="width:<?php echo $_width; ?>px;">
<p class="a-right"><?php echo $this->__('Close Window') ?></p>
<?php if($this->getPreviusImageUrl() || $this->getNextImageUrl()): ?>
<div class="nav">
<?php if($_prevUrl = $this->getPreviusImageUrl()): ?>
« <?php echo $this->__('Prev') ?>
<?php endif; ?>
<?php if($_nextUrl = $this->getNextImageUrl()): ?>
<?php echo $this->__('Next') ?> »
<?php endif; ?>
</div>
<?php endif; ?>
<?php if($_imageTitle = $this->htmlEscape($this->getCurrentImage()->getLabel())): ?>
<h1 class="image-label"><?php echo $_imageTitle ?></h1>
<?php endif; ?>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $this->getImageFile()); ?>"<?php if($_width): ?> width="<?php echo $_width ?>"<?php endif; ?> alt="<?php echo $this->htmlEscape($this->getCurrentImage()->getLabel()) ?>" title="<?php echo $this->htmlEscape($this->getCurrentImage()->getLabel()) ?>" id="product-gallery-image" class="image" />
<?php if($this->getPreviusImageUrl() || $this->getNextImageUrl()): ?>
<div class="nav">
<?php if($_prevUrl = $this->getPreviusImageUrl()): ?>
« <?php echo $this->__('Prev') ?>
<?php endif; ?>
<?php if($_nextUrl = $this->getNextImageUrl()): ?>
<?php echo $this->__('Next') ?> »
<?php endif; ?>
</div>
<?php endif; ?>
<p class="a-right"><?php echo $this->__('Close Window') ?></p>
</div>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function(){
var demensions = $('product-gallery-image').getDimensions();
window.resizeTo(demensions.width+90, demensions.height+210);
});
//]]>
</script>
This is view.phtml
<?php $Deal = $_product->getResource()->getAttribute('deal')->getFrontend()->getValue($_product);?>
<?php $onSale = $_product->getResource()->getAttribute('on_sale')->getFrontend()->getValue($_product);?>
<?php $hotItem = $_product->getResource()->getAttribute('hot_item')->getFrontend()->getValue($_product);?>
<?php $freeShip = $_product->getResource()->getAttribute('free_shipping')->getFrontend()->getValue($_product);?>
<?php if($Deal == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-deal.gif') ?>" >
<?php } ?>
<?php if($onSale == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-sale.gif') ?>" >
<?php } ?>
<?php if($hotItem == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-hot.gif') ?>" >
<?php } ?>
<?php if($freeShip == 'Yes'){ ?>
<img src="<?php echo $this->getSkinUrl('images/depot/icon-freeship.gif') ?>" >
<?php }?>
Don't know a great deal about Magento but what you are talking about will require CSS coding not really PHP. Ideally you will need both images output to the same container DIV.
Then set the images to position: absolute and then use zindex to stack them on top of each other. Note the container div will either need to be position: absoloute or position: relative for the positioning of the images to work properly.
See here for more - How can we overlap two images using css style?