Awin - Historique de nav 2

Format

Sidebox

COMPLEXITÉ

Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":":root {\n /* Règles CSS couleurs */\n --pm-primary-color: black;\n --pm-secondary-color: white;\n \t--pm-tertiary-color: grey;\n \n /* Sidebox Title configuration */\n --pm-font-family-1: 'Poppins', sans-serif;\n \t--pm-font-family-2: arial;\n }\n","mainStage":0,"name":"Awin - Historique de nav 2","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"0px","right":"0px"},"coverStyle":{"opacity":".6","background-color":"black","transition":"opacity .3s linear"},"iframeStyle":{},"wrapperClose":{"left":"-100%","transition":"left .3s linear"},"wrapperHidden":{"height":"94vh","width":"400px","top":"3vh","left":"-100%"},"wrapperOpen":{"left":"0vw","transition":"left .3s linear"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 35px;\n height: 35px;\n border-radius:100px;\n cursor: pointer;\n background:transparent;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .line{\n position: absolute;\n background:black;\n width: 20px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n \n \t@media only screen and (max-width: 640px) {\n .perfmaker-sidebar-wrapper {\n width: 95vw !important;\n height: 55vh !important;\n top: unset !important; \n bottom: 22.5%;\n left: 0vw;\n }\n }\n \n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');\n \n \n #template-root,\n .template-App {\n height: 100%;\n width: 100%;\n border-radius: 0 10px 10px 0;\n }\n \n .template-App {\n display: flex;\n background-color: var(--pm-secondary-color);\n align-items: center;\n flex-direction: column;\n \tfont-family: var(--pm-font-family-1);\n }\n \n .template-App p {\n margin: 0;\n font-family: var(--pm-font-family-1);\n font-weight: 600;\n font-size: calc(5px + 1vh);\n }\n \n .template-App .logo-container,\n .template-App .title-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n max-height: 10%;\n }\n \n .template-App .logo-container {\n align-items: center;\n \theight: 7vh;\n \t \tmargin-top: 1vh;\n }\n \n \n \n .template-App .logo-container img {\n height: 100%;\n }\n \n .template-App .title-container h1 {\n font-size: calc(8px + 2.3vh);\n text-align: center;\n font-family: var(--pm-font-family-1);\n font-weight: 600;\n \tline-height: 1em;\n position:relative;\n margin:1.5vh 0 2vh 0;\n }\n \n \n .template-App .products-container {\n display: flex;\n flex-direction: column;\n gap: 3.5vh;\n align-items: center;\n width: 100%;\n height: 70%;\n margin-top:1vh;\n }\n \n\t\t .product-container {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n width: 85%;\n height: 23%;\n -webkit-box-shadow: 1px 3px 7px rgba(178, 178, 178, 0.59);\n box-shadow: 1px 3px 7px rgba(178, 178, 178, 0.59);\n padding: calc(2px + .4vh);\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n z-index: 5 !important;\n pointer-events: auto;\n transition: .2s;\n }\n \n .template-App .product-container:hover {\n transform: translateY(-1px);\n transition: .2s;\n }\n \n .template-App .image-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 40%;\n overflow: hidden;\n pointer-events: none;\n }\n \n .template-App .image-container img {\n max-height: 70%;\n max-width: 90%;\n pointer-events: none;\n }\n \n .template-App .product-container .description-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 60%;\n height: 100%;\n }\n \n \n \n .template-App .product-container .ref {\n color: var(--pm-primary-color);\n margin-bottom: calc(2px + .2vh);\n line-height: 1.25em;\n font-size: calc(8px + 1vh);\n text-align:left;\n display: -webkit-box;\n max-width: 100%;\n width: 100%;\n line-height: 1;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n \n \n .product-cta{\n margin-top:1vh;\n margin-right: 4vw;\n background-color:var(--pm-primary-color);\n color:white;\n border:1px black solid;\n cursor:pointer;\n padding: 1vh 0;\n width:65%;\n font-weight:400;\n font-size:calc(8px + 1vh);\n transition:all ease .3s;\n display:flex;\n justify-content:center;\n align-items:center;\n text-align: center;\n }\n .product-cta:hover{\n background-color:var(--pm-secondary-color);\n color:var(--pm-primary-color);\n }\n .link{\n \tposition:absolute;\n height:100%;\n width:100%;\n top:0;\n left:0;\n cursor:pointer;\n }\n \n \n \n \n \n @media only screen and (max-width: 399px) {\n .template-App .title-container h1 {\n font-size: calc(8px + 2vh) !important;\n margin:1.5vh 0 !important;\n }\n .template-App .logo-container {\n \theight: 10vh !important;\n }\n \n .products-container{\n \tflex-direction:row !important;\n flex-wrap:wrap !important;\n gap:2vw !important;\n justify-content:center !important;\n height:80% !important;\n }\n .product-container{\n \twidth:46% !important;\n height: 40% !important;\n }\n .product-cta{\n \twidth:97% !important\n }\n .template-App .product-container .description-container {\n \tjustify-content: center !important;\n gap:1vh !important;\n \t }\n .template-App .product-container .ref {\t\n }\n \n \n</style>\n\n<div id=\"template-root\">\n <div class=\"template-App\">\n <div class=\"logo-container\">\n <img src=\"https://img.perfmaker.net/1101/1675954845_Logo.png\" alt=\"logo\">\n </div>\n <div class=\"title-container\">\n <h1>\n Derniers produits vus :\n </h1>\n </div>\n \n \n <div class=\"products-container perfmaker-for\" data-key=\"BASKET_HISTORICS.historique\" data-varname=\"historique\">\n \n \n <div class=\"product-container perfmaker-data perfmaker-action\" id=\"produit\">\n <a class=\"perfmaker-action link\" data-url=\"${produits_complementaires.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\"></a>\n <div class=\"image-container\">\n <img src=\"https://img.perfmaker.net/1111/1663154624_image%203%20(2).png\" alt=\"\" class=\"perfmaker-data\" data-attribute-src=\"${historique.product_image}\">\n </div>\n <div class=\"description-container\">\n <p class=\"ref perfmaker-data\" data-key=\"historique.product_name\">\n Titre du produit\n </p>\n \n \n \n <a id=\"link\" class=\"perfmaker-action product-cta\" data-url=\"${historique.link}\" data-onclick=\"KEEP_SIDEBAR_OPEN\" data-target=\"_blank\" target=\"_blank\">Voir le produit</a>\n \n </div>\n </div>\n \n \n </div>\n \n </div>\n</div>","name":"","notBlocking":true}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}