| 1 |
<template> |
| 2 |
<div class="wizard-single-content builder-type"> |
| 3 |
<div class="step-header"> |
| 4 |
<h4 class="title">Builder Type</h4> |
| 5 |
<p class="description">Choose which page builder or editor you want to use to design your funnel pages. WPFunnels is exclusively compatible with Gutenberg, Elementor, Divi and Oxygen with dedicated blocks and widgets. Also, get tons of amazing templates for both Gutenberg, Elementor, Divi and Oxygen for many different niches.</p> |
| 6 |
</div> |
| 7 |
|
| 8 |
<div class="wizard-single-content__body"> |
| 9 |
<select |
| 10 |
id="builder-type" |
| 11 |
v-model="selected" |
| 12 |
name="builder-type" |
| 13 |
@change="onChange($event)" |
| 14 |
> |
| 15 |
<option |
| 16 |
v-for="option in options" |
| 17 |
:value="option.value" |
| 18 |
:data-file="option.data.file" |
| 19 |
:selected="option.value == 'classic'" |
| 20 |
>{{option.name}} |
| 21 |
</option> |
| 22 |
</select> |
| 23 |
|
| 24 |
<div class="wpfnl-field-wrapper" v-if="selected=='gutenberg'"> |
| 25 |
<div class="wpfnl-fields"> |
| 26 |
<span class="wpfnl-checkbox no-title"> |
| 27 |
<input type="checkbox" name="install-qubely" v-model="isIstallQubely" id="install-qubely" @change="isPermitted"/> |
| 28 |
<label for="install-qubely"></label> |
| 29 |
</span> |
| 30 |
<label> |
| 31 |
Install Qubely |
| 32 |
<span class="wpfnl-tooltip"> |
| 33 |
<p>Enable to install Qubely</p> |
| 34 |
</span> |
| 35 |
</label> |
| 36 |
</div> |
| 37 |
<p class="hints" v-if="selected === 'gutenberg' "> |
| 38 |
Recommended if you want to use our pre-made Gutenberg funnel templates. |
| 39 |
</p> |
| 40 |
</div> |
| 41 |
|
| 42 |
<span class="hints" v-if="selected === 'elementor' "> |
| 43 |
The following plugin will be installed for you: <a href="https://wordpress.org/plugins/elementor/" target="_blank">Elementor</a> |
| 44 |
</span> |
| 45 |
<span class="hints" v-if="selected === 'gutenberg' && isIstallQubely"> |
| 46 |
The following plugin will be installed for you: <a href="https://wordpress.org/plugins/qubely/" target="_blank">Qubely</a> |
| 47 |
</span> |
| 48 |
</div> |
| 49 |
|
| 50 |
<div class="wizard-single-content__footer"> |
| 51 |
<a :href="prevStepLink" class="wizard-btn btn-default prev">previous</a> |
| 52 |
<a href="#" class="wizard-btn btn-default next" @click="processSettings">Next |
| 53 |
<span class="wpfnl-loader" v-if="showLoader"></span> |
| 54 |
</a> |
| 55 |
</div> |
| 56 |
|
| 57 |
</div> |
| 58 |
</template> |
| 59 |
|
| 60 |
|
| 61 |
<script> |
| 62 |
import apiFetch from "@wordpress/api-fetch"; |
| 63 |
import TooltipIcon from '../../../src/components/icons/TooltipIcon.vue' |
| 64 |
const nonce = window.setup_wizard_obj.nonce; |
| 65 |
apiFetch.use(apiFetch.createNonceMiddleware(nonce)); |
| 66 |
|
| 67 |
export default { |
| 68 |
name: 'Builder', |
| 69 |
components: { |
| 70 |
TooltipIcon |
| 71 |
}, |
| 72 |
props: { |
| 73 |
// eslint-disable-next-line vue/require-default-prop |
| 74 |
wizardSlug: String, |
| 75 |
prevStepLink: String, |
| 76 |
showLoader: Boolean |
| 77 |
}, |
| 78 |
data: function () { |
| 79 |
return { |
| 80 |
count: 0, |
| 81 |
options: [ |
| 82 |
{ |
| 83 |
name: 'Gutenberg', |
| 84 |
value: 'gutenberg', |
| 85 |
data: { |
| 86 |
file: 'qubely/qubely.php' |
| 87 |
} |
| 88 |
}, |
| 89 |
{ |
| 90 |
name: 'Elementor', |
| 91 |
value: 'elementor', |
| 92 |
data: { |
| 93 |
file: 'elementor/elementor.php' |
| 94 |
} |
| 95 |
}, |
| 96 |
{ |
| 97 |
name: 'Divi', |
| 98 |
value: 'divi-builder', |
| 99 |
data: { |
| 100 |
file: 'divi-builder/divi-builder.php' |
| 101 |
} |
| 102 |
}, |
| 103 |
{ |
| 104 |
name: 'Oxygen', |
| 105 |
value: 'oxygen', |
| 106 |
data: { |
| 107 |
file: 'oxygen/functions.php' |
| 108 |
} |
| 109 |
}, |
| 110 |
// {name: 'Classic Editor (Legacy Editor)', value: 'classic'}, |
| 111 |
], |
| 112 |
selected: 'elementor', |
| 113 |
isIstallQubely: true |
| 114 |
} |
| 115 |
}, |
| 116 |
mounted () { |
| 117 |
this.$emit('setPluginSlug', 'elementor') |
| 118 |
this.$emit('changeSetUpType', 'plugin') |
| 119 |
}, |
| 120 |
methods: { |
| 121 |
onChange (event) { |
| 122 |
if (event.target.value === 'elementor') { |
| 123 |
this.$emit('setPluginSlug', 'elementor',this.isIstallQubely) |
| 124 |
} else if (event.target.value === 'gutenberg') { |
| 125 |
this.$emit('setPluginSlug', 'gutenberg',this.isIstallQubely) |
| 126 |
} else if (event.target.value === 'divi-builder') { |
| 127 |
this.$emit('setPluginSlug', 'divi-builder',this.isIstallQubely) |
| 128 |
}else if (event.target.value === 'oxygen') { |
| 129 |
this.$emit('setPluginSlug', 'oxygen',this.isIstallQubely) |
| 130 |
} |
| 131 |
}, |
| 132 |
processSettings: function (e) { |
| 133 |
e.preventDefault(); |
| 134 |
this.$emit('processSettings') |
| 135 |
}, |
| 136 |
isPermitted: function (e) { |
| 137 |
e.preventDefault(); |
| 138 |
this.$emit('setPluginSlug', 'gutenberg',this.isIstallQubely) |
| 139 |
}, |
| 140 |
} |
| 141 |
} |
| 142 |
</script> |
| 143 |
|
