| 1 |
<template> |
| 2 |
<button |
| 3 |
class="btn-default wpfnl-create-product-btn" |
| 4 |
id="wpfnl-create-product-btn" |
| 5 |
data-id="" |
| 6 |
@click="showCreateProductModal" |
| 7 |
> |
| 8 |
<span class="create-product-icon"> |
| 9 |
<svg width="12" height="12" fill="none" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">><path stroke="#363B4E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5.918.9v10.013M.9 5.907h10.032"/></svg> |
| 10 |
</span> |
| 11 |
Create New Product |
| 12 |
</button> |
| 13 |
|
| 14 |
<div class="wpfnl-modal-overlay" v-if="isCreateProduct"> |
| 15 |
<div class="wpfnl-modal-wrapper" > |
| 16 |
<div class="wpfnl-modal-close"> |
| 17 |
<span class="wpfnl-modal-close-btn" @click="removeCreateProductModal"> |
| 18 |
<svg width="12" height="13" fill="none" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg">><path stroke="#7A8B9A" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 1.969l-10 9.99m0-9.99l10 9.99"></path></svg> |
| 19 |
</span> |
| 20 |
</div> |
| 21 |
|
| 22 |
<span className="wpfnl-loader" v-if="isShowModalLoader"></span> |
| 23 |
<div id="wpfnl-create-product" :style="{ display: !isShowModalLoader ? 'block' : 'none' }"> |
| 24 |
</div> |
| 25 |
</div> |
| 26 |
</div> |
| 27 |
</template> |
| 28 |
|
| 29 |
<script> |
| 30 |
export default { |
| 31 |
name: 'CreateProduct', |
| 32 |
components: { |
| 33 |
|
| 34 |
}, |
| 35 |
data: function () { |
| 36 |
return { |
| 37 |
isCreateProduct: false, |
| 38 |
isShowModalLoader: false, |
| 39 |
productUrl: window?.setup_wizard_obj?.product_url, |
| 40 |
} |
| 41 |
}, |
| 42 |
methods: { |
| 43 |
showCreateProductModal: function () { |
| 44 |
this.isCreateProduct = true; |
| 45 |
this.isShowModalLoader = true; |
| 46 |
|
| 47 |
setTimeout(() => { |
| 48 |
var container = document.getElementById('wpfnl-create-product'); |
| 49 |
|
| 50 |
// Create an iframe element |
| 51 |
var iframe = document.createElement('iframe'); |
| 52 |
|
| 53 |
// Set the attributes of the iframe |
| 54 |
iframe.setAttribute('src', this.productUrl); |
| 55 |
iframe.setAttribute('width', '100%'); |
| 56 |
iframe.setAttribute('height', '100%'); |
| 57 |
iframe.setAttribute('frameborder', '0'); |
| 58 |
|
| 59 |
iframe.addEventListener('load', () => { |
| 60 |
this.isShowModalLoader = false; |
| 61 |
}); |
| 62 |
|
| 63 |
container.appendChild(iframe); |
| 64 |
// Append the iframe to the container div |
| 65 |
}, 100); |
| 66 |
}, |
| 67 |
removeCreateProductModal: function () { |
| 68 |
this.isCreateProduct = false |
| 69 |
jQuery('#wpfnl-create-product').empty() |
| 70 |
}, |
| 71 |
} |
| 72 |
} |
| 73 |
</script> |
