cancel
Showing results for 
Search instead for 
Did you mean: 

modal pop-up based on atrribute value

modal pop-up based on atrribute value

Hi,

I do not know a lot about programming so hopefully someone want to help me with a wish we have for customer notification. 

I have created a basis jquery modal pop-up for my customers. But I do not want to bother all customers. Only customers that buy a specific configurable product option. For example I want to only show pop-up if somebody buys a blue t-shirt and not when it is yellow.

Is it posible to only show based on specific attribute value of product?  If so, can you please help how?

The code i have so far 

 

<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
modalClass: 'custom-popup-modal',
buttons: [{
text: $.mage.__('Sluiten'),
class: '',
click: function () {
this.closeModal();
}
}]
};

var popup = modal(options, $('#custom-popup-modal'));

$( document ).ready(function() {
$('#custom-popup-modal').modal('openModal');
});
}
);
</script>

 

Thank you.

2 REPLIES 2

Re: modal pop-up based on atrribute value

Hi @martijndocter 

You have to override js file from path:

vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js  

To

app/design/frontend/YourTheme/Packadge/Magento_Catalog/web/js/catalog-add-to-cart.js

You have to customise and add your required functionality on add to cart event.
It may help you to resolve issue.

It issue resolve, please click on 'Kudos' & Accept as Solution!
 

Problem solved? Click Accept as Solution!

Re: modal pop-up based on atrribute value

Hi @martijndocter ,

 

For this please follow below link

https://magento.stackexchange.com/questions/150794/i-want-to-add-popup-notify-after-adding-products-...

 

In the JS check for the particular attribute value and trigger popup modal opening.

 

For overriding the JS, please follow the standard approach of mixins.

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html

 

Hope this helps you!

Problem Solved! Click 'Kudos' & Accept as Solution!