{"id":15193,"date":"2025-09-16T19:54:45","date_gmt":"2025-09-16T17:54:45","guid":{"rendered":"https:\/\/pullit.eu\/?page_id=15193"},"modified":"2025-10-06T19:25:12","modified_gmt":"2025-10-06T17:25:12","slug":"pullit-cargopro-farbe","status":"publish","type":"page","link":"https:\/\/pullit.eu\/en\/pullit-cargopro-farbe\/","title":{"rendered":"Pullit! CargoPro Farbe"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15193\" class=\"elementor elementor-15193\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fee450 e-flex e-con-boxed e-con e-parent\" data-id=\"1fee450\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7fb9993 elementor-widget elementor-widget-heading\" data-id=\"7fb9993\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">W\u00e4hle Deine Wunschfarbe aus!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eb9ad1e e-flex e-con-boxed e-con e-parent\" data-id=\"eb9ad1e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0dbf318 elementor-widget elementor-widget-html\" data-id=\"0dbf318\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  .color-selector-container {\r\n    text-align: center;\r\n    padding: 20px;\r\n    background-color: #F0F0F0;\r\n  }\r\n\r\n  .product-image {\r\n    margin: 0 auto 25px;\r\n  }\r\n\r\n  .color-options {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 0px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .color-dot {\r\n    width: 30px;\r\n    height: 30px;\r\n    border-radius: 0%;\r\n    border: 0px solid #F0F0F0;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .color-dot.active {\r\n    border: 2px solid black;\r\n  }\r\n\r\n  .add-button {\r\n    padding: 10px 20px;\r\n    font-size: 16px;\r\n    background-color: #E9002D;\r\n    border: 1px solid #E9002D;\r\n    color: #fff;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .add-button:hover {\r\n    background-color: #F0F0F0 !important;\r\n    border: 1px solid #1F0602 !important;\r\n    color: #1F0602;\r\n  }\r\n\r\n  .add-button:disabled {\r\n    background-color: #E9002D;\r\n    border: 1px solid #E9002D;\r\n    opacity: .5;\r\n    cursor: not-allowed;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"color-selector-container\">\r\n  <img decoding=\"async\" id=\"productImage\" class=\"product-image\" src=\"https:\/\/pullit.eu\/wp-content\/uploads\/2025\/05\/default.png\" alt=\"Product preview\" \/>\r\n\r\n  <div class=\"color-options\" id=\"colorOptions\"><\/div>\r\n\r\n  <div id=\"priceDisplay\" style=\"font-size: 1.1em; font-weight: normal; margin-bottom: 15px;\">\r\n    Ihre Farbe, Ihr Stil \u2013 klicke auf eine Farbe.\r\n  <\/div>\r\n\r\n  <form class=\"variations_form\" method=\"post\" action=\"\">\r\n    <input type=\"hidden\" name=\"add-to-cart\" value=\"15156\" \/>\r\n    <input type=\"hidden\" id=\"variation_id_input\" name=\"variation_id\" \/>\r\n    <input type=\"hidden\" name=\"product_id\" value=\"15156\" \/>\r\n    <input type=\"hidden\" name=\"quantity\" value=\"1\" \/>\r\n    <button type=\"submit\" class=\"add-button\" disabled>Zum Einkaufswagen hinzuf\u00fcgen<\/button>\r\n  <\/form>\r\n<\/div>\r\n\r\n<script>\r\n  const variations = [\r\n    { name: \"Butter Yellow\", id: 15157, color: \"#fde249\" },\r\n    { name: \"Poppy Red\", id: 15158, color: \"#e54530\" },\r\n    { name: \"Geranium Red\", id: 15159, color: \"#c82d30\" },\r\n    { name: \"Burgundy\", id: 15160, color: \"#7e2930\" },\r\n    { name: \"Magenta\", id: 15161, color: \"#d4457d\" },\r\n    { name: \"Cobalt Blue\", id: 15162, color: \"#2b3044\" },\r\n    { name: \"Ultramarine Blue\", id: 15163, color: \"#2c418a\" },\r\n    { name: \"Gentian Blue\", id: 15164, color: \"#408abf\" },\r\n    { name: \"Turquoise\", id: 15165, color: \"#328399\" },\r\n    { name: \"Mint\", id: 15166, color: \"#80d1be\" },\r\n    { name: \"Cactus Green\", id: 15167, color: \"#287c58\" },\r\n    { name: \"Lime\", id: 15168, color: \"#82d058\" },\r\n    { name: \"White\", id: 15169, color: \"#f9f9f9\" },\r\n    { name: \"Light Grey\", id: 15170, color: \"#9fa7b2\" },\r\n    { name: \"Dark Grey\", id: 15171, color: \"#596466\" },\r\n    { name: \"Black\", id: 15172, color: \"#171817\" },\r\n  ];\r\n\r\n  const slugMap = {\r\n    15157: \"butter-yellow\",\r\n    15158: \"poppy-red\",\r\n    15159: \"geranium-red\",\r\n    15160: \"burgundy\",\r\n    15161: \"magenta\",\r\n    15162: \"cobalt-blue\",\r\n    15163: \"ultramarine-blue\",\r\n    15164: \"gentian-blue\",\r\n    15165: \"turquoise\",\r\n    15166: \"mint\",\r\n    15167: \"cactus-green\",\r\n    15168: \"lime\",\r\n    15169: \"white\",\r\n    15170: \"light-grey\",\r\n    15171: \"dark-grey\",\r\n    15172: \"black\",\r\n  };\r\n\r\n  const colorOptions = document.getElementById(\"colorOptions\");\r\n  const productImage = document.getElementById(\"productImage\");\r\n  const variationInput = document.getElementById(\"variation_id_input\");\r\n  const addButton = document.querySelector(\".add-button\");\r\n\r\n  variations.forEach(v => {\r\n    const dot = document.createElement(\"div\");\r\n    dot.className = \"color-dot\";\r\n    dot.style.backgroundColor = v.color;\r\n    dot.title = v.name;\r\n    dot.dataset.variationId = v.id;\r\n\r\n    dot.addEventListener(\"click\", () => {\r\n      document.querySelectorAll(\".color-dot\").forEach(d => d.classList.remove(\"active\"));\r\n      dot.classList.add(\"active\");\r\n      variationInput.value = v.id;\r\n      productImage.src = `https:\/\/pullit.eu\/wp-content\/uploads\/2025\/05\/${v.id}.png`;\r\n      addButton.disabled = false;\r\n\r\n      let attrInput = document.querySelector(\"input[name='attributes[pa_farbe-comfort]']\");\r\n      if (!attrInput) {\r\n        attrInput = document.createElement(\"input\");\r\n        attrInput.type = \"hidden\";\r\n        attrInput.name = \"attributes[pa_farbe-comfort]\";\r\n        document.querySelector(\"form.variations_form\").appendChild(attrInput);\r\n      }\r\n      attrInput.value = slugMap[v.id];\r\n\r\n      document.getElementById(\"priceDisplay\").textContent = v.name;\r\n    });\r\n\r\n    colorOptions.appendChild(dot);\r\n  });\r\n\r\n  document.querySelector(\"form.variations_form\").addEventListener(\"submit\", function () {\r\n    const button = this.querySelector('button.add-button');\r\n    button.disabled = true;\r\n    button.textContent = \"Adding...\";\r\n  });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c00db1 e-flex e-con-boxed e-con e-parent\" data-id=\"9c00db1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8dc00c elementor-widget elementor-widget-spacer\" data-id=\"b8dc00c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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>W\u00e4hle Deine Wunschfarbe aus! Ihre Farbe, Ihr Stil \u2013 klicke auf eine Farbe. Zum Einkaufswagen hinzuf\u00fcgen<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/pages\/15193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/comments?post=15193"}],"version-history":[{"count":0,"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/pages\/15193\/revisions"}],"wp:attachment":[{"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/media?parent=15193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}