Question:
Is it possible for you to send me some examples for the html for popups so that I can create
a) A Newsletter pop up
b) A form popup
c) A pop up that has a list of cross-sell items
Answer
a)A Newsletter pop up - http://prntscr.com/l1m28w
- Content:
<div class="newletter_wrapper" style="background-image: url('{{media url="wysiwyg/5Asset_1.png"}}');">{{block class="Magento\Newsletter\Block\Subscribe" name="popupSubscribe" template="Magento_Newsletter::subscribe.phtml"}}</div>
- Pop-up CSS:
.popup_wrapper {width:500px; height:292px; padding: 0 0;}
.newletter_wrapper{width:500px; height:292px;}
.popup_wrapper .block.newsletter .field {margin: 0; width: 40%; bottom: 35px; left: 30px; position: absolute;}
b)A form popup - http://prntscr.com/l1m5bi
- Content:
<div class="contactUs_wrapper">{{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}</div>
- Pop-up CSS
.popup_wrapper{padding: 0 0; width: 339px; height: 433px;}
.popup_content {width: 309px;height: 403px;margin: 12px auto; border-radius: 10px; border: 2px solid #1979c3;}
.popup_wrapper .legend{border:none; text-align:center; color:#1979c3; font-weight:bold }
.popup_wrapper .note{display:none}
.popup_wrapper .telephone{display:none}
.popup_wrapper .contactUs_wrapper{vertical-align: middle;margin: auto 50px;}
.popup_wrapper div.primary{float:right}
.popup_wrapper button.submit{margin: 0 0 0 0 !important}
.popup_wrapper .fieldset {margin: 0 0 10px;}
c)A pop up that has a list of cross sell items - http://prntscr.com/l1majo - just support product list
- Content:
<p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Don't Miss Out These Must-Have Items for Summer" show_pager="0" products_count="4" template="product/widget/content/grid.phtml" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]"}}</p>
- Pop-up CSS:
.popup_wrapper {padding: 0 0}
.popup_wrapper .block-products-list {margin: auto; text-align: center;}
.popup_wrapper .block-title{margin-top: 10px;}
.popup_wrapper .block-title strong { font-size: 25px; font-weight: 700; color:white}
.popup_content {background: linear-gradient(to right, #ff9966 , #ff5e62);}