Magento ver. 1.13
I'm trying to edit the code and layout of an existing Magento website.
From asking a question yesterday i had learned that when first landing on the website you are directed to the page tagged with the "home" URL key and you can find the pages by looking in the "CMS->Pages->Manage Content"
I then looked at what the page with the URL key "home" contains..
<div>{{block type="dip/dip" name="dip" template="dip/banner-home.phtml" }}</div>
<div class="content-home">
<div class="tab-text">{{block type="core/template" name="tabs_home" as="tabs_home" template="page/tabs.phtml"}}</div>
</div>
so i looked at the first line and decided that it was loading the banner that is at the top of the website.
I then looked at the third line that is loading a block from the template aswell and it appears to be loading the file tabs.phtml..
I then located the tabs.phtml hoping that the entire layout of the page would be located there, but i didn't find anything that seems of any use in there.
this is what the page contained..
<SCRIPT type="text/javascript" src="<?php echo $this->getSkinUrl('js/carousel.js') ;?>"></SCRIPT>
<div class="tabs">
<ul class="veiw-all-tab" id="navigation-links">
<li><a href="javascript:void(0);" class="slide-arrow-lft" ><img src="<?php echo $this->getSkinUrl()?>images/slide-left.gif" alt="" /></a></li>
<li>
<span id="newallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/view-all-products.gif" alt="" /></span>
<span id="featuredallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/View-All-Featured-Products.gif" alt="" /></span>
</li>
<li><a href="javascript:void(0);" class="slide-arrow-rgt" ><img src="<?php echo $this->getSkinUrl()?>images/slide-right.gif" alt="" /></a></li>
</ul>
<div class="product-details-new-tab-content">
<ul class="product-details-new-tabs-horiz">
<li id="product_new_products" class="selected"><span><?php echo $this->__('New Products'); ?></span></li>
<li id="product_feature_products"><a href="javascript:void(0)" ><span><?php echo $this->__('Featured Products'); ?></span></a></li>
</ul>
</div>
</div>
<?php echo Mage::getBlockSingleton('catalog/product_new')->setTemplate('catalog/product/new.phtml')->toHtml(); ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_block')->toHtml(); ?>
<script type="text/javascript">
var show_selector = new Array();
show_selector[0] = true
show_selector[1] = true;
//show_selector[2] = true;
function showNewProductGallery(counter){
selector = ".infiniteCarousel"+counter;
if(show_selector[counter])
{
jQuery(selector+" .jCarouselLite").jCarouselLite({
btnNext: "#navigation-links .slide-arrow-rgt",
btnPrev: "#navigation-links .slide-arrow-lft",
speed: 500,
easing: "easeinout"
});
show_selector[counter] = false;
}
};
</script>
<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('selected')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
var counter = 0;
ul.getElementsBySelector('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('selected');
// Added by Zeon
if (el.id == 'product_new_products') {
$('newallproductspan').show();
$('featuredallproductspan').hide();
}
if (el.id == 'product_feature_products') {
$('featuredallproductspan').show();
$('newallproductspan').hide();
}
// End
contents.show();
showNewProductGallery(counter);
} else {
el.removeClassName('selected');
contents.hide();
}
counter++
});
}
}
new Varien.Tabs('.product-details-new-tabs-horiz');
</script>
I'm starting to run out of leads to follow to find out how to actually change anything about this page at all.. i can't seem to find anything.. I'm starting to wonde if its even possible.
Any and all help is appreciated.. even if you don't know the answer.. even if you just have a few tips for me, that would be great!
Your question is extremely broad, but I'll try to get you started.
A page in Magento is made up of blocks pulled together using Magento's Layout XML and then rendered by a combination of block objects and php templates (phtml). Describing all of how that feature works is a bit beyond the scope of a simple Q&A, but there are some good guides out there.
I'm not going to talk much about Enterprise because it's not FOSS, but I will say that the default theme is "enterprise", which means that you want to look in app/design/frontend/enterprise/default/layout/page.xml for a fairly global example of layout xml. You can see here that layout xml consists of handles which contain blocks, references and removes, which can contain actions or recur to blocks.
A block in layout xml corresponds to a block class in php, which can be identified by its type. Block type names are fully resolved to their block classpaths in Mage_Core_Model_Layout*.
An action in layout xml calls a method on the containing block. Its children are arguments (the xml node names are ignored for immediate children, but are array keys for grandchildren of the action node.)
A remove lets you ignore an existing block.
A reference allows you to update an existing block by firing off one of its actions or by attaching or removing child blocks.
If you just want to tweak layout, you can do that by dropping a local.xml file in the current theme package. That's a good way to get some practice with layout xml without a lot of the headaches of massive theming. If you want to create your own theme with extensive changes, read the Designer's Guide.
Related
I'm trying to add a new paragraph to a document using document.createElement. It's not working for me.
HTML file:
<section class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
else entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
JS file:
const newP = document.createElement('p');
.first.appendChild('newP');
newP.textContent = 'Say my name!';
console.log(newP);
I expect for the element to be created with document.createElement, text to be added with element.textContent and for the element to be added to the children of the section with class of "first" through the appendChild method.
From the snippet you post, you mistyped:
.first.appendChild('newP');
It should have been:
document.getElementsByClassName('first')[0].appendChild(newP)
Try this:
const newP = document.createElement('p');
newP.innerHTML = 'Say my name!'
document.getElementsByClassName('first')[0].appendChild(newP);
<section id="first" class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
else entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
you can try below code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become somethingelse entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
<button id="add">Add Paragraph</button>
<script type="text/javascript">
var first = document.getElementsByClassName('first')[0],
add = document.getElementById('add');
add.onclick = function(){
var p = document.createElement('p');
p.textContent = "Say my name!";
first.appendChild(p);
}
</script>
</body>
</html>
The button will produce tag p inside class first with appendChild method.
I am using this package barryvdh/laravel-dompdf is there any way to detect if content fits on the current page if not I want to put that content to the next page if it does not fit completly.
This is said in the documentation about the asked subject: https://github.com/barryvdh/laravel-dompdf
Tip: Page breaks
You can use the CSS page-break-before/page-break-after properties to create a new page.
<style>
.page-break {
page-break-after: always;
}
</style>
<h1>Page 1</h1>
<div class="page-break"></div>
<h1>Page 2</h1>
Update, you can iterate through the items and call for example after 10 divs:
<?php $i=0 ?>
#foreach($array as $object)
<?php $i++ ?>
<!-- do something here | divs -->
if( $i % 10 == 0 ){
echo '<div class="page-break"></div>'; ....
}
#endforeach
You will have to determine yourself how many divs you can show to fill a page. An A4 paper for example has always the same height so you could make a guess of how many of your divs can be displayed on this page.
This is how you do it. Put this code on your CSS
<style>
.page-break {
page-break-after: always;
}
</style>
Then use
<h1>Page 1</h1>
<div class="page-break"></div>
<h1>Page 2</h1>
I'm using magento 1.9.3 and I want to display featured products in home page in an owl carousel.
I have a method in the block of my module that returns me the collection I want to show in the carousel. I call it from my template like this:
$_productCollection=$this->getFeaturedProducts();
I found a previous question in stack overflow about this: Owl Carousel - Magento Products
and following this previous question I arrived to this in my template:
<div class="owl-carousel">
<?
$products = $this->getFeaturedProducts();
foreach ($products as $_product) { // iterate through the entire collection
echo '<div class="item"><img src='.$this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize).'></div>'; // print the image url inside of the required Owl markup
}
?>
</div>
But the div of owl-carousel is not displayed. If I inspect the page, the div is there, and the images inside too, but nothing is displayed. If I delete the owl-carousel class I see all the images displayed in list.
I installed the extension "Responsive Owl Slider" from magento connect, and I have another owl carousel on top of page made with the admin cms that shows image slides (not products) and it's working fine. The only one that fails is the one that I'm trying to do by code.
I see that the owl-carousel class has a display: none so obviously is not displaying anything, but if I delete the display: none it shows all the images at the same time, not a carousel.
How do I display my selected products in an owl carousel?
Please try this extension
https://www.magentocommerce.com/magento-connect/new-products-2.html
Hope it's helpful for you.
First go to the link >> https://magento.stackexchange.com/questions/83912/featured-products-on-homepage
Create all files to following answers.
Then open featured.phtml
copy and paste below code
<?php
$_helper = $this->helper('catalog/output');
$_productCollection = $this->getProductCollection();
?>
<div class="featured-products">
<ol class="featured-products-list owl-carousel" id="featured-products-list">
<?php foreach ($_productCollection as $_product): ?>
<li><img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(200) ?>" alt="<?php echo $this->escapeHtml($_product->getName()) ?>" /></li>
<?php endforeach; ?>
</ol>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".owl-carousel").owlCarousel();
});
</script>
Please don't forget create attribute and assign for products.
I have five links that I want to change the content in the same separate DIV. There's different content corresponding to each link. On the mouseleave, I need the default text to return inside the separate DIV.
Has anyone already done this or can guide me? I prefer jquery.
Thanks!
$("a.link").mouseleave(function() {
$("#sepdiv").text($(this).text());
});
//share the same class ("link" as an example) with all your links. and have an id for the separate div
You question isn't clear and I don't have any code that I can base this on but I hope this is what you where looking for. let me know so I can edit my answer!
Edit:
After looking at the website shared in the comment:
js
$(document).ready(function() {
//this is your code - just add it all under one document load
$.preloadCssImages();
$('#slider').nivoSlider();
$('a.share-links').hover(function() {
$('#ms').text($(this).text());
}, function() {
$('#ms').text(function() {
return $(this).attr("title");
});
});
});
css
.share-links
{
text-indent:-9999px;
}
html
<div id="ms" title="Our crusade to feed every orphan in the world.">
Our crusade to feed every orphan in the world.
</div>
<div id="nc_wrap2">
<a class="nc1 share-links" href="#">Facebook</a>
<a class="nc2 share-links" href="#">Twitter</a>
<a class="nc3 share-links" href="#">..</a>
<a class="nc4 share-links" href="#">..</a>
<a class="nc5 share-links" href="#">..</a>
</div>
I hope this is better!
I use codeigniter pagination class in my project it's works fine for me . But there is no option to tell class just show next and previous link ,
please see this image I want to show result paged plus I'd like to use to link for next and previous instead of numeric links and when the user click on the next button I'll use Ajax to retrieve request I don't have problem with Ajax calls in pagination in numeric links but I want to just show this to link :)
I don't think I can explain what I need very good so please see the image .
link text
Here is my view file :
<div style="height:200px; position:relative">
<div id="left_nav"></div>
<div id="right_nav"></div>
<div style="width:622px;margin:0 auto;">
<!-- Gallery Box1 -->
<?php foreach($last_profile as $l) : ?>
<div id="galleryBoxHolder">
<div id="galleryBoxContent">
<div id="ImageHolder">
<img src="dummy_data/1.gif" /> </div>
<br />
<p><?=$l->artname?> </p>
<br />
<p style="color:#1a4688">asdasd</p>
<p style="color:#1a4688 ; direction:ltr"><?=$l->length?> cm x <?=$l->width?> cm</p>
</div>
</div>
<?php endforeach ;?>
<div>
<?=$links?>
</div>
<!-- Gallery box1 :off -->
</div>
</div>
Please Check This url which is exactly what I need (#:title Customers Who Bought This Item Also Bought)
In version 2.0.3 Codeigniter - To show Next / Previous only you can add the following config settings:
$config['display_pages'] = FALSE;
$config['first_link'] = FALSE;
$config['last_link'] = FALSE;
You have a couple of options. The first is really simple, hide the thumbnails portion of the pagination module with CSS. The second options isn't too complex either: modify the pagination class to not include the thumbnails, and instead limit its output to the next/prev buttons. This should be somewhat trivial as well.
Line 199 of the System/Libraries/Pagination Library is where the "digits" are handled. This is where you will remove any appending to the $output variable:
if ($this->cur_page == $loop)
{
$output .= $this->cur_tag_open.$loop.$this->cur_tag_close; // Current page
}
else
{
$n = ($i == 0) ? '' : $i;
$output .= $this->num_tag_open.''.$loop.''.$this->num_tag_close;
}