Как добавить таблицу цен на сайт Weebly?

Ранее у Weebly не было возможности добавить виджет таблицы цен в редактор. Однако позже Weebly представила бесплатное приложение «Таблица цен» через Центр приложений. Это приложение поможет вам добавить простые таблицы цен на ваш сайт. Это одно из бесплатных приложений от Weebly, и мы надеемся, что в будущем может появиться много других приложений с таблицами цен, из которых пользователь сможет выбирать. В этой статье мы объясним, как добавить бесплатную таблицу цен на сайт Weebly.

Связанный: Как добавить организационную схему на сайт Weebly?

Добавить таблицу цен в Weebly

Вы можете использовать следующие методы для добавления таблицы цен в Weebly.

  1. Использование приложения Price Chart из App Center
  2. Виджет таблицы цен с использованием настраиваемого скрипта

Давайте подробно объясним оба метода.

Приложение Weebly Price Chart

Сначала давайте обсудим приложение с графиком цен, которое доступно в разделе «электронная коммерция»В Weebly App Center. Когда вы находитесь в редакторе Weebly, перейдите в раздел «Приложения» и найдите приложение Pricing Chart. Найдя приложение, вы можете подключить его к своему сайту. Ознакомьтесь с нашей статьей о том, как подключить приложения из Weebly App Center к своему сайту.

Приложение Weebly Pricing Chart App

После успешного подключения приложения перейдите на вкладку «Сборка» и перетащите элемент на страницу, где вы хотите добавить таблицу цен. Таблица цен будет выглядеть примерно так, как показано ниже. Вы можете настроить текст, кнопки, размер и цвет таблицы.

Таблица цен создана с помощью приложения Weebly Pricing Chart App
Таблица цен создана с помощью приложения Weebly Pricing Chart App

Особенности приложения Free Price Chart

Приложение с графиком цен публикуется Weebly, поэтому вы можете предположить, что интеграция с редактором Weebly будет проще, чем с любым другим приложением. Помните, что вы должны подключить приложение к каждому сайту отдельно и использовать следующие функции:

  • У виджета есть план, функции и элементы кнопок.
  • Это законченный виджет, который означает, что вы не можете перетаскивать другие элементы между ними.
  • Хотя виджет поддерживает неограниченное количество планов и функций, мы рекомендуем строго от 3 до 5 планов.
  • Вы можете настроить цвета фона по своему усмотрению.

Виджет таблицы цен с использованием скрипта

Приложение Weebly по умолчанию должно быть отзывчивым и автоматически выравниваться на мобильных устройствах. Однако он не работает должным образом на мобильных устройствах, а также вызывает раздражение при редактировании контента в редакторе. Поэтому второй вариант, который мы здесь объясняем, – это виджет настраиваемой таблицы цен с использованием бесплатных скриптов StyleFix и PrefixFree. Виджет будет выглядеть, как показано ниже, и вы можете просмотреть его в реальном времени на нашей демонстрационной странице.

Таблица цен с использованием скрипта
Таблица цен с использованием скрипта

Вы можете добавить виджет на свой сайт Weebly, выполнив следующие действия.

  • Добавление скрипта
  • Добавление собственного стиля CSS
  • Встраивание HTML-кода

Добавление скрипта

Добавьте приведенный ниже сценарий под «Страницы> Выберите страницу> Настройки SEO> Код нижнего колонтитула»На вашем сайте Weebly.

