0

We have a banner on our homepage that is saying "BECOME A MEMBER TODAY". We want to hide this banner or have it changed to a different banner when customers are signed in. We are using magento 2 with porto theme. Any good suggestions?

New contributor
Ran is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Please add code how that banner is added in you home via CMS or a widget ? There can be multiple ways depending on how it is added – Vishwas Bhatnagar Jan 12 at 9:37
  • below is the code inserted in our homepage slider banner: – Ran Jan 12 at 9:49
  • --></style> <div class="banner-wrap"><img class="banner-image" style="display: block; width: 100vw;" src="{{media url="wysiwyg/Warehouse.jpg"}}" alt="ifive warehouse" /> <div class="banner-content"> <h1 class="banner-title" style="text-align: center;"><strong>BECOME A MEMBER TODAY</strong></h1> <h4 class="banner-desc" style="text-align: center;">LARGE SELECTION OF NEW, REFURBISHED &amp; GRADED DEVICES IN STOCK</h4> <button class="button button-action"> <a style="color: #fff !important;" href="ifivewireless.com/customer/account/create"> CREATE AN ACCOUNT</a></button></div> </div> – Ran Jan 12 at 9:49
  • <style xml="space"><!-- .banner-wrap { position: relative; text-align: center; color: white; height: 278px ; } .banner-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .banner-title{ font-size: 3rem; font-weight : 500; } .banner-desc{ color : #fff; line-height: 1.6; font-size : 1.3rem; margin-top : 1rem; } – Ran Jan 12 at 9:53
  • .banner-image{ width: width: 100vw; height: 278px ; } .button-action { color: #fff !important; background: #0196F2 !important; text-align: center; padding: 0px 20px !important; border-radius: 5px; border: 0px !important; outline: none; margin-top: 10px; transition: all 1s ease; font-weight: 700 !important; font-size: 12px !important; } .button-action:hover{ background: rgba(27, 36, 212) !important; } – Ran Jan 12 at 9:54
0

Hello Ran,

You can use a cookie, with no expiry date. This cookie usually gets removed when browser is closed.

This should work:

<script>
window.addEventListener('load', function(e){
if(docuement.cookie.indexOf('banner_removed=1') !== -1)
    document.getElementById('closeButton').parentNode.style.display = 'none';
});
document.getElementById('closeButton').addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.style.display = 'none';
document.cookie = "banner_removed=1";
}, false);
</script>

Thanks

  • Thanks for the reply. However this doesn't seems to solve our issue. The issue is when our customers login to their account they are still seeing our frontend homepage banner which we want only the unregistered users to see. That banner is basically saying " Become a member today" and has a "create an account" button. I would like to have that text on the banner removed or edit the text when an actual registered customer signed in. Signed in customer have no reason to see "BECOME A MEMBER TODAY" or "CREATE AN ACCOUNT" button since they are already registered. – Ran 2 days ago
  • Please add session for customer, that you want, your issue will solved, that i cant add that session in my code, you have to add this as per your requirements, Thanks please accept the answer, AS it do fulfill your Requirements, how much i can! – Munesh Jalwani 2 days ago
  • Which code should we insert and where to insert? – Ran 2 days ago
  • @Ran You have to create the controller for customer session. so you can hide the banner with different group that you want, as there is different group of customer, like signed in , general or guest! Please do accept this solution as this can helps others also, Thanks – Munesh Jalwani 2 days ago

Your Answer

Ran is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.