Archive for the ‘Magento’ Category

Magento 2 : Add Custom link in header

Posted: October 29, 2016 in Magento

<block class="Magento\Framework\View\Element\Html\Link\Current" name="test" before="-">
	<arguments>
		<argument name="label" xsi:type="string">Test</argument>
		<argument name="path" xsi:type="string">test</argument>
	</arguments>
</block>

Image in PHTML file:

<img src="<?php echo $this->getViewFileUrl('images/facebook.png'); ?>"/>


Image in Static Block:

{{view url="images/demo.jpg"}} 


Image in CMS page:

{{view url="images/demo.jpg"}} 

Call PHTML file In CMS page:

{{block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::html/test.phtml"}} 

Call PHTML file in XML:

<referenceContainer name="footer">                
            <block class="Magento\Framework\View\Element\Template" name="footer.hcontent" template="Magento_Theme::html/footer.phtml">
                <container name="hcontent" label="footer content"/>
            </block>
</referenceContainer>

Text in PHTML file:

<?php echo __('Create Backup') ?>

If your string contains a variable, to add a placeholder for this variable in the dictionary, use syntax similar to the following:

<?php echo sprintf(__('Hello %s'), $yourVariable) ?>

In Phtml File:

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

in CMS Content:

{{block class="Magento\\Cms\\Block\\Block" block_id="block_identifier"}}

In Xml File:

<referenceContainer name="content">
	<block class="Magento\Cms\Block\Block" name="block_identifier">
		<arguments>
			<argument name="block_id" xsi:type="string">block_identifier</argument>
		</arguments>
	</block>
</referenceContainer>

Currently I have used easy responsive for tabbing and owlCarousel for Carousel.

HTML :


<div id="parentHorizontalTab">
	<ul class="resp-tabs-list hor_1">
		<li>Horizontal 1</li>
		<li>Horizontal 2</li>
		<li>Horizontal 3</li>
	</ul>
	<div class="resp-tabs-container hor_1">
		<div>
			<div class="new-products1">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>
		<div>
			<div class="new-products2">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>
		<div>
			<div class="new-products3">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>

	</div>
</div>

 

Script :

<script type="text/javascript">
	require (['js/easy-responsive-tabs','js/owl.carousel.min'], function(myjs) {
		jQuery(document).ready(function() {
			//Horizontal Tab
			jQuery('#parentHorizontalTab').easyResponsiveTabs({
				type: 'default', //Types: default, vertical, accordion
				width: 'auto', //auto or any width like 600px
				fit: true, // 100% fit in a container
				tabidentify: 'hor_1', // The tab groups identifier
				activate: function(event) { // Callback function if tab is switched
					var $info = $('#nested-tabInfo');
					var $name = $('span', $info);
					$name.text($tab.text());
					$info.show();
				}
			});
			jQuery(".new-products1").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
			jQuery(".new-products2").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
			jQuery(".new-products3").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
		});
	});
</script>

1.) Create a folder inside the images folder and rename it to icons
2.) Add some images in icons folder
3.) Now go to the SCSS folder and Add below code in _framework.scss

// configuration variables
$icons-sprite-dimensions:true;
 
// required for basic spriting
@import "compass/utilities/sprites";
@import "../images/icons/*.png";
 
/* Compass mixin for displaying the custom classes.
*  Make sure to commenting out the all-icons-sprites mixin, otherwise you'll have duplicated classes.
*  .creator {
*      @include icons-sprite( your_image_name);
*   }
*/

5.) Complie SCSS folder & files

6.) Now you are ready to Use Dynamic Sprites Just use below code

classname {@include icons-sprite( your_image_name);}
 
Example:
 
.facebook-icon {@include icons-sprite(facebook);}

How to compile SCSS using Ruby

Posted: May 7, 2015 in Magento

-> Intall ruby
-> go to Ruby193\bin
-> C:\> cd Ruby22-x64\bin
-> C:\Ruby22-x64\bin> ruby -v
-> C:\Ruby22-x64\bin>gem install compass
-> C:\Ruby22-x64\bin> compass create (project path)
-> C:\Ruby22-x64\bin> compass watch (apply magento scss project path)