< script >
    /**
     * StyleFix 1.0.3 & PrefixFree 1.0.7
     * @author Lea Verou
     * MIT license
     */
    (function() {
        function t(e, t) {
            return [].slice.call((t || document).querySelectorAll(e))
        }
        if (!window.addEventListener) return;
        var e = window.StyleFix = {
            link: function
                try {
                    if (t.rel !== "stylesheet" || t.hasAttribute("data-noprefix")) return
                } catch (n) {
                    return
                }
                var r = t.href || t.getAttribute("data-href"),
                    i = r.replace(/[^/]+$/, ""),
                    s = (/^[a-z]{3,10}:/.exec(i) || [""])[0],
                    o = (/^[a-z]{3,10}://[^/]+/.exec(i) || [""])[0],
                    u = /^([^?]*)??/.exec(r)[1],
                    a = t.parentNode,
                    f = new XMLHttpRequest,
                    l;
                f.onreadystatechange = function() {
                    f.readyState === 4 && l()
                };
                l = function() {
                    var n = f.responseText;
                    if (n && t.parentNode && (!f.status || f.status < 400 || f.status > 600)) {
                        n = e.fix(n, !0, t);
                        if (i) {
                            n = n.replace(/url(s*?((?:"|')?)(.+?)1s*?)/gi, function(e, t, n) {
                                return /^([a-z]{3,10}:|#)/i.test(n) ? e : /^///.test(n) ? 'url("' + s + n + '")' : /^//.test(n) ? 'url("' + o + n + '")' : /^?/.test(n) ? 'url("' + u + n + '")' : 'url("' + i + n + '")'
                            });
                            var r = i.replace(/([\^$*+[]?{}.=!:(|)])/g, "\$1");
                            n = n.replace(RegExp("\b(behavior:\s*?url\('?"?)" + r, "gi"), "$1")
                        }
                        var l = document.createElement("style");
                        l.textContent = n;
                        l.media = t.media;
                        l.disabled = t.disabled;
                        l.setAttribute("data-href", t.getAttribute("href"));
                        a.insertBefore(l, t);
                        a.removeChild
                        l.media = t.media
                    }
                };
                try {
                    f.open("GET", r);
                    f.send(null)
                } catch (n) {
                    if (typeof XDomainRequest != "undefined") {
                        f = new XDomainRequest;
                        f.onerror = f.onprogress = function() {};
                        f.onload = l;
                        f.open("GET", r);
                        f.send(null)
                    }
                }
                t.setAttribute("data-inprogress", "")
            },
            styleElement: function
                if (t.hasAttribute("data-noprefix")) return;
                var n = t.disabled;
                t.textContent = e.fix(t.textContent, !0, t);
                t.disabled = n
            },
            styleAttribute: function
                var n = t.getAttribute("style");
                n = e.fix(n, !1, t);
                t.setAttribute("style", n)
            },
            process: function() {
                t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);
                t("style").forEach(StyleFix.styleElement);
                t("[style]").forEach(StyleFix.styleAttribute)
            },
            register: function(t, n) {
                (e.fixers = e.fixers || []).splice(n === undefined ? e.fixers.length : n, 0, t)
            },
            fix: function(t, n, r) {
                for (var i = 0; i < e.fixers.length; i++) t = e.fixers[i](t, n, r) || t;
                return t
            },
            camelCase: function(e) {
                return e.replace(/-([a-z])/g, function(e, t) {
                    return t.toUpperCase()
                }).replace("-", "")
            },
            deCamelCase: function(e) {
                return e.replace(/[A-Z]/g, function(e) {
                    return "-" + e.toLowerCase()
                })
            }
        };
        (function() {
            setTimeout(function() {
                t('link[rel="stylesheet"]').forEach(StyleFix.link)
            }, 10);
            document.addEventListener("DOMContentLoaded", StyleFix.process, !1)
        })()
    })();
(function(e) {
    function t(e, t, r, i, s) {
        e = n[e];
        if (e.length) {
            var o = RegExp(t + "(" + e.join("|") + ")" + r, "gi");
            s = s.replace(o, i)
        }
        return s
    }
    if (!window.StyleFix || !window.getComputedStyle) return;
    var n = window.PrefixFree = {
        prefixCSS: function(e, r, i) {
            var s = n.prefix;
            n.functions.indexOf("linear-gradient") > -1 && (e = e.replace(/(s|:|,)(repeating-)?linear-gradient(s*(-?d*.?d*)deg/ig, function(e, t, n, r) {
                return t + (n || "") + "linear-gradient(" + (90 - r) + "deg"
            }));
            e = t("functions", "(\s|:|,)", "\s*\(", "$1" + s + "$2(", e);
            e = t("keywords", "(\s|:)", "(\s|;|\}|$)", "$1" + s + "$2$3", e);
            e = t("properties", "(^|\{|\s|;)", "\s*:", "$1" + s + "$2:", e);
            if (n.properties.length) {
                var o = RegExp("\b(" + n.properties.join("|") + ")(?!:)", "gi");
                e = t("valueProperties", "\b", ":(.+?);", function(e) {
                    return e.replace(o, s + "$1")
                }, e)
            }
            if (r) {
                e = t("selectors", "", "\b", n.prefixSelector, e);
                e = t("atrules", "@", "\b", "@" + s + "$1", e)
            }
            e = e.replace(RegExp("-" + s, "g"), "-");
            e = e.replace(/-*-(?=[a-z]+)/gi, n.prefix);
            return e
        },
        property: function(e) {
            return (n.properties.indexOf(e) ? n.prefix : "") + e
        },
        value: function(e, r) {
            e = t("functions", "(^|\s|,)", "\s*\(", "$1" + n.prefix + "$2(", e);
            e = t("keywords", "(^|\s)", "(\s|$)", "$1" + n.prefix + "$2$3", e);
            return e
        },
        prefixSelector: function(e) {
            return e.replace(/^:{1,2}/, function(e) {
                return e + n.prefix
            })
        },
        prefixProperty: function(e, t) {
            var r = n.prefix + e;
            return t ? StyleFix.camelCase(r) : r
        }
    };
    (function() {
        var e = {},
            t = [],
            r = {},
            i = getComputedStyle(document.documentElement, null),
            s = document.createElement("div").style,
            o = function(n) {
                if (n.charAt(0) === "-") {
                    t.push(n);
                    var r = n.split("-"),
                        i = r[1];
                    e[i] = ++e[i] || 1;
                    while (r.length > 3) {
                        r.pop();
                        var s = r.join("-");
                        u(s) && t.indexOf(s) === -1 && t.push(s)
                    }
                }
            },
            u = function(e) {
                return StyleFix.camelCase(e) in s
            };
        if (i.length > 0)
            for (var a = 0; a < i.length; a++) o(i[a]);
        else
            for (var f in i) o(StyleFix.deCamelCase(f));
        var l = {
            uses: 0
        };
        for (var c in e) {
            var h = e[c];
            l.uses < h && (l = {
                prefix: c,
                uses: h
            })
        }
        n.prefix = "-" + l.prefix + "-";
        n.Prefix = StyleFix.camelCase(n.prefix);
        n.properties = [];
        for (var a = 0; a < t.length; a++) {
            var f = t[a];
            if (f.indexOf(n.prefix) === 0) {
                var p = f.slice(n.prefix.length);
                u(p) || n.properties.push(p)
            }
        }
        n.Prefix == "Ms" && !("transform" in s) && !("MsTransform" in s) && "msTransform" in s && n.properties.push("transform", "transform-origin");
        n.properties.sort()
    })();
    (function() {
        function i(e, t) {
            r
            r
            return !!r
        }
        var e = {
            "linear-gradient": {
                property: "backgroundImage",
                params: "red, teal"
            },
            calc: {
                property: "width",
                params: "1px + 5%"
            },
            element: {
                property: "backgroundImage",
                params: "#foo"
            },
            "cross-fade": {
                property: "backgroundImage",
                params: "url(a.png), url(b.png), 50%"
            }
        };
        e["repeating-linear-gradient"] = e["repeating-radial-gradient"] = e["radial-gradient"] = e["linear-gradient"];
        var t = {
            initial: "color",
            "zoom-in": "cursor",
            "zoom-out": "cursor",
            box: "display",
            flexbox: "display",
            "inline-flexbox": "display",
            flex: "display",
            "inline-flex": "display",
            grid: "display",
            "inline-grid": "display",
            "min-content": "width"
        };
        n.functions = [];
        n.keywords = [];
        var r = document.createElement("div").style;
        for (var s in e) {
            var o = e[s],
                u = o.property,
                a = s + "(" + o.params + ")";
            !i(a, u) && i(n.prefix + a, u) && n.functions.push(s)
        }
        for (var f in t) {
            var u = t[f];
            !i(f, u) && i(n.prefix + f, u) && n.keywords.push(f)
        }
    })();
    (function() {
        function s(e) {
            i.textContent = e + "{}";
            return !!i.sheet.cssRules.length
        }
        var t = {
                ":read-only": null,
                ":read-write": null,
                ":any-link": null,
                "::selection": null
            },
            r = {
                keyframes: "name",
                viewport: null,
                document: 'regexp(".")'
            };
        n.selectors = [];
        n.atrules = [];
        var i = e.appendChild(document.createElement("style"));
        for (var o in t) {
            var u = o + (t[o] ? "(" + t[o] + ")" : "");
            !s(u) && s(n.prefixSelector(u)) && n.selectors.push(o)
        }
        for (var a in r) {
            var u = a + " " + (r[a] || "");
            !s("@" + u) && s("@" + n.prefix + u) && n.atrules.push(a)
        }
        e.removeChild(i)
    })();
    n.valueProperties = ["transition", "transition-property"];
    e.className += " " + n.prefix;
    StyleFix.register(n.prefixCSS)
})(document.documentElement); 
< /script>

Добавление собственного кода CSS

Второй шаг – добавить собственный код CSS для таблицы цен в разделе «Страницы> Выберите страницу> Настройки SEO> Код заголовка«.

Добавить код заголовка на страницу
Добавить код заголовка на страницу
<style type="text/css" media="screen">
.pricing_table {
line-height: 150%; 
font-size: 12px; 
margin: 0 auto; 
width: 75%;
max-width: 800px; 
padding-top: 10px;
}   
.price_block {
text-align: center; 
width: 100%; 
color: #fff; 
float: left; 
list-style-type: none; 
transition: all 0.25s; 
position: relative; 
box-sizing: border-box;     
margin-bottom: 10px; 
border-bottom: 1px solid transparent; 
}
/*Pricing Table Header Block with Plans*/
.pricing_table h3 {
text-transform: uppercase; 
padding: 5px 0; 
background: #333; 
margin: -10px 0 1px 0;
}
/*Price tag section*/
.price {
display: table; 
background: #444; 
width: 100%; 
height: 70px; 
}
.price_figure {
font-size: 24px; 
text-transform: uppercase; 
vertical-align: middle; 
display: table-cell;
}
.price_number {
font-weight: bold; 
display: block;
}
.price_tenure {
font-size: 11px; 
}
/* Pricing Plan Features*/
.features {
background: #def0f4; 
color: #000;
}
.features li {
padding: 8px 15px;
border-bottom: 1px solid #ccc; 
font-size: 11px; 
list-style-type: none;
}
.footer {
padding: 15px; 
background: #DEF0F4;
}
.action_button {
text-decoration: none; 
color: #fff; 
font-weight: bold; 
border-radius: 5px; 
background: linear-gradient(#666, #333); 
padding: 5px 20px; 
font-size: 11px; 
text-transform: uppercase;
}   
.price_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); 
transform: scale(1.04) translateY(-5px); 
z-index: 1; 
border-bottom: 0 none;
}
.price_block:hover .price {
background:linear-gradient(#DB7224, #F9B84A); 
box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
background: #222;
}
.price_block:hover .action_button {
background: linear-gradient(#F9B84A, #DB7224); 
}   
@media only screen and (min-width : 480px) and (max-width : 768px) {
.price_block {width: 50%;}
.price_block:nth-child(odd) {border-right: 1px solid transparent;}
.price_block:nth-child(3) {clear: both;}        
.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
.price_block {width: 25%;}
.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
.price_block:last-child {border-right: 0 none;}     
.price_block:hover {border: 0 none;}
}
.skeleton, .skeleton ul, .skeleton li, .skeleton div, .skeleton h3, .skeleton span, .skeleton p {
border: 5px solid rgba(255, 255, 255, 0.9);
border-radius: 5px;
margin: 7px !important;
background: rgba(0, 0, 0, 0.05) !important;
padding: 0 !important;
text-align: left !important;
display: block !important;      
width: auto !important;
height: auto !important;        
font-size: 10px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: black !important;
}
.skeleton .label {
font-size: 11px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: white !important;
border: 0 none !important;
padding: 5px !important; 
margin: 0 !important;
float: none !important;
text-align: left !important;
text-shadow: 0 0 1px white;
background: none !important;
}
.skeleton {
display: none !important;
margin: 100px !important;
clear: both;
}
</style>

Вы можете настроить любые атрибуты, такие как размер шрифта, цвет и т. Д., В соответствии с вашими потребностями, чтобы они соответствовали макету вашего сайта.

Добавление HTML-кода

Последний шаг – перетащить значок «Код для вставки»На странице, где вы хотите добавить таблицу цен, и вставьте следующий HTML-код. Не забудьте заменить контент и ссылки на свои собственные.

<ul class="pricing_table">
        <li class="price_block">
            <h3>Starter</h3>
            <div class="price">
                <div class="price_figure">
                    <span class="price_number">FREE</span>
                </div>
            </div>
            <ul class="features">
                <li>1GB Storage</li>
                <li>2 Clients</li>
                <li>5 Active Projects</li>
                <li>5 Colors</li>
                <li>Free Goodies</li>
                <li>24/7 Email support</li>
            </ul>
            <div class="footer">
                <a href="https://www.webnots.com/add-free-pricing-table-in-weebly-site/#" class="action_button">Buy Now</a>
            </div>
        </li>
        <li class="price_block">
            <h3>Basic</h3>
            <div class="price">
                <div class="price_figure">
                    <span class="price_number">$9.99</span>
                    <span class="price_tenure">per month</span>
                </div>
            </div>
            <ul class="features">
                <li>2GB Storage</li>
                <li>5 Clients</li>
                <li>10 Active Projects</li>
                <li>10 Colors</li>
                <li>Free Goodies</li>
                <li>24/7 Email support</li>
            </ul>
            <div class="footer">
                <a href="https://www.webnots.com/add-free-pricing-table-in-weebly-site/#" class="action_button">Buy Now</a>
            </div>
        </li>
        <li class="price_block">
            <h3>Premium</h3>
            <div class="price">
                <div class="price_figure">
                    <span class="price_number">$19.99</span>
                    <span class="price_tenure">per month</span>
                </div>
            </div>
            <ul class="features">
                <li>5GB Storage</li>
                <li>10 Clients</li>
                <li>20 Active Projects</li>
                <li>20 Colors</li>
                <li>Free Goodies</li>
                <li>24/7 Email support</li>
            </ul>
            <div class="footer">
                <a href="https://www.webnots.com/add-free-pricing-table-in-weebly-site/#" class="action_button">Buy Now</a>
            </div>
        </li>
        <li class="price_block">
            <h3>Lifetime</h3>
            <div class="price">
                <div class="price_figure">
                    <span class="price_number">$999</span>
                </div>
            </div>
            <ul class="features">
                <li>Unlimited Storage</li>
                <li>Unlimited Clients</li>
                <li>Unlimited Projects</li>
                <li>Unlimited Colors</li>
                <li>Free Goodies</li>
                <li>24/7 Email support</li>
            </ul>
            <div class="footer">
                <a href="https://www.webnots.com/add-free-pricing-table-in-weebly-site/#" class="action_button">Buy Now</a>
            </div>
        </li>
    </ul>
    
    
    <ul class="skeleton pricing_table" style="margin-top: 100px; overflow: hidden;">
        <li class="label" style="margin: 0 none;">ul.pricing_table</li>
        <li class="price_block">
            <span class="label">li.price_block</span>
            <h3><span class="label">h3</span></h3>
            <div class="price">
                <span class="label">div.price</span>
                <div class="price_figure">
                    <span class="label">div.price_figure</span>
                    <span class="price_number">
                        <span class="label">span.price_number</span>
                    </span>
                    <span class="price_tenure">
                        <span class="label">span.price_tenure</span>
                    </span>
                </div>
            </div>
            <ul class="features">
                <li class="label">ul.features</li>
                <br /><br /><br />
            </ul>
            <div class="footer">
                <span class="label">div.footer</span>
            </div>
        </li>
        
        
        <li class="price_block" style="opacity: 0.5;">
            <span class="label">li.price_block</span>
            <h3><span class="label">h3</span></h3>
            <div class="price">
                <span class="label">div.price</span>
                <div class="price_figure">
                    <span class="label">div.price_figure</span>
                    <span class="price_number">
                        <span class="label">span.price_number</span>
                    </span>
                    <span class="price_tenure">
                        <span class="label">span.price_tenure</span>
                    </span>
                </div>
            </div>
            <ul class="features">
                <li class="label">ul.features</li>
                <br /><br /><br />
            </ul>
            <div class="footer">
                <span class="label">div.footer</span>
            </div>
        </li>
        <li class="price_block" style="opacity: 0.25;">
            <span class="label">li.price_block</span>
            <h3><span class="label">h3</span></h3>
            <div class="price">
                <span class="label">div.price</span>
                <div class="price_figure">
                    <span class="label">div.price_figure</span>
                    <span class="price_number">
                        <span class="label">span.price_number</span>
                    </span>
                    <span class="price_tenure">
                        <span class="label">span.price_tenure</span>
                    </span>
                </div>
            </div>
            <ul class="features">
                <li class="label">ul.features</li>
                <br /><br /><br />
            </ul>
            <div class="footer">
                <span class="label">div.footer</span>
            </div>
        </li>
    </ul>

Преимущество этого настраиваемого виджета в том, что вы можете подготовить контент в автономном режиме и вставить скрипт / CSS / контент за несколько минут.

Заключительные слова

Таблица цен является одним из важных виджетов при продаже услуг и продуктов на сайте Weebly. Приложение Weebly’s Pricing Chart хорошо работает на настольных устройствах. Однако на мобильных устройствах он не выравнивается должным образом. Если вам не нравится использовать приложение Weebly, попробуйте собственный сценарий и легко создавайте таблицы цен в любом месте сайта.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *