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>

Vertical align in divs

Posted: April 12, 2016 in CSS 3

HTML :

      <div class="vcenter">
           <div class="col-md-4">1</div>
           <div class="col-md-4">2</div>
           <div class="col-md-4">3</div>
      </div>

CSS :

.vcenter {
    align-items: center;
    display: flex;
}

CSS3 triangle shape with link

Posted: November 27, 2015 in CSS 3

HTML

<div class="actions">
	<a href="#" class="button btn-cart">
		<img src="images/demo.png">
	</button>
	<a href="#" class="product-detail">
		<img src="images/demo.png">
	</a>
</div>

CSS

.actions {
    bottom: 0;
    height: 73px;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 74px;
}
.actions .button.btn-cart img, 
.actions .product-detail img, 
{
    height: 100%;
    transform-origin: inherit;
    width: 100%;
}
.actions .button.btn-cart {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewX(1.02deg);
    transform-origin: 50% 0 0;
}
.actions .product-detail {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewY(141.02deg);
    transform-origin: 100% 0 0;
}
.actions .product-detail img {
    transform: skewY(38.02deg);
}

Like below :
Capture


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>