| 1 |
<template> |
| 2 |
<div class="wpfnl-mm-setup-section"> |
| 3 |
<div class="wpfnl-mm-setup-section-content wpfnl-mm-page-builders"> |
| 4 |
<h3 class="wpfnl-mm-setup-section-title">What Page Builder Would You Like To Use To Design Funnel Pages?</h3> |
| 5 |
<div class="wpfnl-mm-woo-status"> |
| 6 |
<div |
| 7 |
v-for="builder in builders" |
| 8 |
:key="builder.id" |
| 9 |
class="wpfnl-setup-plugins-card" |
| 10 |
:class="{ |
| 11 |
'selected': selectedBuilder === builder.id, |
| 12 |
'disabled': isProBuilder(builder.id) && !isBuilderInstalled(builder.id) |
| 13 |
}" |
| 14 |
@click="selectBuilder(builder.id)" |
| 15 |
> |
| 16 |
<span class="wpfnl-setup-plugin-selected" v-if="selectedBuilder === builder.id"> |
| 17 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">><path d="M12 5L6.5 10L4 7.72727" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| 18 |
</span> |
| 19 |
|
| 20 |
<span class="wpfnl-setup-pro-badge" v-if="isProBuilder(builder.id) && !isBuilderInstalled(builder.id)"> |
| 21 |
Not Installed |
| 22 |
</span> |
| 23 |
|
| 24 |
<img |
| 25 |
:src="builder.image" |
| 26 |
:alt="builder.name + ' Logo'" |
| 27 |
> |
| 28 |
<span class="wpfnl-setup-plugin-name"> |
| 29 |
{{ builder.name }} |
| 30 |
</span> |
| 31 |
</div> |
| 32 |
</div> |
| 33 |
</div> |
| 34 |
|
| 35 |
<!-- Info Message About Page Builder Support --> |
| 36 |
<div class="wpfnl-mm-page-builder-info"> |
| 37 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">><path d="M7.9987 14.6673C11.6806 14.6673 14.6654 11.6825 14.6654 8.00065C14.6654 4.31875 11.6806 1.33398 7.9987 1.33398C4.3168 1.33398 1.33203 4.31875 1.33203 8.00065C1.33203 11.6825 4.3168 14.6673 7.9987 14.6673Z" stroke="#f68524" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.6667V8" stroke="#f68524" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 5.33301H8.00667" stroke="#f68524" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| 38 |
<p>WPFunnels works with all page builders, so don't worry if your page builder is not in the list.</p> |
| 39 |
</div> |
| 40 |
</div> |
| 41 |
</template> |
| 42 |
|
| 43 |
<script> |
| 44 |
export default { |
| 45 |
name: 'PageBuilders', |
| 46 |
props: { |
| 47 |
selectedBuilder: { |
| 48 |
type: String, |
| 49 |
default: '' |
| 50 |
}, |
| 51 |
builderStatuses: { |
| 52 |
type: Object, |
| 53 |
default: () => ({}) |
| 54 |
} |
| 55 |
}, |
| 56 |
data() { |
| 57 |
return { |
| 58 |
// Pro builders that cannot be installed from the WordPress repo |
| 59 |
proBuilders: ['oxygen', 'bricks', 'divi'], |
| 60 |
builders: [ |
| 61 |
{ |
| 62 |
id: 'gutenberg', |
| 63 |
name: 'Gutenberg', |
| 64 |
image: window?.setup_wizard_obj?.gb_builder_img || '', |
| 65 |
slug: '', |
| 66 |
basename: '', |
| 67 |
isBuiltIn: true |
| 68 |
}, |
| 69 |
{ |
| 70 |
id: 'elementor', |
| 71 |
name: 'Elementor', |
| 72 |
image: window?.setup_wizard_obj?.elementor_img || '', |
| 73 |
slug: 'elementor', |
| 74 |
basename: 'elementor/elementor.php' |
| 75 |
}, |
| 76 |
{ |
| 77 |
id: 'bricks', |
| 78 |
name: 'Bricks', |
| 79 |
image: window?.setup_wizard_obj?.bricks_img || '', |
| 80 |
slug: 'bricks', |
| 81 |
basename: 'bricks', |
| 82 |
isTheme: true |
| 83 |
}, |
| 84 |
{ |
| 85 |
id: 'divi', |
| 86 |
name: 'Divi', |
| 87 |
image: window?.setup_wizard_obj?.divi_img || '', |
| 88 |
slug: 'divi', |
| 89 |
basename: 'Divi', |
| 90 |
isTheme: true |
| 91 |
}, |
| 92 |
{ |
| 93 |
id: 'oxygen', |
| 94 |
name: 'Oxygen', |
| 95 |
image: window?.setup_wizard_obj?.oxygen_img || '', |
| 96 |
slug: 'oxygen', |
| 97 |
basename: 'oxygen/functions.php' |
| 98 |
}, |
| 99 |
{ |
| 100 |
id: 'others', |
| 101 |
name: 'Others', |
| 102 |
image: window?.setup_wizard_obj?.others_builder_img || '', |
| 103 |
slug: '', |
| 104 |
basename: '', |
| 105 |
isBuiltIn: true |
| 106 |
} |
| 107 |
] |
| 108 |
} |
| 109 |
}, |
| 110 |
methods: { |
| 111 |
isProBuilder(builderId) { |
| 112 |
return this.proBuilders.includes(builderId); |
| 113 |
}, |
| 114 |
|
| 115 |
isBuilderInstalled(builderId) { |
| 116 |
const status = this.builderStatuses[builderId]; |
| 117 |
return status ? status.installed : false; |
| 118 |
}, |
| 119 |
|
| 120 |
selectBuilder(builderId) { |
| 121 |
// Prevent selecting pro builders that are not installed |
| 122 |
if (this.isProBuilder(builderId) && !this.isBuilderInstalled(builderId)) { |
| 123 |
return; |
| 124 |
} |
| 125 |
this.$emit('update:selectedBuilder', builderId); |
| 126 |
} |
| 127 |
} |
| 128 |
} |
| 129 |
</script> |
| 130 |
|
