{"id":14311,"date":"2025-05-16T15:06:12","date_gmt":"2025-05-16T13:06:12","guid":{"rendered":"https:\/\/pullit.eu\/?page_id=14311"},"modified":"2025-10-06T19:27:12","modified_gmt":"2025-10-06T17:27:12","slug":"pullit-cargoessential-farbe","status":"publish","type":"page","link":"https:\/\/pullit.eu\/en\/pullit-cargoessential-farbe\/","title":{"rendered":"Pullit! CargoEssential Farbe"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14311\" class=\"elementor elementor-14311\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8758ce e-flex e-con-boxed e-con e-parent\" data-id=\"c8758ce\" 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-31fdb24 elementor-widget elementor-widget-heading\" data-id=\"31fdb24\" 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-ac42910 e-flex e-con-boxed e-con e-parent\" data-id=\"ac42910\" 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-4ed21a1 elementor-widget elementor-widget-html\" data-id=\"4ed21a1\" 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=\"14238\" \/>\r\n    <input type=\"hidden\" id=\"variation_id_input\" name=\"variation_id\" \/>\r\n    <input type=\"hidden\" name=\"product_id\" value=\"14238\" \/>\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: 14255, color: \"#fde249\" },\r\n    { name: \"Poppy Red\", id: 14256, color: \"#e54530\" },\r\n    { name: \"Geranium Red\", id: 14257, color: \"#c82d30\" },\r\n    { name: \"Burgundy\", id: 14258, color: \"#7e2930\" },\r\n    { name: \"Magenta\", id: 14259, color: \"#d4457d\" },\r\n    { name: \"Cobalt Blue\", id: 14260, color: \"#2b3044\" },\r\n    { name: \"Ultramarine Blue\", id: 14261, color: \"#2c418a\" },\r\n    { name: \"Gentian Blue\", id: 14262, color: \"#408abf\" },\r\n    { name: \"Turquoise\", id: 14263, color: \"#328399\" },\r\n    { name: \"Mint\", id: 14264, color: \"#80d1be\" },\r\n    { name: \"Cactus Green\", id: 14265, color: \"#287c58\" },\r\n    { name: \"Lime\", id: 14266, color: \"#82d058\" },\r\n    { name: \"White\", id: 14267, color: \"#f9f9f9\" },\r\n    { name: \"Light Grey\", id: 14268, color: \"#9fa7b2\" },\r\n    { name: \"Dark Grey\", id: 14269, color: \"#596466\" },\r\n    { name: \"Black\", id: 14270, color: \"#171817\" },\r\n  ];\r\n\r\n  const slugMap = {\r\n    14255: \"butter-yellow\",\r\n    14256: \"poppy-red\",\r\n    14257: \"geranium-red\",\r\n    14258: \"burgundy\",\r\n    14259: \"magenta\",\r\n    14260: \"cobalt-blue\",\r\n    14261: \"ultramarine-blue\",\r\n    14262: \"gentian-blue\",\r\n    14263: \"turquoise\",\r\n    14264: \"mint\",\r\n    14265: \"cactus-green\",\r\n    14266: \"lime\",\r\n    14267: \"white\",\r\n    14268: \"light-grey\",\r\n    14269: \"dark-grey\",\r\n    14270: \"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  \/\/ Add attribute input (for WooCommerce variation matching)\r\n  let attrInput = document.querySelector(\"input[name='attributes[pa_farbe-basic]']\");\r\n  if (!attrInput) {\r\n    attrInput = document.createElement(\"input\");\r\n    attrInput.type = \"hidden\";\r\n    attrInput.name = \"attributes[pa_farbe-basic]\";\r\n    document.querySelector(\"form.variations_form\").appendChild(attrInput);\r\n  }\r\n  attrInput.value = slugMap[v.id];\r\n\r\n  const isFree = [14255, 14257, 14262].includes(v.id);\r\n  document.getElementById(\"priceDisplay\").textContent = isFree\r\n    ? `${v.name} (Standard)`\r\n    : `${v.name} (+20 \u20ac)`;\r\n});\r\n\r\n\r\n    colorOptions.appendChild(dot);\r\n  });\r\n\r\n  \/\/ Optional UX: Disable button while submitting\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-e93cd62 e-flex e-con-boxed e-con e-parent\" data-id=\"e93cd62\" 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-f6b0929 elementor-widget elementor-widget-spacer\" data-id=\"f6b0929\" 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":"disabled","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-14311","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/pages\/14311","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=14311"}],"version-history":[{"count":0,"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/pages\/14311\/revisions"}],"wp:attachment":[{"href":"https:\/\/pullit.eu\/en\/wp-json\/wp\/v2\/media?parent=14311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}