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);}