# wpfunnels/3.13.1/admin/modules/template-library/Components/SingleStepPreview.vue

WPFunnels – Funnel Builder for WooCommerce with Checkout & One Click Upsell, version 3.13.1. 40 lines.

- Page: https://pluginprobe.com/plugins/wpfunnels/3.13.1/code/admin/modules/template-library/Components/SingleStepPreview.vue
- Raw: https://pluginprobe.com/plugins/wpfunnels/3.13.1/raw/admin/modules/template-library/Components/SingleStepPreview.vue
- Modified: 2023-07-17T10:43:08+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/wpfunnels/3.13.1/code/admin/modules/template-library/Components/SingleStepPreview.vue#L10-L20`.

```vue
<template>
    <div class="wpfnl-step__single-template" >
        <div class="template-preview-image">
            <div class="template-action">
                <a :href="step.link" target="_blank" class="btn-default step-btn"> preview </a>
            </div>

            <div class="step-image-wrapper" :style="{ backgroundImage: `url(${image})` }">
            </div>
        </div>

        <div class="step-template-info">
            <span class="title">{{step.title}}</span>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'SingleStepPreview',
        props: {
            step: Object,
            image: String,
            previewLink: String,
            isAddNewFunnelButtonDisabled: Boolean,
        },
        data: function () {
            return {
                showLoader : false
            }
        },
        methods: {
            importStep: function (e) {
                e.preventDefault();
                var that = this;
                this.showLoader = true;
                that.createStep( {'id' : this.step.id, 'type' : this.step.step_type, 'name' : this.step.step_type}, this.funnelID, that);
            },
        }
    }
</script>
```