| 1 |
<template> |
| 2 |
<div> |
| 3 |
<div class="create-funnel-loader-overlay create-funnel-shimmer-overlay" id="create-funnel-loader" v-if="loader"> |
| 4 |
<!-- shimmer header --> |
| 5 |
<div class="wpfnl-tpl-shimmer-header-bar"> |
| 6 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-title"></div> |
| 7 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-btn"></div> |
| 8 |
</div> |
| 9 |
<!-- shimmer body: sidebar + content --> |
| 10 |
<div class="wpfnl-tpl-shimmer-body"> |
| 11 |
<div class="wpfnl-tpl-shimmer-sidebar"> |
| 12 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-sidebar-title"></div> |
| 13 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-sidebar-item" v-for="n in 8" :key="'s'+n"></div> |
| 14 |
</div> |
| 15 |
<div class="wpfnl-tpl-shimmer-content"> |
| 16 |
<div class="wpfnl-tpl-shimmer-grid"> |
| 17 |
<div class="wpfnl-tpl-shimmer-card" v-for="n in 8" :key="n"> |
| 18 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-card-img"></div> |
| 19 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-card-text"></div> |
| 20 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-card-badge"></div> |
| 21 |
</div> |
| 22 |
</div> |
| 23 |
</div> |
| 24 |
</div> |
| 25 |
</div> |
| 26 |
|
| 27 |
<div id="template-library-modal" class="template-library-modal fff" style="display: none"> |
| 28 |
<div id="wpfnl-create-funnel__inner-content" class="wpfnl-create-funnel__inner-content"> |
| 29 |
|
| 30 |
<div id="wpfnl-create-funnel__template-wrapper" class="wpfnl-create-funnel__templates-wrapper"> |
| 31 |
<div class="funnel-templates-header"> |
| 32 |
<div class="template-library-filter-wrapper" :class="{ 'is-store-checkout': isStoreCheckout }"> |
| 33 |
<span class="back-form-modal wpfnl-modal-close" :title="isStoreCheckout ? 'Back to Store Checkout List' : 'Back to Funnel list'" v-show="!showStepsPreview && !isTemplatePage"> |
| 34 |
<DoubleAngleLeft/> |
| 35 |
</span> |
| 36 |
|
| 37 |
<h1 class="header-title" v-if="!showStepsPreview">{{ isStoreCheckout ? 'Choose a Store Checkout Template' : 'Choose a Funnel Template' }}</h1> |
| 38 |
<button class="sync-library-btn" v-if="!showStepsPreview" @click="syncLibrary" :disabled="syncingLibrary"> |
| 39 |
<svg :class="{ 'spinning': syncingLibrary }" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg> |
| 40 |
<span>{{ syncingLibrary ? 'Syncing...' : 'Sync Templates' }}</span> |
| 41 |
</button> |
| 42 |
<div v-else class="wpfnl-template-header-title-wrapper"> |
| 43 |
<span class="back-form-modal back-to-templates" title="Back to Template" v-show="showStepsPreview" @click="backToTemplates"> |
| 44 |
<DoubleAngleLeft/> |
| 45 |
</span> |
| 46 |
<h1 class="header-title">{{activeTemplate.title}}</h1> |
| 47 |
</div> |
| 48 |
|
| 49 |
<ResponsiveSwitcher v-if="showStepsPreview" :setResponsiveView="setResponsiveView"/> |
| 50 |
|
| 51 |
<select class="template-type-filter" v-if="template_type.length" v-show="!showStepsPreview && !isStoreCheckout" v-model="type" @change="doTemplateCatFilter"> |
| 52 |
<option data-filter="woocommerce" v-for="(tempalateType, index) in template_type" :key="index" :value="tempalateType.slug" :selected="tempalateType.slug == type"> |
| 53 |
{{tempalateType.label}} |
| 54 |
</option> |
| 55 |
</select> |
| 56 |
|
| 57 |
<ul class="pro-free__filter" v-if="template_type.length > 0 && showProFilter" v-show="!showStepsPreview"> |
| 58 |
<li data-filter="all" :class="templatesType == 'all' ? 'active' : '' " @click="doFreeProFilter('all')"> |
| 59 |
all |
| 60 |
</li> |
| 61 |
|
| 62 |
<li data-filter="free" :class="templatesType == 'free' ? 'active' : '' " @click="doFreeProFilter('free')"> |
| 63 |
free |
| 64 |
</li> |
| 65 |
|
| 66 |
<li data-filter="pro" :class="templatesType == 'freemium' ? 'active' : '' " @click="doFreeProFilter('freemium')"> |
| 67 |
<svg width="20" height="14" fill="none" viewBox="0 0 20 14" xmlns="http://www.w3.org/2000/svg">><path fill-rule="evenodd" stroke="#7A8B9A" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 1l4 6 5-4-2 10H3L1 3l5 4 4-6z" clip-rule="evenodd"/></svg> |
| 68 |
Freemium |
| 69 |
</li> |
| 70 |
</ul> |
| 71 |
|
| 72 |
<!-- <div class="import-funnel-name" v-show="showStepsPreview" v-if="!isAddNewFunnelButtonDisabled"> |
| 73 |
<input type="text" name="import-funnel-name" :value="this.activeTemplate ? this.activeTemplate.title : '' " placeholder="Write Funnel Name"> |
| 74 |
</div> --> |
| 75 |
|
| 76 |
<div class="funnel-global-import" v-show="showStepsPreview"> |
| 77 |
<a |
| 78 |
href="#" |
| 79 |
class="btn-default" |
| 80 |
id="funnel-global-import" |
| 81 |
@click="startImportTemplate" |
| 82 |
v-bind:style='{"pointer-events" : (disabled? "none" : "" )}' |
| 83 |
v-if="!isAddNewFunnelButtonDisabled" |
| 84 |
v-show="(isProActivated && activeTemplate.is_pro) || !activeTemplate.is_pro" |
| 85 |
> |
| 86 |
<span class="global-import-progress" |
| 87 |
v-bind:style="{ width: globalImportProgress }"></span> |
| 88 |
<span class="btn-text">{{loaderMessage}}</span> |
| 89 |
</a> |
| 90 |
|
| 91 |
<a |
| 92 |
href="https://getwpfunnels.com/pricing/" |
| 93 |
target="_blank" |
| 94 |
class="btn-default update-to-pro" |
| 95 |
v-show="(!isProActivated && activeTemplate.is_pro)" |
| 96 |
> |
| 97 |
Upgrade to Pro |
| 98 |
</a> |
| 99 |
</div> |
| 100 |
</div> |
| 101 |
</div> |
| 102 |
<!-- /.funnel-templates-header --> |
| 103 |
|
| 104 |
<div class="funnel-templates-body" :class="showStepsPreview || isStoreCheckout ? 'no-sidebar': '' "> |
| 105 |
<div class="funnel-templates-sidebar" v-if="!showStepsPreview && !isStoreCheckout"> |
| 106 |
<div class="sidebar-tab-nav"> |
| 107 |
<span class="funnel-templates" :class="{ active: activeTab === 'templates' }" @click="onActivateTab('templates')">Templates</span> |
| 108 |
</div> |
| 109 |
|
| 110 |
<div class="sidebar-tab-content templates-content" v-if="activeTab === 'templates'"> |
| 111 |
<CategoryNav v-if="template_type.length > 0 && !showStepsPreview" :categories="categories" :activeCategory="activeCategory" @doCatFilter="doCatFilter"/> |
| 112 |
</div> |
| 113 |
|
| 114 |
</div> |
| 115 |
<!-- /.funnel-templates-sidebar --> |
| 116 |
|
| 117 |
<div class="funnel-templates-content"> |
| 118 |
<div class="wpfnl-tpl-filter-shimmer" v-if="syncingLibrary || templateCatFilterLoader"> |
| 119 |
<div class="wpfnl-tpl-shimmer-grid"> |
| 120 |
<div class="wpfnl-tpl-shimmer-card" v-for="n in 8" :key="'filter-shimmer-' + n"> |
| 121 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-card-img"></div> |
| 122 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-card-text"></div> |
| 123 |
<div class="wpfnl-tpl-shimmer-block wpfnl-tpl-shimmer-card-badge"></div> |
| 124 |
</div> |
| 125 |
</div> |
| 126 |
</div> |
| 127 |
<div v-else-if="activeTab === 'templates'"> |
| 128 |
<div class="not-clickable-overlay"></div> |
| 129 |
|
| 130 |
<!-- funnel name modal. this modal will show when create from scratch --> |
| 131 |
<div class="create-funnel-name-modal wpfnl-create-funnel-layout" :class="{ 'store-checkout-layout': isStoreCheckout }"> |
| 132 |
<span class="close" @click="closeFunnelNameModal" role="button"> |
| 133 |
<svg width="14" height="14" fill="none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">><path stroke="#7A8B9A" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.5 1.5l-11 11m0-11l11 11"/></svg> |
| 134 |
</span> |
| 135 |
|
| 136 |
<!-- Store Checkout confirmation modal --> |
| 137 |
<template v-if="isStoreCheckout"> |
| 138 |
<div class="modal-body store-checkout-confirm-body"> |
| 139 |
<h2 class="store-checkout-modal-title">Create Store Checkout</h2> |
| 140 |
<p class="store-checkout-modal-subtitle">Set up a Store Checkout in just one click:</p> |
| 141 |
|
| 142 |
<ul class="store-checkout-feature-list"> |
| 143 |
<li> |
| 144 |
<svg width="15" height="15" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">> |
| 145 |
<circle cx="11" cy="11" r="10.25" stroke="#6E42D3" stroke-width="1.5"/> |
| 146 |
<path d="M7 11.5L9.5 14L15 8.5" stroke="#6E42D3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> |
| 147 |
</svg> |
| 148 |
<span>Checkout Page</span> |
| 149 |
</li> |
| 150 |
<li> |
| 151 |
<svg width="15" height="15" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">> |
| 152 |
<circle cx="11" cy="11" r="10.25" stroke="#6E42D3" stroke-width="1.5"/> |
| 153 |
<path d="M7 11.5L9.5 14L15 8.5" stroke="#6E42D3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> |
| 154 |
</svg> |
| 155 |
<span>Thank You Page</span> |
| 156 |
</li> |
| 157 |
</ul> |
| 158 |
|
| 159 |
<p class="store-checkout-modal-desc">Use ready-made templates from the WPFunnels Library, our custom widget, or shortcodes on each page to set this up easily—no coding needed!</p> |
| 160 |
|
| 161 |
<div class="button-area"> |
| 162 |
<span class="wpfnl-alert box" style="display: inline-block;" :class="alertClass" v-if="isShowAlert">{{ this.alertMessage }}</span> |
| 163 |
<div class="store-checkout-modal-actions"> |
| 164 |
<button type="button" class="btn-cancel" @click="closeFunnelNameModal">Cancel</button> |
| 165 |
<button type="button" class="btn-default btn-create-store-checkout" @click="createFunnel" :disabled="disabled"> |
| 166 |
{{ createFunnelTitle }} |
| 167 |
</button> |
| 168 |
</div> |
| 169 |
</div> |
| 170 |
</div> |
| 171 |
</template> |
| 172 |
|
| 173 |
<!-- Regular funnel name + layout modal --> |
| 174 |
<template v-else> |
| 175 |
<div class="modal-body"> |
| 176 |
<form action=""> |
| 177 |
<div class="wpfnl-form-group"> |
| 178 |
<label for="funnel-name">Name of your funnel</label> |
| 179 |
<input |
| 180 |
type="text" |
| 181 |
name="funnel-name" |
| 182 |
placeholder="Enter your funnel name" |
| 183 |
v-model="funnelName" |
| 184 |
/> |
| 185 |
</div> |
| 186 |
|
| 187 |
<p class="layout-title">Select Funnel layout</p> |
| 188 |
|
| 189 |
<div class="funnels-layout-wrapper"> |
| 190 |
<div |
| 191 |
v-for="(layout, index) in layouts" |
| 192 |
:class="[ |
| 193 |
selectedFunnelLayout?.value === layout.value ? 'active' : '', |
| 194 |
layout.value, |
| 195 |
]" |
| 196 |
class="single-layout layout1" |
| 197 |
@click="selectFunnelLayout(index, layout)" |
| 198 |
:key="index" |
| 199 |
> |
| 200 |
<a href="https://getwpfunnels.com/pricing/" target="_blank" v-if="!isPro && 0 !==index && 1 !==index "><span class="pro-tag"><svg fill="none" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">><circle cx="11" cy="11" r="11" fill="#2FCF5C"/><path fill="#fff" d="M15.209 9.236l-1.587.396-1.983-2.471a.926.926 0 00-1.445 0L8.21 9.63l-1.618-.395a.933.933 0 00-1.124 1.124l1.093 3.842a.618.618 0 00.617.451h7.412a.618.618 0 00.618-.45l1.1-3.843a.932.932 0 00-1.1-1.124zM5.172 8.57a.772.772 0 100-1.545.772.772 0 000 1.544zm11.427 0a.772.772 0 100-1.545.772.772 0 000 1.544zm-5.714-2.626a.772.772 0 100-1.544.772.772 0 000 1.544zm3.706 10.964H7.18a.618.618 0 010-1.236h7.411a.618.618 0 110 1.236z"/></svg></span></a> |
| 201 |
<span class="single-layout-inner" :class="{ 'is-pro': !isPro && 0!==index && 1!==index }"> |
| 202 |
<span class="inner-box"> |
| 203 |
<FunnelLayout1 v-if="'layout1' == layout.value" /> |
| 204 |
<FunnelLayout2 v-if="'layout2' == layout.value" /> |
| 205 |
<FunnelLayout3 v-if="'layout3' == layout.value" /> |
| 206 |
<FunnelLayout4 v-if="'layout4' == layout.value" /> |
| 207 |
<FunnelLayout5 v-if="'layout5' == layout.value" /> |
| 208 |
<FunnelLayout6 v-if="'layout6' == layout.value" /> |
| 209 |
</span> |
| 210 |
</span> |
| 211 |
</div> |
| 212 |
</div> |
| 213 |
|
| 214 |
<div class="button-area"> |
| 215 |
<span class="wpfnl-alert box" style="display: inline-block;" :class="alertClass" v-if="isShowAlert">{{ |
| 216 |
this.alertMessage |
| 217 |
}}</span> |
| 218 |
<button type="submit" @click="createFunnel" :disabled='disabled'> |
| 219 |
{{createFunnelTitle}} |
| 220 |
</button> |
| 221 |
</div> |
| 222 |
</form> |
| 223 |
</div> |
| 224 |
</template> |
| 225 |
</div> |
| 226 |
|
| 227 |
<div class="templates-title-wrapper" v-if="!showStepsPreview && 'other' !== builder"> |
| 228 |
<h2 class="title">{{ isStoreCheckout ? 'Store Checkout Templates' : (totalTemplates > 1 ? totalTemplates + ' Templates' : totalTemplates + ' Template') }}</h2> |
| 229 |
</div> |
| 230 |
|
| 231 |
<div class="wpfnl-create-funnel__templates"> |
| 232 |
|
| 233 |
<div class="create-funnel__single-template create__from-scratch" |
| 234 |
v-if="(showProFilter && !showStepsPreview && !isTemplatePage) || ( 'other' === builder )"> |
| 235 |
<a id="wpfnl-create-funnel" href="#" class="btn-default" @click="showFunnelNameModal" |
| 236 |
v-if="!isAddNewFunnelButtonDisabled"> <PlusIcon /> Start From scratch </a> |
| 237 |
|
| 238 |
<div class="funnel-limit-notice" v-if="isAddNewFunnelButtonDisabled && !isStoreCheckout"> |
| 239 |
<p><b>You have reached your limit and built 3/3 funnels!</b><br/><br/> |
| 240 |
To create unlimited funnels, please upgrade to Pro. |
| 241 |
</p> |
| 242 |
</div> |
| 243 |
|
| 244 |
<div class="funnel-limit-notice" v-if="isAddNewFunnelButtonDisabled && isStoreCheckout"> |
| 245 |
<p><b>You have reached your limit of 3/3 store checkouts!</b><br/><br/> |
| 246 |
To create unlimited store checkouts, please upgrade to Pro. |
| 247 |
</p> |
| 248 |
</div> |
| 249 |
|
| 250 |
<div class="wpfnl-single-remote-wrapper"> |
| 251 |
<div class="wpfnl-single-remote-template"> |
| 252 |
<div class="template-image-wrapper"></div> |
| 253 |
</div> |
| 254 |
<div class="funnel-template-info"> |
| 255 |
<span class="title">title</span> |
| 256 |
</div> |
| 257 |
</div> |
| 258 |
</div> |
| 259 |
|
| 260 |
<template v-if="isAnyPluginMissing == 'no'"> |
| 261 |
<SingleTemplate |
| 262 |
v-for="(data, index) in templates" |
| 263 |
:templatedata="data" |
| 264 |
:active-category="activeCategory" |
| 265 |
:templateType="data.templateType" |
| 266 |
:isPro="data.is_pro" |
| 267 |
:type="type" |
| 268 |
:key="index" |
| 269 |
:isAddNewFunnelButtonDisabled="isAddNewFunnelButtonDisabled" |
| 270 |
@toggleStepsPreview="toggleStepsPreview" |
| 271 |
@initSteps="initSteps" |
| 272 |
@setActiveTemplate="setActiveTemplate" |
| 273 |
v-if="!showStepsPreview" |
| 274 |
/> |
| 275 |
</template> |
| 276 |
|
| 277 |
<div class="create-funnel__single-template wpfnl-missing-plugin-notice" v-else> |
| 278 |
<div v-if="builder === 'gutenberg'"> |
| 279 |
<h4 class="wpfnl-notice-title">Oops! It looks like {{dependencyPlugins[builder].name}} is inactive.</h4> |
| 280 |
<div class="wpfnl-notice-notice-body"> |
| 281 |
<p> |
| 282 |
It seems like you have selected {{ builder.charAt(0).toUpperCase() + builder.slice(1) }} as your preferred page builder, but you |
| 283 |
do not have {{dependencyPlugins[builder].name}} activated on your site. You see, we create funnel templates for |
| 284 |
{{ builder.charAt(0).toUpperCase() + builder.slice(1) }} using {{dependencyPlugins[builder].name}}. |
| 285 |
<br>Please install and activate {{dependencyPlugins[builder].name}} to import funnel templates for {{ builder.charAt(0).toUpperCase() + builder.slice(1) }} |
| 286 |
<a href="#" @click="pluginInstallationAction"> |
| 287 |
Click here to install & activate {{dependencyPlugins[builder].name}} |
| 288 |
<span class="dot-wrapper" v-if="pluginInstallLoader"> |
| 289 |
<span class="dot-one">.</span> |
| 290 |
<span class="dot-two">.</span> |
| 291 |
<span class="dot-three">.</span> |
| 292 |
</span> |
| 293 |
</a> |
| 294 |
</p> |
| 295 |
<p>If you want to create & design funnel pages without using {{dependencyPlugins[builder].name}}, then don't worry. |
| 296 |
<b>You can go ahead and create funnels from scratch using any page builder/editor. It will work just fine.</b></p> |
| 297 |
|
| 298 |
<span class="wpfnl-plugin-installation-error" |
| 299 |
v-html="pluginInstallationErrorMessage"></span> |
| 300 |
</div> |
| 301 |
</div> |
| 302 |
|
| 303 |
<div v-else-if="builder === 'elementor'"> |
| 304 |
<h4 class="wpfnl-notice-title">Oops! It looks like the page builder you selected is inactive.</h4> |
| 305 |
<div class="wpfnl-notice-notice-body"> |
| 306 |
<p> |
| 307 |
It seems like you have selected {{ builder.charAt(0).toUpperCase() + builder.slice(1) }} as your preferred page builder, but you do not have |
| 308 |
the plugin {{dependencyPlugins[builder].name}} activated on your site. <br> |
| 309 |
|
| 310 |
Please install and activate {{ builder.charAt(0).toUpperCase() + builder.slice(1) }} to import ready funnel templates. |
| 311 |
<a href="#" @click="pluginInstallationAction"> |
| 312 |
Click here to install & activate {{ builder.charAt(0).toUpperCase() + builder.slice(1) }} |
| 313 |
<span class="dot-wrapper" v-if="pluginInstallLoader"> |
| 314 |
<span class="dot-one">.</span> |
| 315 |
<span class="dot-two">.</span> |
| 316 |
<span class="dot-three">.</span> |
| 317 |
</span> |
| 318 |
</a> |
| 319 |
</p> |
| 320 |
|
| 321 |
<p>If you want to create & design funnel pages without using {{dependencyPlugins[builder].name}}, then |
| 322 |
don't worry. <b>You can go ahead and create funnels from scratch using any page builder/editor. It will work just fine.</b></p> |
| 323 |
|
| 324 |
|
| 325 |
<span class="wpfnl-plugin-installation-error" |
| 326 |
v-html="pluginInstallationErrorMessage"></span> |
| 327 |
</div> |
| 328 |
</div> |
| 329 |
|
| 330 |
<div v-else-if="builder === 'divi-builder'"> |
| 331 |
<h4 class="wpfnl-notice-title">Oops! It looks like the page builder you selected is inactive.</h4> |
| 332 |
<div class="wpfnl-notice-notice-body"> |
| 333 |
<p> |
| 334 |
It seems like you have selected {{ builder.charAt(0).toUpperCase() + builder.slice(1) }} as your preferred page builder, but you do not have |
| 335 |
the plugin {{dependencyPlugins[builder].name}} activated on your site. <br> |
| 336 |
|
| 337 |
Please install and activate {{ builder.charAt(0).toUpperCase() + builder.slice(1) }} to import ready funnel templates. |
| 338 |
</p> |
| 339 |
|
| 340 |
<p>If you want to create & design funnel pages without using {{dependencyPlugins[builder].name}}, then |
| 341 |
don't worry. <b>You can go ahead and create funnels from scratch using any page builder/editor. It will work just fine.</b></p> |
| 342 |
|
| 343 |
|
| 344 |
<span class="wpfnl-plugin-installation-error" |
| 345 |
v-html="pluginInstallationErrorMessage"></span> |
| 346 |
</div> |
| 347 |
</div> |
| 348 |
|
| 349 |
<div v-else-if="builder === 'oxygen'"> |
| 350 |
<h4 class="wpfnl-notice-title">Oops! It looks like the page builder you selected is inactive.</h4> |
| 351 |
<div class="wpfnl-notice-notice-body"> |
| 352 |
<p> |
| 353 |
It seems like you have selected Oxygen builder as your preferred page builder, but you do not have |
| 354 |
the plugin Oxygen builder activated on your site. <br> |
| 355 |
|
| 356 |
Please install and activate Oxygen builder to import ready funnel templates. |
| 357 |
</p> |
| 358 |
|
| 359 |
<p>If you want to create & design funnel pages without using Oxygen builder, then |
| 360 |
don't worry. <b>You can go ahead and create funnels from scratch using any page builder/editor. It will work just fine.</b></p> |
| 361 |
|
| 362 |
|
| 363 |
<span class="wpfnl-plugin-installation-error" |
| 364 |
v-html="pluginInstallationErrorMessage"></span> |
| 365 |
</div> |
| 366 |
</div> |
| 367 |
<div v-else-if="builder === 'bricks'"> |
| 368 |
<h4 class="wpfnl-notice-title">Oops! It looks like the page builder you selected is inactive.</h4> |
| 369 |
<div class="wpfnl-notice-notice-body"> |
| 370 |
<p> |
| 371 |
It seems like you have selected Bricks builder as your preferred page builder, but you do not have |
| 372 |
the Bricks theme activated on your site. <br> |
| 373 |
|
| 374 |
Please install and activate Bricks theme to import ready funnel templates. |
| 375 |
</p> |
| 376 |
|
| 377 |
<p>If you want to create & design funnel pages without using Bricks theme, then |
| 378 |
don't worry. <b>You can go ahead and create funnels from scratch using any page builder/editor. It will work just fine.</b></p> |
| 379 |
|
| 380 |
|
| 381 |
<span class="wpfnl-plugin-installation-error" |
| 382 |
v-html="pluginInstallationErrorMessage"></span> |
| 383 |
</div> |
| 384 |
</div> |
| 385 |
</div> |
| 386 |
|
| 387 |
<div class="create-funnel__single-template wpfnl-missing-plugin-notice" v-if="builder === 'other' "> |
| 388 |
<div> |
| 389 |
|
| 390 |
<h4 class="wpfnl-notice-title">Create your funnel with shortcodes!</h4> |
| 391 |
<div class="wpfnl-notice-notice-body"> |
| 392 |
<p> |
| 393 |
Hello there. We believe you are using a page builder other than Gutenberg, Elementor, Divi, Oxygen, or Bricks. |
| 394 |
</p> |
| 395 |
<p> |
| 396 |
In this case, to make your funnel function, you should be using shortcodes on specific cases which include |
| 397 |
</p> |
| 398 |
|
| 399 |
<li> |
| 400 |
The CTA buttons and opt-in form on the Landing page (or custom page) |
| 401 |
</li> |
| 402 |
<li> |
| 403 |
The checkout form on the Checkout page |
| 404 |
</li> |
| 405 |
<li> |
| 406 |
The order details on the Thank you page |
| 407 |
</li> |
| 408 |
<li> |
| 409 |
Offer Accept/Reject button in the Upsell & Downsell pages. |
| 410 |
</li> |
| 411 |
<br> |
| 412 |
<p> |
| 413 |
And it's really simple. |
| 414 |
</p> |
| 415 |
|
| 416 |
<ol style="padding-left: 15px;"> |
| 417 |
<li> |
| 418 |
Find the list of shortcodes |
| 419 |
<a href="https://getwpfunnels.com/docs/wpfunnels-shortcodes/" target="_blank"> |
| 420 |
here |
| 421 |
</a> |
| 422 |
</li> |
| 423 |
<li> |
| 424 |
Choose the one you want to use and copy it. |
| 425 |
</li> |
| 426 |
<li> |
| 427 |
Paste it where you want to place the element when editing a funnel page. |
| 428 |
</li> |
| 429 |
<li> |
| 430 |
Save and preview to see it in action. |
| 431 |
</li> |
| 432 |
</ol> |
| 433 |
|
| 434 |
<br> |
| 435 |
<p> |
| 436 |
You may utilize associated parameters to customize the elements. |
| 437 |
</p> |
| 438 |
</div> |
| 439 |
</div> |
| 440 |
</div> |
| 441 |
|
| 442 |
<div class="steps-preview-wrapper" v-if="showStepsPreview"> |
| 443 |
<TemplatePreview :template="activeTemplate" :view="responsiveView"/> |
| 444 |
</div> |
| 445 |
</div> |
| 446 |
</div> |
| 447 |
</div> |
| 448 |
<!-- /.funnel-templates-content --> |
| 449 |
</div> |
| 450 |
<!-- /.funnel-templates-body --> |
| 451 |
|
| 452 |
</div> |
| 453 |
</div> |
| 454 |
|
| 455 |
</div> |
| 456 |
</div> |
| 457 |
</template> |
| 458 |
|
| 459 |
<script> |
| 460 |
import SingleTemplate from './SingleTemplate.vue' |
| 461 |
import CategoryNav from './CategoryNav.vue' |
| 462 |
import SingleStep from './SingleStep.vue' |
| 463 |
import SingleStepPreview from './SingleStepPreview.vue' |
| 464 |
import StepImporter from './StepImporter.vue' |
| 465 |
import apiFetch from '@wordpress/api-fetch' |
| 466 |
import {addQueryArgs} from "@wordpress/url"; |
| 467 |
import DoubleAngleLeft from '../../../src/components/icons/DoubleAngleLeft.vue' |
| 468 |
import PlusIcon from '../../../src/components/icons/PlusIcon.vue' |
| 469 |
|
| 470 |
import FunnelLayout1 from '../../../src/components/icons/FunnelLayout1.vue' |
| 471 |
import FunnelLayout2 from '../../../src/components/icons/FunnelLayout2.vue' |
| 472 |
import FunnelLayout3 from '../../../src/components/icons/FunnelLayout3.vue' |
| 473 |
import FunnelLayout4 from '../../../src/components/icons/FunnelLayout4.vue' |
| 474 |
import FunnelLayout5 from '../../../src/components/icons/FunnelLayout5.vue' |
| 475 |
import FunnelLayout6 from '../../../src/components/icons/FunnelLayout6.vue' |
| 476 |
import ResponsiveSwitcher from './ResponsiveSwitcher.vue' |
| 477 |
import TemplatePreview from './TemplatePreview.vue' |
| 478 |
|
| 479 |
var j = jQuery.noConflict() |
| 480 |
const nonce = window.template_library_object.nonce |
| 481 |
apiFetch.use(apiFetch.createNonceMiddleware(nonce)) |
| 482 |
|
| 483 |
export default { |
| 484 |
name: 'TemplatesLibrary', |
| 485 |
components: { |
| 486 |
SingleTemplate, |
| 487 |
CategoryNav, |
| 488 |
StepImporter, |
| 489 |
SingleStepPreview, |
| 490 |
DoubleAngleLeft, |
| 491 |
SingleStep, |
| 492 |
PlusIcon, |
| 493 |
FunnelLayout1, |
| 494 |
FunnelLayout2, |
| 495 |
FunnelLayout3, |
| 496 |
FunnelLayout4, |
| 497 |
FunnelLayout5, |
| 498 |
FunnelLayout6, |
| 499 |
ResponsiveSwitcher, |
| 500 |
TemplatePreview |
| 501 |
}, |
| 502 |
data: function () { |
| 503 |
return { |
| 504 |
showModal: j('#template-library-modal').attr('data-modal-visibility'), |
| 505 |
proUrl: window.template_library_object.pro_url, |
| 506 |
isRemoteFunnel : 'yes' === window.template_library_object.isRemote ? true : false, |
| 507 |
isStoreCheckout: window.template_library_object.isStoreCheckout || false, |
| 508 |
templates: [], |
| 509 |
activeTemplate: '', |
| 510 |
allTemplates: [], |
| 511 |
categories: [], |
| 512 |
stepCategories: [], |
| 513 |
steps: [], |
| 514 |
allSteps: [], |
| 515 |
totalTemplates: 0, |
| 516 |
loader: true, |
| 517 |
templateCatFilterLoader: false, |
| 518 |
message: '', |
| 519 |
isProTemplateSelected: false, |
| 520 |
loaderMessage: 'Import', |
| 521 |
activeCategory: 'all', |
| 522 |
activeStepCategory: 'all', |
| 523 |
activeStep: 'landing', |
| 524 |
templatesType: 'all', |
| 525 |
alertClass : 'wpfnl-success', |
| 526 |
isShowAlert : false, |
| 527 |
alertMessage : '', |
| 528 |
templatesCatType: 'woocommerce', |
| 529 |
selectedStep: 'landing', |
| 530 |
stepTemplateType: 'all', |
| 531 |
showProFilter: true, |
| 532 |
showStepsPreview: false, |
| 533 |
isTemplatePage: window.template_library_object.isTemplatePage, |
| 534 |
image_path: window.template_library_object.image_path, |
| 535 |
globalImportProgress: '', |
| 536 |
supportedSteps : window.template_library_object.supported_steps, |
| 537 |
disabled: false, |
| 538 |
templateNewName: '', |
| 539 |
funnelName: '', |
| 540 |
isPro : window.template_library_object.is_pro, |
| 541 |
createFunnelTitle: window.template_library_object.isStoreCheckout ? 'Create Store Checkout' : 'Create Funnel', |
| 542 |
totalFunnels: window.WPFunnelVars.totalFunnels, |
| 543 |
countActiveFunnels: window.WPFunnelVars.count_active_funnels, |
| 544 |
totalAllowedFunnels: window.WPFunnelVars.totalAllowedFunnels, |
| 545 |
totalStoreCheckouts: window.WPFunnelVars.totalStoreCheckouts || 0, |
| 546 |
totalAllowedStoreCheckouts: window.WPFunnelVars.totalAllowedStoreCheckouts || 3, |
| 547 |
dependencyPlugins: window.WPFunnelVars.dependencyPlugins, |
| 548 |
isAnyPluginMissing: window.WPFunnelVars.isAnyPluginMissing, |
| 549 |
isProActivated: window.WPFunnelVars.isProActivated, |
| 550 |
isWcActivated: window.WPFunnelVars.is_wc_installed, |
| 551 |
isLmsActivated: window.WPFunnelVars.isLmsActivated, |
| 552 |
builder: window.WPFunnelVars.builder, |
| 553 |
pluginInstallLoader: false, |
| 554 |
pluginInstallationErrorMessage: '', |
| 555 |
funnelType: window.WPFunnelVars.global_funnel_type, |
| 556 |
type: 'wc', |
| 557 |
selectedType: 'wc', |
| 558 |
tempalateTypes : [], |
| 559 |
template_type : window.template_library_object.template_type, |
| 560 |
activeTab : 'templates', |
| 561 |
layouts : [ |
| 562 |
{ |
| 563 |
name : 'Layout 1', |
| 564 |
value:'layout1', |
| 565 |
steps : [ |
| 566 |
{ |
| 567 |
name : 'Landing', |
| 568 |
value:'landing', |
| 569 |
pos_x: 156, |
| 570 |
pos_y: 258 |
| 571 |
}, |
| 572 |
{ |
| 573 |
name : 'Thank You', |
| 574 |
value:'thankyou', |
| 575 |
pos_x: 399, |
| 576 |
pos_y: 258 |
| 577 |
} |
| 578 |
] |
| 579 |
}, |
| 580 |
{ |
| 581 |
name : 'Layout 2', |
| 582 |
value:'layout2', |
| 583 |
steps : [ |
| 584 |
{ |
| 585 |
name : 'Landing', |
| 586 |
value:'landing', |
| 587 |
pos_x: 156, |
| 588 |
pos_y: 258 |
| 589 |
}, |
| 590 |
{ |
| 591 |
name : 'Checkout', |
| 592 |
value:'checkout', |
| 593 |
pos_x: 399, |
| 594 |
pos_y: 258 |
| 595 |
}, |
| 596 |
{ |
| 597 |
name : 'Thank You', |
| 598 |
value:'thankyou', |
| 599 |
pos_x: 658, |
| 600 |
pos_y: 258 |
| 601 |
} |
| 602 |
] |
| 603 |
}, |
| 604 |
{ |
| 605 |
name : 'Layout 3', |
| 606 |
value:'layout3', |
| 607 |
steps : [ |
| 608 |
{ |
| 609 |
name : 'Landing', |
| 610 |
value:'landing', |
| 611 |
pos_x: 156, |
| 612 |
pos_y: 258 |
| 613 |
}, |
| 614 |
{ |
| 615 |
name : 'Checkout', |
| 616 |
value:'checkout', |
| 617 |
pos_x: 399, |
| 618 |
pos_y: 258 |
| 619 |
}, |
| 620 |
{ |
| 621 |
name : 'Upsell', |
| 622 |
value:'upsell', |
| 623 |
pos_x: 658, |
| 624 |
pos_y: 258 |
| 625 |
}, |
| 626 |
{ |
| 627 |
name : 'Downsell', |
| 628 |
value:'downsell', |
| 629 |
pos_x: 917, |
| 630 |
pos_y: 258 |
| 631 |
}, |
| 632 |
{ |
| 633 |
name : 'Thank You', |
| 634 |
value:'thankyou', |
| 635 |
pos_x: 1175, |
| 636 |
pos_y: 258 |
| 637 |
} |
| 638 |
] |
| 639 |
}, |
| 640 |
{ |
| 641 |
name : 'Layout 4', |
| 642 |
value:'layout4', |
| 643 |
steps : [ |
| 644 |
{ |
| 645 |
name : 'Landing', |
| 646 |
value:'landing', |
| 647 |
pos_x: 156, |
| 648 |
pos_y: 258 |
| 649 |
}, |
| 650 |
{ |
| 651 |
name : 'Checkout', |
| 652 |
value:'checkout', |
| 653 |
pos_x: 399, |
| 654 |
pos_y: 258 |
| 655 |
}, |
| 656 |
{ |
| 657 |
name : 'Upsell', |
| 658 |
value:'upsell', |
| 659 |
pos_x: 658, |
| 660 |
pos_y: 258, |
| 661 |
isCondition : true, |
| 662 |
trueCondition : [ |
| 663 |
{ |
| 664 |
name : 'Thank You', |
| 665 |
value:'thankyou', |
| 666 |
pos_x: 1059, |
| 667 |
pos_y: 111, |
| 668 |
} |
| 669 |
], |
| 670 |
falseCondition : [ |
| 671 |
{ |
| 672 |
name : 'Downsell', |
| 673 |
value:'downsell', |
| 674 |
pos_x: 1059, |
| 675 |
pos_y: 447, |
| 676 |
}, |
| 677 |
{ |
| 678 |
name : 'Thank You', |
| 679 |
value:'thankyou', |
| 680 |
pos_x: 1317, |
| 681 |
pos_y: 447, |
| 682 |
} |
| 683 |
] |
| 684 |
} |
| 685 |
|
| 686 |
] |
| 687 |
}, |
| 688 |
{ |
| 689 |
name : 'Layout 5', |
| 690 |
value:'layout5', |
| 691 |
steps : [ |
| 692 |
{ |
| 693 |
name : 'Landing', |
| 694 |
value:'landing', |
| 695 |
pos_x: 156, |
| 696 |
pos_y: 258 |
| 697 |
}, |
| 698 |
{ |
| 699 |
name : 'Checkout', |
| 700 |
value:'checkout', |
| 701 |
isCondition : true, |
| 702 |
pos_x: 399, |
| 703 |
pos_y: 258, |
| 704 |
trueCondition : [ |
| 705 |
{ |
| 706 |
name : 'Upsell', |
| 707 |
value: 'upsell', |
| 708 |
pos_x: 800, |
| 709 |
pos_y: 111, |
| 710 |
}, |
| 711 |
{ |
| 712 |
name : 'Thank You', |
| 713 |
value:'thankyou', |
| 714 |
pos_x: 1059, |
| 715 |
pos_y: 111, |
| 716 |
} |
| 717 |
], |
| 718 |
falseCondition : [ |
| 719 |
{ |
| 720 |
name : 'Downsell', |
| 721 |
value:'downsell', |
| 722 |
pos_x: 800, |
| 723 |
pos_y: 447, |
| 724 |
}, |
| 725 |
{ |
| 726 |
name : 'Thank You', |
| 727 |
value:'thankyou', |
| 728 |
pos_x: 1059, |
| 729 |
pos_y: 447, |
| 730 |
} |
| 731 |
] |
| 732 |
} |
| 733 |
] |
| 734 |
}, |
| 735 |
{ |
| 736 |
name : 'Layout 6', |
| 737 |
value:'layout6', |
| 738 |
steps : [ |
| 739 |
{ |
| 740 |
name : 'Landing', |
| 741 |
value:'landing', |
| 742 |
pos_x: 156, |
| 743 |
pos_y: 258, |
| 744 |
isCondition : true, |
| 745 |
trueCondition : [ |
| 746 |
{ |
| 747 |
name : 'Thank You', |
| 748 |
value:'thankyou', |
| 749 |
pos_x: 556, |
| 750 |
pos_y: 111 |
| 751 |
} |
| 752 |
], |
| 753 |
falseCondition : [ |
| 754 |
{ |
| 755 |
name : 'Custom', |
| 756 |
value:'custom', |
| 757 |
pos_x: 556, |
| 758 |
pos_y: 447 |
| 759 |
}, |
| 760 |
{ |
| 761 |
name : 'Thank You', |
| 762 |
value:'thankyou', |
| 763 |
pos_x: 814, |
| 764 |
pos_y: 447 |
| 765 |
} |
| 766 |
] |
| 767 |
}, |
| 768 |
|
| 769 |
|
| 770 |
] |
| 771 |
}, |
| 772 |
], |
| 773 |
selectedFunnelLayout : {}, |
| 774 |
responsiveView: 'desktop', |
| 775 |
syncingLibrary: false, |
| 776 |
} |
| 777 |
|
| 778 |
}, |
| 779 |
|
| 780 |
computed: { |
| 781 |
isAddNewFunnelButtonDisabled: function () { |
| 782 |
if (!this.isProActivated) { |
| 783 |
if (this.isStoreCheckout) { |
| 784 |
return parseInt(this.totalStoreCheckouts) >= parseInt(this.totalAllowedStoreCheckouts); |
| 785 |
} |
| 786 |
if (parseInt(this.countActiveFunnels) >= parseInt(this.totalAllowedFunnels)) { |
| 787 |
return true |
| 788 |
} |
| 789 |
} |
| 790 |
return false |
| 791 |
} |
| 792 |
}, |
| 793 |
mounted() { |
| 794 |
j(document).on( |
| 795 |
'wp-plugin-install-success', |
| 796 |
this.pluginInstalledSuccess |
| 797 |
); |
| 798 |
|
| 799 |
j(document).on( |
| 800 |
'wp-plugin-install-error', |
| 801 |
this.pluginInstalledError |
| 802 |
); |
| 803 |
if(!this.isRemoteFunnel) { |
| 804 |
this.getTemplate(); |
| 805 |
} else { |
| 806 |
this.loader = false |
| 807 |
} |
| 808 |
|
| 809 |
}, |
| 810 |
|
| 811 |
methods: { |
| 812 |
methods: { |
| 813 |
isOnStoreCheckoutPage() { |
| 814 |
console.log(isStoreCheckout); |
| 815 |
} |
| 816 |
}, |
| 817 |
selectFunnelLayout: function (index, value) { |
| 818 |
if(this.isPro || index === 0 || index === 1 ){ |
| 819 |
if( this.selectedFunnelLayout == value){ |
| 820 |
this.selectedFunnelLayout = {}; |
| 821 |
}else { |
| 822 |
if('lead' == this.selectedType ){ |
| 823 |
if( (index === 0 && !this.isPro) || ((index === 0 || index === 5) && this.isPro) ){ |
| 824 |
this.selectedFunnelLayout = value; |
| 825 |
}else{ |
| 826 |
this.isShowAlert = true; |
| 827 |
this.alertClass = 'wpfnl-error'; |
| 828 |
this.alertMessage = 'This is only for sales funnel'; |
| 829 |
|
| 830 |
setTimeout(() => { |
| 831 |
this.isShowAlert = false |
| 832 |
}, 3000); |
| 833 |
this.selectedFunnelLayout = {}; |
| 834 |
return; |
| 835 |
} |
| 836 |
}else{ |
| 837 |
this.isShowAlert = false; |
| 838 |
this.alertMessage = ''; |
| 839 |
this.alertClass = ''; |
| 840 |
this.selectedFunnelLayout = value; |
| 841 |
} |
| 842 |
} |
| 843 |
} |
| 844 |
}, |
| 845 |
|
| 846 |
getTemplate: function (){ |
| 847 |
if( this.selectedType ){ |
| 848 |
apiFetch({ |
| 849 |
path: addQueryArgs( `${window.template_library_object.rest_api_url}wpfunnels/v1/templates/get_templates`, { |
| 850 |
type: this.selectedType, |
| 851 |
store_checkout: this.isStoreCheckout ? 'yes' : 'no', |
| 852 |
} ), |
| 853 |
method: 'GET' |
| 854 |
}).then(response => { |
| 855 |
if (response.success) { |
| 856 |
let templates = response.templates |
| 857 |
let steps = response.steps |
| 858 |
|
| 859 |
// Filter for Store Checkout - only show templates with checkout and thankyou |
| 860 |
if (this.isStoreCheckout) { |
| 861 |
templates = templates.filter(template => { |
| 862 |
if (!template.steps) return false; |
| 863 |
let hasCheckout = template.steps.some(step => step.step_type === 'checkout'); |
| 864 |
let hasThankyou = template.steps.some(step => step.step_type === 'thankyou'); |
| 865 |
return hasCheckout && hasThankyou; |
| 866 |
}); |
| 867 |
|
| 868 |
steps = steps.filter(step => { |
| 869 |
return step.step_type === 'checkout' || step.step_type === 'thankyou'; |
| 870 |
}); |
| 871 |
} |
| 872 |
|
| 873 |
if (this.isStoreCheckout) { |
| 874 |
templates = templates.sort((a, b) => a.ID - b.ID); |
| 875 |
} |
| 876 |
this.templates = templates |
| 877 |
this.allTemplates = templates |
| 878 |
this.steps = steps |
| 879 |
this.allSteps = steps |
| 880 |
this.templatesType = 'all' |
| 881 |
this.activeCategory = 'all' |
| 882 |
this.categories = response.categories |
| 883 |
this.stepCategories = response.categories |
| 884 |
this.loader = false |
| 885 |
this.templateCatFilterLoader = false; |
| 886 |
if (response.templates) { |
| 887 |
this.totalTemplates = this.isAnyPluginMissing === 'yes' ? 0 : templates.length |
| 888 |
} |
| 889 |
|
| 890 |
} |
| 891 |
|
| 892 |
}) |
| 893 |
} |
| 894 |
|
| 895 |
}, |
| 896 |
|
| 897 |
syncLibrary: function () { |
| 898 |
this.syncingLibrary = true; |
| 899 |
wpAjaxHelperRequest('clear-templates', {}) |
| 900 |
.success(() => { |
| 901 |
this.getTemplate(); |
| 902 |
this.syncingLibrary = false; |
| 903 |
}) |
| 904 |
.error(() => { |
| 905 |
this.syncingLibrary = false; |
| 906 |
}); |
| 907 |
}, |
| 908 |
|
| 909 |
createFunnel: function (e) { |
| 910 |
e.preventDefault(); |
| 911 |
if( !this.isStoreCheckout && !this.funnelName ){ |
| 912 |
this.isShowAlert = true; |
| 913 |
this.alertClass = 'wpfnl-error'; |
| 914 |
this.alertMessage = 'Please enter funnel name'; |
| 915 |
|
| 916 |
setTimeout(() => { |
| 917 |
this.isShowAlert = false |
| 918 |
}, 2500); |
| 919 |
|
| 920 |
return; |
| 921 |
} |
| 922 |
|
| 923 |
if( this.isStoreCheckout && !this.funnelName ){ |
| 924 |
this.funnelName = 'Store Checkout'; |
| 925 |
} |
| 926 |
|
| 927 |
this.disabled = true; |
| 928 |
this.loader = true; |
| 929 |
this.createFunnelTitle = this.isStoreCheckout |
| 930 |
? WPFunnelVars.getText?.creating_store_checkout |
| 931 |
: WPFunnelVars.getText?.creating_funnel; |
| 932 |
var payload = { |
| 933 |
funnelName: this.funnelName, |
| 934 |
type : this.type, |
| 935 |
selectedFunnelLayout : this.selectedFunnelLayout, |
| 936 |
is_store_checkout: this.isStoreCheckout ? true : false, |
| 937 |
}; |
| 938 |
wpAjaxHelperRequest("create-funnel", payload) |
| 939 |
.success(function (response) { |
| 940 |
window.location.href = response.redirectUrl; |
| 941 |
this.disabled = false; |
| 942 |
}) |
| 943 |
.error(function (response) { |
| 944 |
|
| 945 |
}); |
| 946 |
}, |
| 947 |
|
| 948 |
createFunnelWithSingleStep: function () { |
| 949 |
|
| 950 |
this.disabled = true; |
| 951 |
this.createFunnelTitle = "Creating Funnel..." |
| 952 |
var payload = { |
| 953 |
funnelName: this.funnelName, |
| 954 |
type : this.type, |
| 955 |
}; |
| 956 |
wpAjaxHelperRequest("create-funnel", payload) |
| 957 |
.success(function (response) { |
| 958 |
window.location.href = response.redirectUrl; |
| 959 |
this.disabled = false; |
| 960 |
}) |
| 961 |
.error(function (response) { |
| 962 |
|
| 963 |
}); |
| 964 |
}, |
| 965 |
|
| 966 |
showFunnelNameModal: function (e) { |
| 967 |
e.preventDefault() |
| 968 |
|
| 969 |
j('.wpfnl-create-funnel__templates-wrapper .not-clickable-overlay').fadeIn(); |
| 970 |
j('.wpfnl-create-funnel__templates-wrapper .create-funnel-name-modal').addClass('show'); |
| 971 |
}, |
| 972 |
|
| 973 |
closeFunnelNameModal: function (e) { |
| 974 |
e.preventDefault() |
| 975 |
j('.wpfnl-create-funnel__templates-wrapper .not-clickable-overlay').fadeOut(); |
| 976 |
j('.wpfnl-create-funnel__templates-wrapper .create-funnel-name-modal').removeClass('show'); |
| 977 |
this.selectedFunnelLayout = {}; |
| 978 |
}, |
| 979 |
|
| 980 |
startImportTemplate: function (e) { |
| 981 |
e.preventDefault(); |
| 982 |
if (this.isAddNewFunnelButtonDisabled) return false; |
| 983 |
|
| 984 |
this.disabled = true; |
| 985 |
|
| 986 |
let data = { |
| 987 |
action : 'wpfunnel_import_funnel', |
| 988 |
steps : this.steps, |
| 989 |
name : j('.import-funnel-name input').val() ? j('.import-funnel-name input').val() : this.activeTemplate.title, |
| 990 |
source : 'remote', |
| 991 |
remoteID: this.activeTemplate.ID, |
| 992 |
type : this.type, |
| 993 |
is_store_checkout: this.isStoreCheckout ? true : false, |
| 994 |
}, |
| 995 |
that = this, |
| 996 |
_steps = this.filterSteps(this.steps); |
| 997 |
|
| 998 |
that.loaderMessage = 'Please Wait...', |
| 999 |
this.activeTemplate.title = data.name; |
| 1000 |
|
| 1001 |
wpAjaxHelperRequest("wpfunnel-import-funnel", data) |
| 1002 |
.success(function (response) { |
| 1003 |
let looper = j.Deferred().resolve(), |
| 1004 |
first_step_id = 0, |
| 1005 |
importedSteps = []; |
| 1006 |
j.when.apply(j, j.map(_steps, function (step, index) { |
| 1007 |
if (that.shouldImportStep(step.step_type)) { |
| 1008 |
looper = looper.then(function () { |
| 1009 |
return that.createStep(step, response.funnelID, index, that).then(function(stepResponse) { |
| 1010 |
importedSteps.push(stepResponse.stepID); |
| 1011 |
}); |
| 1012 |
}); |
| 1013 |
} |
| 1014 |
return looper; |
| 1015 |
})).then(function () { |
| 1016 |
that.afterFunnelCreationRedirect(response.funnelID, importedSteps); |
| 1017 |
}); |
| 1018 |
}) |
| 1019 |
.error(function (response) { |
| 1020 |
console.log("Uh, oh!"); |
| 1021 |
console.log(response.statusText); |
| 1022 |
}); |
| 1023 |
}, |
| 1024 |
|
| 1025 |
createStep: function (step, funnelID, index, that, funnelData) { |
| 1026 |
let deferred = j.Deferred(), |
| 1027 |
payload = { |
| 1028 |
'step' : step, |
| 1029 |
'funnelID' : funnelID, |
| 1030 |
'source' : 'remote', |
| 1031 |
'funnelData': JSON.stringify(funnelData), |
| 1032 |
'importType': 'templates', |
| 1033 |
}; |
| 1034 |
apiFetch({ |
| 1035 |
path: `${window.WPFunnelVars.rest_api_url}wpfunnels/v1/steps/wpfunnel-import-step`, |
| 1036 |
method: 'POST', |
| 1037 |
data: payload |
| 1038 |
}) |
| 1039 |
.then(function(response) { |
| 1040 |
that.loaderMessage = `Importing Step: ` + (parseInt(index) + 1) |
| 1041 |
deferred.resolve(response) |
| 1042 |
}) |
| 1043 |
.catch(function(error) { |
| 1044 |
deferred.reject(response) |
| 1045 |
}) |
| 1046 |
return deferred.promise(); |
| 1047 |
}, |
| 1048 |
|
| 1049 |
afterFunnelCreationRedirect: function (funnelId, importedSteps) { |
| 1050 |
var payload = { |
| 1051 |
'funnelID': funnelId, |
| 1052 |
'source': 'remote', |
| 1053 |
'importedSteps': importedSteps || [], |
| 1054 |
'is_store_checkout': this.isStoreCheckout ? true : false, |
| 1055 |
}; |
| 1056 |
wpAjaxHelperRequest("wpfunnel-after-funnel-creation", payload) |
| 1057 |
.success(function (response) { |
| 1058 |
window.location = response.redirectLink |
| 1059 |
}) |
| 1060 |
.error(function (response) { |
| 1061 |
console.log(response) |
| 1062 |
}); |
| 1063 |
}, |
| 1064 |
|
| 1065 |
doCatFilter: function (value) { |
| 1066 |
this.activeCategory = value === '' ? 'all' : value |
| 1067 |
|
| 1068 |
if (value !== '') { |
| 1069 |
this.templates = this.allTemplates.filter(function (template) { |
| 1070 |
if( null !== template.wpf_funnel_industry ) { |
| 1071 |
if( 'slug' in template.wpf_funnel_industry ){ |
| 1072 |
if( 'all' === value ){ |
| 1073 |
return true; |
| 1074 |
}else{ |
| 1075 |
return template.wpf_funnel_industry.slug === value; |
| 1076 |
} |
| 1077 |
} |
| 1078 |
} |
| 1079 |
|
| 1080 |
}); |
| 1081 |
}else { |
| 1082 |
this.templates = this.allTemplates |
| 1083 |
} |
| 1084 |
|
| 1085 |
// Apply Store Checkout filter if on Store Checkout page |
| 1086 |
if (this.isStoreCheckout) { |
| 1087 |
this.templates = this.templates.filter(template => { |
| 1088 |
if (!template.steps) return false; |
| 1089 |
let hasCheckout = template.steps.some(step => step.step_type === 'checkout'); |
| 1090 |
let hasThankyou = template.steps.some(step => step.step_type === 'thankyou'); |
| 1091 |
return hasCheckout && hasThankyou; |
| 1092 |
}); |
| 1093 |
} |
| 1094 |
|
| 1095 |
this.totalTemplates = this.templates.length |
| 1096 |
}, |
| 1097 |
|
| 1098 |
doStepCatFilter: function (value) { |
| 1099 |
this.activeStepCategory = value === '' ? 'all' : value |
| 1100 |
let activeStep = this.activeStep |
| 1101 |
let isStoreCheckout = this.isStoreCheckout |
| 1102 |
if (value !== '') { |
| 1103 |
this.steps = this.allSteps.filter(function (step) { |
| 1104 |
let matchesCategory = step.industry.slug === value && step.step_type === activeStep; |
| 1105 |
// Apply Store Checkout filter |
| 1106 |
if (isStoreCheckout) { |
| 1107 |
matchesCategory = matchesCategory && (step.step_type === 'checkout' || step.step_type === 'thankyou'); |
| 1108 |
} |
| 1109 |
return matchesCategory; |
| 1110 |
}); |
| 1111 |
} else { |
| 1112 |
this.steps = this.allSteps; |
| 1113 |
// Apply Store Checkout filter |
| 1114 |
if (isStoreCheckout) { |
| 1115 |
this.steps = this.steps.filter(step => { |
| 1116 |
return step.step_type === 'checkout' || step.step_type === 'thankyou'; |
| 1117 |
}); |
| 1118 |
} |
| 1119 |
} |
| 1120 |
}, |
| 1121 |
|
| 1122 |
setActiveStep: function (value) { |
| 1123 |
this.activeStep = value; |
| 1124 |
}, |
| 1125 |
|
| 1126 |
doStepFilter: function (value) { |
| 1127 |
this.activeStep = value |
| 1128 |
// this.steps = this.allSteps.filter(function (step) { |
| 1129 |
// return step.step_type === value; |
| 1130 |
// }); |
| 1131 |
}, |
| 1132 |
|
| 1133 |
doStepFreeProFilter: function (value) { |
| 1134 |
this.stepTemplateType = value |
| 1135 |
let isStoreCheckout = this.isStoreCheckout |
| 1136 |
this.steps = this.allSteps.filter(function (step) { |
| 1137 |
let matchesType = value === 'pro' ? step.is_pro : !step.is_pro; |
| 1138 |
// Apply Store Checkout filter |
| 1139 |
if (isStoreCheckout) { |
| 1140 |
matchesType = matchesType && (step.step_type === 'checkout' || step.step_type === 'thankyou'); |
| 1141 |
} |
| 1142 |
return matchesType; |
| 1143 |
}); |
| 1144 |
}, |
| 1145 |
|
| 1146 |
doFreeProFilter: function (value) { |
| 1147 |
this.templatesType = value |
| 1148 |
let activeCategory = this.activeCategory |
| 1149 |
let isStoreCheckout = this.isStoreCheckout |
| 1150 |
this.templates = this.allTemplates.filter(function (template) { |
| 1151 |
let matchesCategory = (activeCategory === 'all' || template.wpf_funnel_industry?.slug === activeCategory); |
| 1152 |
let matchesType = ( |
| 1153 |
value === 'all' || |
| 1154 |
(value === 'pro' && 'pro' === template.templateType) || |
| 1155 |
(value === 'free' && 'free' === template.templateType) || |
| 1156 |
(value === 'freemium' && 'freemium' === template.templateType ) |
| 1157 |
); |
| 1158 |
let matchesStoreCheckout = true; |
| 1159 |
|
| 1160 |
// Apply Store Checkout filter |
| 1161 |
if (isStoreCheckout && template.steps) { |
| 1162 |
let hasCheckout = template.steps.some(step => step.step_type === 'checkout'); |
| 1163 |
let hasThankyou = template.steps.some(step => step.step_type === 'thankyou'); |
| 1164 |
matchesStoreCheckout = hasCheckout && hasThankyou; |
| 1165 |
} |
| 1166 |
|
| 1167 |
return matchesCategory && matchesType && matchesStoreCheckout; |
| 1168 |
}); |
| 1169 |
this.totalTemplates = this.templates.length |
| 1170 |
}, |
| 1171 |
|
| 1172 |
doTemplateCatFilter: function (e) { |
| 1173 |
this.templateCatFilterLoader = true; |
| 1174 |
|
| 1175 |
this.selectedType = this.type |
| 1176 |
// this.doCatFilter('') |
| 1177 |
if(!this.isRemoteFunnel) { |
| 1178 |
this.getTemplate(); |
| 1179 |
}else{ |
| 1180 |
this.templateCatFilterLoader = false; |
| 1181 |
} |
| 1182 |
|
| 1183 |
}, |
| 1184 |
|
| 1185 |
toggleLoader: function (e) { |
| 1186 |
this.loader = !this.loader |
| 1187 |
}, |
| 1188 |
|
| 1189 |
showLoaderMessage: function (e, message) { |
| 1190 |
this.message = message |
| 1191 |
}, |
| 1192 |
|
| 1193 |
getBackBtnValue: function (params) { |
| 1194 |
this.showBackBtn = params; |
| 1195 |
}, |
| 1196 |
|
| 1197 |
hideProFilter: function () { |
| 1198 |
this.showProFilter = !this.showProFilter |
| 1199 |
}, |
| 1200 |
|
| 1201 |
toggleStepsPreview: function () { |
| 1202 |
this.showStepsPreview = !this.showStepsPreview; |
| 1203 |
}, |
| 1204 |
|
| 1205 |
initSteps: function (steps) { |
| 1206 |
// Filter steps for Store Checkout to only show one checkout and one thankyou |
| 1207 |
if (this.isStoreCheckout && steps) { |
| 1208 |
let filtered = []; |
| 1209 |
let hasCheckout = false; |
| 1210 |
let hasThankyou = false; |
| 1211 |
|
| 1212 |
steps.forEach(step => { |
| 1213 |
if (step.step_type === 'checkout' && !hasCheckout) { |
| 1214 |
filtered.push(step); |
| 1215 |
hasCheckout = true; |
| 1216 |
} else if (step.step_type === 'thankyou' && !hasThankyou) { |
| 1217 |
filtered.push(step); |
| 1218 |
hasThankyou = true; |
| 1219 |
} |
| 1220 |
}); |
| 1221 |
|
| 1222 |
this.steps = filtered; |
| 1223 |
} else { |
| 1224 |
this.steps = steps; |
| 1225 |
} |
| 1226 |
}, |
| 1227 |
|
| 1228 |
backToTemplates: function (e) { |
| 1229 |
this.showStepsPreview = false |
| 1230 |
}, |
| 1231 |
|
| 1232 |
funnelNewName: function (data) { |
| 1233 |
this.templateNewName = j('.import-funnel-name input').val(); |
| 1234 |
}, |
| 1235 |
|
| 1236 |
setActiveTemplate: function (data) { |
| 1237 |
this.activeTemplate = data; |
| 1238 |
// if(data.is_pro && this.isProActivated) { |
| 1239 |
// this.isProTemplateSelected = true; |
| 1240 |
// } else if(!data.isPro) { |
| 1241 |
// this.isProTemplateSelected = true; |
| 1242 |
// }else { |
| 1243 |
// this.isProTemplateSelected = false; |
| 1244 |
// } |
| 1245 |
}, |
| 1246 |
|
| 1247 |
activatePlugin: function (payload, that) { |
| 1248 |
wpAjaxHelperRequest("wpfunnels-activate-plugin", payload) |
| 1249 |
.success(function (response) { |
| 1250 |
that.isAnyPluginMissing = 'no' |
| 1251 |
}) |
| 1252 |
.error(function (response) { |
| 1253 |
|
| 1254 |
}); |
| 1255 |
}, |
| 1256 |
|
| 1257 |
pluginInstallationAction: function (e) { |
| 1258 |
e.preventDefault(); |
| 1259 |
|
| 1260 |
this.pluginInstallLoader = true; |
| 1261 |
|
| 1262 |
var plugin = this.dependencyPlugins[this.builder], |
| 1263 |
pluginFile = plugin.plugin_file, |
| 1264 |
payload = { |
| 1265 |
pluginFile: pluginFile |
| 1266 |
}, |
| 1267 |
action = this.dependencyPlugins[this.builder].action, |
| 1268 |
that = this; |
| 1269 |
if (action == 'activate') { |
| 1270 |
this.activatePlugin(payload, that); |
| 1271 |
} else { |
| 1272 |
wp.updates.queue.push({ |
| 1273 |
action: 'install-plugin', |
| 1274 |
data: { |
| 1275 |
slug: plugin.slug, |
| 1276 |
}, |
| 1277 |
}); |
| 1278 |
wp.updates.queueChecker(); |
| 1279 |
} |
| 1280 |
|
| 1281 |
}, |
| 1282 |
|
| 1283 |
pluginInstalledSuccess: function (e, response) { |
| 1284 |
e.preventDefault(); |
| 1285 |
var plugin = this.dependencyPlugins[this.builder], |
| 1286 |
pluginFile = plugin.plugin_file, |
| 1287 |
payload = { |
| 1288 |
pluginFile: pluginFile |
| 1289 |
}, |
| 1290 |
that = this; |
| 1291 |
this.activatePlugin(payload, that); |
| 1292 |
}, |
| 1293 |
|
| 1294 |
pluginInstalledError: function (e, response) { |
| 1295 |
e.preventDefault(); |
| 1296 |
this.pluginInstallLoader = false; |
| 1297 |
this.pluginInstallationErrorMessage = response.errorMessage |
| 1298 |
}, |
| 1299 |
|
| 1300 |
onActivateTab(tabId) { |
| 1301 |
this.activeTab = tabId; |
| 1302 |
}, |
| 1303 |
setResponsiveView(view) { |
| 1304 |
this.responsiveView = view; |
| 1305 |
}, |
| 1306 |
|
| 1307 |
filterSteps: function(steps) { |
| 1308 |
let isProActivated = window.WPFunnelVars.isProActivated == 1; |
| 1309 |
|
| 1310 |
// Filter for Store Checkout - only checkout and thankyou (one of each) |
| 1311 |
if (this.isStoreCheckout) { |
| 1312 |
let filtered = []; |
| 1313 |
let hasCheckout = false; |
| 1314 |
let hasThankyou = false; |
| 1315 |
|
| 1316 |
steps.forEach(step => { |
| 1317 |
if (step.step_type === 'checkout' && !hasCheckout) { |
| 1318 |
filtered.push(step); |
| 1319 |
hasCheckout = true; |
| 1320 |
} else if (step.step_type === 'thankyou' && !hasThankyou) { |
| 1321 |
filtered.push(step); |
| 1322 |
hasThankyou = true; |
| 1323 |
} |
| 1324 |
}); |
| 1325 |
|
| 1326 |
return filtered; |
| 1327 |
} |
| 1328 |
|
| 1329 |
if (isProActivated) { |
| 1330 |
return steps; |
| 1331 |
} else { |
| 1332 |
return steps.filter((step, index, self) => { |
| 1333 |
return step.step_type !== 'downsell' && |
| 1334 |
index === self.findIndex(s => s.step_type === step.step_type); |
| 1335 |
}); |
| 1336 |
} |
| 1337 |
}, |
| 1338 |
|
| 1339 |
shouldImportStep: function(stepType) { |
| 1340 |
let isProActivated = window.WPFunnelVars.isProActivated == 1; |
| 1341 |
if (isProActivated) { |
| 1342 |
return true; |
| 1343 |
} |
| 1344 |
return !['downsell'].includes(stepType); |
| 1345 |
}, |
| 1346 |
|
| 1347 |
} |
| 1348 |
} |
| 1349 |
</script> |
| 1350 |
|
