{"id":19852,"date":"2025-12-30T17:38:38","date_gmt":"2025-12-30T16:38:38","guid":{"rendered":"https:\/\/nina.solutions\/?page_id=19852"},"modified":"2026-03-27T14:08:47","modified_gmt":"2026-03-27T13:08:47","slug":"prod-card","status":"publish","type":"page","link":"https:\/\/nina.solutions\/fr\/prod-card\/","title":{"rendered":"Card Prod"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19852\" class=\"elementor elementor-19852\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"has_ae_slider elementor-element elementor-element-b54a443 e-flex e-con-boxed ae-bg-gallery-type-default e-con e-parent\" data-id=\"b54a443\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"has_ae_slider elementor-element elementor-element-54e32e7 e-con-full e-flex ae-bg-gallery-type-default e-con e-child\" data-id=\"54e32e7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23a0770 elementor-widget elementor-widget-html\" data-id=\"23a0770\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"sso-message\"><\/div>\n\n<div class=\"tarifs tarifs-tests\">\n\n    <div class=\"switch-wrapper\">\n        <h2 class=\"degrade jaune\" style=\"font-weight: 700;\">Tarif<\/h2>\n        <span style=\"flex-grow:1\"><\/span>\n        <div>\n            <div class=\"switch-container\">\n                <div id=\"period-week\" style=\"display:none\" class=\"toggle-period\" onclick=\"setPeriod('week')\">Semaine<\/div>\n                <div id=\"period-month\" class=\"toggle-period\" onclick=\"setPeriod('month')\">Mois<\/div>\n                <div id=\"period-year\" class=\"toggle-period\" onclick=\"setPeriod('year')\">Ann\u00e9e<\/div>\n            <\/div>\n        <\/div>\n        <div>\n            <div class=\"switch-container\">\n                <div id=\"currency-eur\" class=\"toggle-currency\" onclick=\"setCurrency('eur')\">\u20ac<\/div>\n                <div id=\"currency-usd\" class=\"toggle-currency\" onclick=\"setCurrency('usd')\">$US<\/div>\n                <div id=\"currency-cad\" class=\"toggle-currency\" onclick=\"setCurrency('cad')\">$CA<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <div class=\"remise-an\" style=\"margin-top:15px\">\u00c9conomisez <b>20%<\/b> en vous abonnant \u00e0 l\u2019ann\u00e9e.<\/div>\n    \n    <div class=\"remise-an\" style=\"margin-bottom:15px;\"><b>30 jours gratuits<\/b> lors de votre premi\u00e8re souscription.<\/div>\n    \n    <div class=\"plan-container\">\n        <label class=\"plan\" data-filter=\"starter\" onclick=\"setOffre('starter')\">\n            <div class=\"input\"><\/div>\n            <div class=\"content\">\n                <b class=\"degrade jaune\">Starter<\/b>\n                <div class=\"price\">\n                    <b class=\"starter f\">9 \u20ac<\/b>\n                    <div class=\"phrase\">HT par mois<br>sans engagement<\/div>\n                <\/div>\n                <div class=\"sub\">+ <b class=\"starter m\">2,00 \u20ac\/min<\/b> de programmes upload\u00e9s<\/div>\n            <\/div>\n        <\/label>\n        <label class=\"plan\" data-filter=\"business\" onclick=\"setOffre('business')\">\n            <div class=\"input\"><\/div>\n            <div class=\"content\">\n                <b class=\"degrade jaune\">Business<\/b>\n                <div class=\"price\">\n                    <b class=\"business f\">599 \u20ac<\/b>\n                    <div class=\"phrase\">HT par mois<br>sans engagement<\/div>\n                <\/div>\n                <div class=\"sub\">+ <b class=\"business m\">0,80 \u20ac\/min<\/b> de programme upload\u00e9e<\/div>\n            <\/div>\n        <\/label>\n    <\/div>\n    \n    <div id=\"card\"><\/div>\n    \n    <label class=\"plan\" data-filter=\"none\" onclick=\"setOffre('none')\">\n        <div class=\"input\"><\/div>\n        <div class=\"content\">Je poss\u00e8de d\u00e9j\u00e0 une offre et souhaite uniquement obtenir de nouvelles licences.<\/div>\n    <\/label>\n    \n    <div class=\"remise-an\" style=\"margin-top:15px;\">Nombre de licences modifiable apr\u00e8s ajout au panier.<br>Tarif exprim\u00e9 hors taxe.<\/div>\n    \n\n    <div id=\"test\"><\/div>\n<\/div>\n\n<script>\nconst scriptCard = `https:\/\/s3.eu-west-2.wasabisys.com\/resources-assets\/scripts\/store-card.iife.js?v=20260327`;\nconst ssoUrl = `https:\/\/sso.nina.solutions`;\nconst produits = [\n    {\"currency\":\"eur\",\"period\":\"month\",\"starter\":{\"f\":\"9 \u20ac\",\"m\":\"2 \u20ac\",\"p\":\"prod_UCyfQpLpICvorG,prod_UCyfo3fgUsoCW5,prod_UCyf8llxSA1w4G,prod_UCyfb8nsskLm7P,prod_UCyffgRXIvjkWw\"},\"business\":{\"f\":\"599 \u20ac\",\"m\":\"0,7 \u20ac\",\"p\":\"prod_UCyfxY18dADFpM,prod_UCyfo3fgUsoCW5,prod_UCyf8llxSA1w4G,prod_UCyfb8nsskLm7P,prod_UCyffgRXIvjkWw\"},\"none\":{\"f\":null,\"m\":null,\"p\":\"prod_UCyfo3fgUsoCW5,prod_UCyf8llxSA1w4G,prod_UCyfb8nsskLm7P,prod_UCyffgRXIvjkWw\"}},\n    {\"currency\":\"eur\",\"period\":\"year\",\"starter\":{\"f\":\"90 \u20ac\",\"m\":\"2 \u20ac\",\"p\":\"prod_UCyejsCIqAfnQp,prod_UCyfu90ZGpknQz,prod_UCyfNMibrumiuG,prod_UCyfxlnnG8MQ99,prod_UCyfWuYsaHKxeO\"},\"business\":{\"f\":\"5990 \u20ac\",\"m\":\"0,7 \u20ac\",\"p\":\"prod_UCyfV7OFC007Qt,prod_UCyfu90ZGpknQz,prod_UCyfNMibrumiuG,prod_UCyfxlnnG8MQ99,prod_UCyfWuYsaHKxeO\"},\"none\":{\"f\":null,\"m\":null,\"p\":\"prod_UCyfu90ZGpknQz,prod_UCyfNMibrumiuG,prod_UCyfxlnnG8MQ99,prod_UCyfWuYsaHKxeO\"}},\n    {\"currency\":\"usd\",\"period\":\"month\",\"starter\":{\"f\":\"$11\",\"m\":\"$2,4\",\"p\":\"prod_UCygFZgcVnbEtA,prod_UCygAX7PiVKzmq,prod_UCygsIuaCwdrqF,prod_UCygwsU9kBoaqP,prod_UCygEcalwvyoQQ\"},\"business\":{\"f\":\"$719\",\"m\":\"$0.9\",\"p\":\"prod_UCyguEjW8Zankk,prod_UCygAX7PiVKzmq,prod_UCygsIuaCwdrqF,prod_UCygwsU9kBoaqP,prod_UCygEcalwvyoQQ\"},\"none\":{\"f\":null,\"m\":null,\"p\":\"prod_UCygAX7PiVKzmq,prod_UCygsIuaCwdrqF,prod_UCygwsU9kBoaqP,prod_UCygEcalwvyoQQ\"}},\n    {\"currency\":\"usd\",\"period\":\"year\",\"starter\":{\"f\":\"$110\",\"m\":\"$2,4\",\"p\":\"prod_UDyRyf5mZAV8cf,prod_UCygVSrInI2iug,prod_UCygf0zc25o0qw,prod_UCygy10xqnnplt,prod_UCygldoXZk41an\"},\"business\":{\"f\":\"$7190\",\"m\":\"$0.9\",\"p\":\"prod_UCygh1cx6ZNxSd,prod_UCygVSrInI2iug,prod_UCygf0zc25o0qw,prod_UCygy10xqnnplt,prod_UCygldoXZk41an\"},\"none\":{\"f\":null,\"m\":null,\"p\":\"prod_UCygVSrInI2iug,prod_UCygf0zc25o0qw,prod_UCygy10xqnnplt,prod_UCygldoXZk41an\"}},\n    {\"currency\":\"cad\",\"period\":\"month\",\"starter\":{\"f\":\"15 $CA\",\"m\":\"3 $CA\",\"p\":\"prod_UCyigsgStLeWjh,prod_UCyihMCEptOLog,prod_UCyi0Q1Td4WAcS,prod_UCyih8s2vwVlBs,prod_UCyih33WTxLmgT\"},\"business\":{\"f\":\"899 $CA\",\"m\":\"1 $CA\",\"p\":\"prod_UCyiBBACgXJFNi,prod_UCyihMCEptOLog,prod_UCyi0Q1Td4WAcS,prod_UCyih8s2vwVlBs,prod_UCyih33WTxLmgT\"},\"none\":{\"f\":null,\"m\":null,\"p\":\"prod_UCyihMCEptOLog,prod_UCyi0Q1Td4WAcS,prod_UCyih8s2vwVlBs,prod_UCyih33WTxLmgT\"}},\n    {\"currency\":\"cad\",\"period\":\"year\",\"starter\":{\"f\":\"150 $CA\",\"m\":\"3 $CA\",\"p\":\"prod_UCyiKQhdXQdNFi,prod_UCyiYVuX9E4l8o,prod_UCyiySjZoUqTaT,prod_UCyiZAHGWhSKnp,prod_UCyi7w6VmnwllU\"},\"business\":{\"f\":\"8990 $CA\",\"m\":\"1 $CA\",\"p\":\"prod_UCyiAePB7Icrpy,prod_UCyiYVuX9E4l8o,prod_UCyiySjZoUqTaT,prod_UCyiZAHGWhSKnp,prod_UCyi7w6VmnwllU\"},\"none\":{\"f\":null,\"m\":null,\"p\":\"prod_UCyiYVuX9E4l8o,prod_UCyiySjZoUqTaT,prod_UCyiZAHGWhSKnp,prod_UCyi7w6VmnwllU\"}}\n];\nconst produitsTest = ``;\n\nconst phrases = {\n    month:\"HT par mois<br>sans engagement\",\n    year:\"HT par an\"\n}\n\nconst params = new URLSearchParams(window.location.search);\n\n\/\/ PERIOD\nvar periodParam = params.get(\"period\")?.toLowerCase();\nvar periodStorage = localStorage.getItem(\"period\")?.toLowerCase();\nvar period = [\"month\", \"year\"].includes(periodParam)\n  ? periodParam\n  : [\"month\", \"year\"].includes(periodStorage)\n  ? periodStorage\n  : \"month\";\n\n\/\/ CURRENCY\nvar currencyParam = params.get(\"currency\")?.toLowerCase();\nvar currencyStorage = localStorage.getItem(\"currency\")?.toLowerCase();\nvar currency = [\"eur\", \"usd\", \"cad\"].includes(currencyParam)\n  ? currencyParam\n  : [\"eur\", \"usd\", \"cad\"].includes(currencyStorage)\n  ? currencyStorage\n  : \"eur\";\n\n\/\/ OFFER\nvar offreParam = params.get(\"offer\")?.toLowerCase();\nvar offreStorage = localStorage.getItem(\"offer\")?.toLowerCase();\nvar offre = [\"starter\", \"business\", \"none\"].includes(offreParam)\n  ? offreParam\n  : [\"starter\", \"business\", \"none\"].includes(offreStorage)\n  ? offreStorage\n  : \"starter\";\n\nfunction setPeriod(p) {\n    const weekPeriod = document.getElementById('period-week');\n    const monthPeriod = document.getElementById('period-month');\n    const yearPeriod = document.getElementById('period-year');\n    period = p;\n    localStorage.setItem(\"period\", p);\n    \n    switch(p) {\n        case 'week':\n            weekPeriod.classList.add('active');\n            monthPeriod.classList.remove('active');\n            yearPeriod.classList.remove('active');\n            break;\n        case 'month':\n            weekPeriod.classList.remove('active');\n            monthPeriod.classList.add('active');\n            yearPeriod.classList.remove('active');\n            break;\n        case 'year':\n            weekPeriod.classList.remove('active');\n            monthPeriod.classList.remove('active');\n            yearPeriod.classList.add('active');\n            break;\n    }\n    updateCard();\n}\nfunction setCurrency(c){\n    const eurCurrency = document.getElementById('currency-eur');\n    const usdCurrency = document.getElementById('currency-usd');\n    const cadCurrency = document.getElementById('currency-cad');\n    currency = c;\n    localStorage.setItem(\"currency\", c);\n\n    switch(currency) {\n        case 'eur':\n            eurCurrency.classList.add('active');\n            usdCurrency.classList.remove('active');\n            cadCurrency.classList.remove('active');\n            break;\n        case 'usd':\n            eurCurrency.classList.remove('active');\n            usdCurrency.classList.add('active');\n            cadCurrency.classList.remove('active');\n            break;\n        case 'cad':\n            eurCurrency.classList.remove('active');\n            usdCurrency.classList.remove('active');\n            cadCurrency.classList.add('active');\n            break;\n    }\n    updateCard();\n}\nfunction setOffre(o){\n    let offres = document.querySelectorAll('[data-filter]');\n    document.querySelectorAll('[data-filter]').forEach(o => o.classList.remove('active'));\n    document.querySelector(`[data-filter=${o}`).classList.add('active');\n    offre = o;\n    localStorage.setItem(\"offer\", o);\n    updateCard();\n}\nfunction updateCard() {\n    var p = produits.find(p => p.currency === currency && p.period === period);\n    var o = p[offre];\n    document.querySelectorAll(\".phrase\").forEach(div=>div.innerHTML = phrases[period]);\n    document.querySelector(\".starter.f\").innerHTML = p.starter.f;\n    document.querySelector(\".starter.m\").innerHTML = p.starter.m;\n    document.querySelector(\".business.f\").innerHTML = p.business.f;\n    document.querySelector(\".business.m\").innerHTML = p.business.m;\n    document.querySelectorAll(\".store-card\").forEach(div=>div.classList.remove('active'));\n    document.getElementById(`${currency}.${period}.${offre}`)?.classList.add('active');\n    \n    if(offre===\"none\"){\n        document.getElementById(\"card\").classList.remove('no-first');\n    }else{\n        document.getElementById(\"card\").classList.add('no-first');\n    }\n\n}\n\nfunction createCard(){\n    var produitsHtml = produits.map(p => `<div id=\"${p.currency}.${p.period}.starter\" class=\"store-card\"><div class=\"vue-checkout\" data-type-product=\"company\" data-product-id=\"${p.starter.p}\"><\/div><\/div><div id=\"${p.currency}.${p.period}.business\" class=\"store-card\"><div class=\"vue-checkout\" data-type-product=\"company\" data-product-id=\"${p.business.p}\"><\/div><\/div><div id=\"${p.currency}.${p.period}.none\" class=\"store-card\"><div class=\"vue-checkout\" data-type-product=\"company\" data-product-id=\"${p.none.p}\"><\/div><\/div>`).join('');\n    document.getElementById(\"card\").innerHTML = produitsHtml;\n    document.getElementById(\"test\").innerHTML = produitsTest;\n    \n    const script = document.createElement('script');\n    script.src = scriptCard;\n    script.async = false;  \n    script.type = 'text\/javascript';\n    document.body.appendChild(script);\n        \n    setCurrency(currency);\n    setPeriod(period);\n    setOffre(offre);\n    updateCard();\n}\n\n<\/script>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    const keycloak = this._keycloak = new Keycloak({\n      url: ssoUrl,\n      realm: 'nina_solutions',\n      clientId: 'sitevitrine',\n    });\n    keycloak.init({\n        onLoad: 'check-sso',\n        silentCheckSsoRedirectUri: 'https:\/\/nina.solutions\/wp-content\/uploads\/2025\/12\/silent-check-sso.html',\n        checkLoginIframe: true,\n        redirectUri: window.location.origin + window.location.pathname\n    }).then(authenticated => {\n        if(!authenticated) {\n            let message = `<p>Connectez-vous pour acc\u00e9der \u00e0 nos offres.<\/p><a href='#' id=\"login-btn\" class=\"elementor-button\">Se connecter<\/a>`;\n            document.querySelector('#sso-message').innerHTML = message;\n            document.querySelector('#login-btn').addEventListener('click', () => {\n                keycloak.login({\n                    redirectUri: window.location.href\n                });\n            });\n            return;\n        }\n        const user = keycloak.tokenParsed;\n        if (user.showcase_website_pricing!==\"1\"){\n            let message = `<p>Bonjour ${user.name},<\/p><p>Votre compte ne permet pas d'acc\u00e9der \u00e0 nos offres.<\/p><a href='https:\/\/help.nina.solutions\/contact' class=\"elementor-button\">Nous contacter<\/a>`;\n            document.querySelector('#sso-message').innerHTML = message;\n            return;\n        }\n        document.querySelector('.tarifs').style.display = 'block';\n        createCard();\n    });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tarif Semaine Mois Ann\u00e9e \u20ac $US $CA \u00c9conomisez 20% en vous abonnant \u00e0 l\u2019ann\u00e9e. 30 jours gratuits lors de votre premi\u00e8re souscription. Starter 9 \u20ac HT par moissans engagement + 2,00 \u20ac\/min de programmes upload\u00e9s Business 599 \u20ac HT par moissans engagement + 0,80 \u20ac\/min de programme upload\u00e9e Je poss\u00e8de d\u00e9j\u00e0 une offre et souhaite &#8230; <a title=\"Card Prod\" class=\"read-more\" href=\"https:\/\/nina.solutions\/fr\/prod-card\/\" aria-label=\"En savoir plus sur Card Prod\">Lire la suite<\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19852","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/pages\/19852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/comments?post=19852"}],"version-history":[{"count":167,"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/pages\/19852\/revisions"}],"predecessor-version":[{"id":21145,"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/pages\/19852\/revisions\/21145"}],"wp:attachment":[{"href":"https:\/\/nina.solutions\/fr\/wp-json\/wp\/v2\/media?parent=19852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}