wpfunnels / admin / modules / setup-wizard / components / Permalink.vue

Permalink.vue in WPFunnels – Funnel Builder for WooCommerce with Checkout & One Click Upsell 2.8.16, at admin/modules/setup-wizard/components/Permalink.vue

158 lines 6.7 KB

Raw Download Zip

1	<template>
2	<div class="wizard-single-content permalinks">
3	<div class="step-header">
4	<h4 class="title">Permalinks</h4>
5	<p class="description">Please Select how you want your Permalinks to be arranged for your Funnel pages.</p>
6	</div>
7
8	<div class="wizard-single-content__body">
9	<div class="wpfnl-box">
10	<div class="wpfnl-field-wrapper wpfnl-align-top">
11	<label> Default Permalink </label>
12	<div class="wpfnl-fields">
13	<div class="wpfnl-radiobtn">
14	<input
15	id="default-permalink"
16	v-model="checkedValue"
17	type="radio"
18	name="wpfunnels-set-permalink"
19	value="default"
20	checked>
21	<label for="default-permalink">Default WordPress Permalink</label>
22	</div>
23	</div>
24	</div>
25	<!-- /field-wrapper -->
26
27	<div class="wpfnl-field-wrapper wpfnl-align-top">
28	<label>Funnel and Step Slug</label>
29	<div class="wpfnl-fields">
30	<div class="wpfnl-radiobtn">
31	<input
32	id="funnel-step-permalink"
33	v-model="checkedValue"
34	type="radio"
35	name="wpfunnels-set-permalink"
36	value="funnel-step">
37	<label for="funnel-step-permalink">{{ homeUrl }}/<code class="funnelbase">{{ funnelBase }}</code>/%funnelname%/<code class="stepbase">{{ stepBase }}</code>/%stepname%/</label>
38	</div>
39	</div>
40	</div>
41	<!-- /field-wrapper -->
42
43	<div class="wpfnl-field-wrapper wpfnl-align-top">
44	<label>Funnel Slug</label>
45	<div class="wpfnl-fields">
46	<div class="wpfnl-radiobtn">
47	<input
48	id="funnel-slug-permalink"
49	v-model="checkedValue"
50	type="radio"
51	name="wpfunnels-set-permalink"
52	value="funnel">
53	<label for="funnel-slug-permalink">{{ homeUrl }}/<code class="funnelbase">{{ funnelBase }}</code>/%funnelname%/%stepname%/</label>
54	</div>
55	</div>
56	</div>
57	<!-- /field-wrapper -->
58
59	<div class="wpfnl-field-wrapper wpfnl-align-top">
60	<label>Step Slug</label>
61	<div class="wpfnl-fields">
62	<div class="wpfnl-radiobtn">
63	<input
64	id="step-slug-permalink"
65	v-model="checkedValue"
66	type="radio"
67	name="wpfunnels-set-permalink"
68	value="step">
69	<label for="step-slug-permalink">{{ homeUrl }}/%funnelname%/<code class="stepbase">{{ stepBase }}</code>/%stepname%/</label>
70	</div>
71	</div>
72	</div>
73	<!-- /field-wrapper -->
74
75	<div class="wpfnl-field-wrapper parmalink-base">
76	<label>Post Type Permalink Base</label>
77	</div>
78	<!-- /field-wrapper -->
79
80	<div class="wpfnl-field-wrapper">
81	<label>Funnel Base</label>
82	<div class="wpfnl-fields">
83	<input
84	id="wpfunnels-permalink-funnel-base"
85	v-model="funnelBase"
86	type="text"
87	name="wpfnl-permalink-funnel-base" >
88	</div>
89	</div>
90	<!-- /field-wrapper -->
91
92	<div class="wpfnl-field-wrapper">
93	<label>Step Base</label>
94	<div class="wpfnl-fields">
95	<input
96	id="wpfunnels-permalink-step-base"
97	v-model="stepBase"
98	type="text"
99	name="wpfnl-permalink-step-base">
100	</div>
101	</div>
102	<!-- /field-wrapper -->
103
104	</div>
105	<!-- /settings-box -->
106	</div>
107
108	<div class="wizard-single-content__footer">
109	<a :href="prevStepLink" class="wizard-btn btn-default prev">previous</a>
110	<a href="#" class="wizard-btn btn-default next" @click="saveFunnelPermalinks">Next
111	<span class="wpfnl-loader" v-if="showLoader"></span>
112	</a>
113	</div>
114
115	</div>
116	</template>
117
118	<script>
119	import apiFetch from '@wordpress/api-fetch'
120	export default {
121	name: 'Permalink',
122	props: {
123	prevStepLink: String,
124	showLoader: Boolean
125	},
126	data: function () {
127	return {
128	homeUrl: window.setup_wizard_obj.home_url,
129	funnelBase: 'funnel',
130	stepBase: 'steps',
131	options: [
132	{ name: 'Default Permalink', label: 'Default WordPress Permalink', value: 'default' },
133	{ name: 'Funnel and Step Slug', label: `${window.setup_wizard_obj.home_url}/<code class="funnelbase">${this.funnelBase}</code>/%funnelname%/<code class="stepbase">${this.stepBase}</code>/%stepname%/`, value: 'funnel-step' },
134	{ name: 'Funnel Slug\n', label: `${window.setup_wizard_obj.home_url}/<code class="funnelbase">${this.funnelBase}</code>/%funnelname%/%stepname%/`, value: 'funnel' },
135	{ name: 'Step Slug', label: `${window.setup_wizard_obj.home_url}/%funnelname%/<code class="stepbase">${this.stepBase}</code>%stepname%/`, value: 'step' }
136	],
137	count: 3,
138	checkedValue: 'default'
139	}
140	},
141	mounted () {
142	this.$emit('setPluginSlug', 'elementor')
143	this.$emit('changeSetUpType', 'permalink')
144	},
145	methods: {
146	saveFunnelPermalinks: function (e) {
147	e.preventDefault();
148
149	this.$emit('saveFunnelPermalinks', {
150	'funnelBase': this.funnelBase,
151	'stepBase': this.stepBase,
152	'settings': this.checkedValue
153	})
154	}
155	}
156	}
157	</script>
158