← All changes
|
includes/elementor/modules/checkout/widgets/style-controls.php
+171
-4
1.2.3
→
2.7.0
View file →
| @@ -3,8 +3,12 @@ | ||
| 3 | 3 | namespace Sellkit\Elementor\Modules\Checkout\Widgets; |
| 4 | 4 | |
| 5 | 5 | defined( 'ABSPATH' ) || die(); |
| 6 | 6 | |
| 7 | +use Elementor\Controls_Manager; | |
| 8 | +use Elementor\Group_Control_Typography; | |
| 9 | +use Elementor\Core\Kits\Documents\Tabs\Global_Colors; | |
| 10 | + | |
| 7 | 11 | class Style_Controls extends \Sellkit_Elementor_Checkout_Widget { |
| 8 | 12 | public function __construct() { |
| 9 | 13 | $this->form_style(); |
| 10 | 14 | $this->heading_style(); |
| @@ -113,8 +117,24 @@ | ||
| 113 | 117 | 'tab' => 'style', |
| 114 | 118 | ] |
| 115 | 119 | ); |
| 116 | 120 | |
| 121 | + $this->add_responsive_control( | |
| 122 | + 'section_heading_style_padding', | |
| 123 | + [ | |
| 124 | + 'label' => esc_html__( 'Padding', 'sellkit' ), | |
| 125 | + 'type' => 'dimensions', | |
| 126 | + 'size_units' => [ 'px', '%', 'em' ], | |
| 127 | + 'selectors' => [ | |
| 128 | + '{{WRAPPER}} .heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 129 | + '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-one-page-checkout-shipping .shipping_address #shipping_text_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 130 | + '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-second #shipping_header_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 131 | + '{{WRAPPER}} #sellkit-checkout-widget-id form .sellkit-multistep-checkout-third #payment_method_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 132 | + '{{WRAPPER}} #sellkit-checkout-widget-id h4#shipping_header_title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 133 | + ], | |
| 134 | + ] | |
| 135 | + ); | |
| 136 | + | |
| 117 | 137 | $this->add_group_control( |
| 118 | 138 | 'typography', |
| 119 | 139 | [ |
| 120 | 140 | 'name' => 'heading_typography2', |
| @@ -177,13 +197,27 @@ | ||
| 177 | 197 | |
| 178 | 198 | $this->add_control( |
| 179 | 199 | 'sub_heading_title', |
| 180 | 200 | [ |
| 181 | - 'label' => esc_html__( 'Sub Heading', 'sellkit' ), | |
| 201 | + 'show_label' => false, | |
| 182 | 202 | 'type' => 'raw_html', |
| 203 | + 'raw' => esc_html__( 'Sub Heading', 'sellkit' ), | |
| 204 | + 'content_classes' => 'sellkit-elementor-editor-bulk-text' | |
| 183 | 205 | ] |
| 184 | 206 | ); |
| 185 | 207 | |
| 208 | + $this->add_responsive_control( | |
| 209 | + 'section_sub_heading_style_padding', | |
| 210 | + [ | |
| 211 | + 'label' => esc_html__( 'Padding', 'sellkit' ), | |
| 212 | + 'type' => 'dimensions', | |
| 213 | + 'size_units' => [ 'px', '%', 'em' ], | |
| 214 | + 'selectors' => [ | |
| 215 | + '{{WRAPPER}} #sellkit-checkout-widget-id .sub-heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 216 | + ], | |
| 217 | + ] | |
| 218 | + ); | |
| 219 | + | |
| 186 | 220 | $this->add_group_control( |
| 187 | 221 | 'typography', |
| 188 | 222 | [ |
| 189 | 223 | 'name' => 'sub-heading_typography', |
| @@ -245,9 +279,11 @@ | ||
| 245 | 279 | 'border', |
| 246 | 280 | [ |
| 247 | 281 | 'name' => 'divider_border', |
| 248 | 282 | 'label' => esc_html__( 'Border', 'sellkit' ), |
| 249 | - 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-divider', | |
| 283 | + 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-divider, | |
| 284 | + {{WRAPPER}} #sellkit-checkout-widget-id #order_review #sellkit-checkout-widget-order-review-wrap .sellkit-checkout-widget-divider, | |
| 285 | + {{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-multistep-inner-wrap .sellkit-checkout-widget-divider', | |
| 250 | 286 | ] |
| 251 | 287 | ); |
| 252 | 288 | |
| 253 | 289 | $this->add_responsive_control( |
| @@ -495,8 +531,37 @@ | ||
| 495 | 531 | 'type' => 'heading', |
| 496 | 532 | ] |
| 497 | 533 | ); |
| 498 | 534 | |
| 535 | + $this->add_responsive_control( | |
| 536 | + 'button_primary_size_width', | |
| 537 | + [ | |
| 538 | + 'label' => esc_html__( 'Width', 'sellkit' ), | |
| 539 | + 'type' => 'slider', | |
| 540 | + 'size_units' => [ 'px', '%', 'em', 'custom' ], | |
| 541 | + 'range' => [ | |
| 542 | + 'px' => [ | |
| 543 | + 'min' => 0, | |
| 544 | + 'max' => 1000, | |
| 545 | + 'step' => 1, | |
| 546 | + ], | |
| 547 | + '%' => [ | |
| 548 | + 'min' => 0, | |
| 549 | + 'max' => 100, | |
| 550 | + 'step' => 1, | |
| 551 | + ], | |
| 552 | + 'em' => [ | |
| 553 | + 'min' => 0, | |
| 554 | + 'max' => 10, | |
| 555 | + 'step' => 0.1, | |
| 556 | + ], | |
| 557 | + ], | |
| 558 | + 'selectors' => [ | |
| 559 | + '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button' => 'width: {{SIZE}}{{UNIT}} !important;', | |
| 560 | + ], | |
| 561 | + ] | |
| 562 | + ); | |
| 563 | + | |
| 499 | 564 | $this->start_controls_tabs( |
| 500 | 565 | 'button_primary_style_tabs' |
| 501 | 566 | ); |
| 502 | 567 | |
| @@ -513,8 +578,9 @@ | ||
| 513 | 578 | 'label' => esc_html__( 'Text Color', 'sellkit' ), |
| 514 | 579 | 'type' => 'color', |
| 515 | 580 | 'selectors' => [ |
| 516 | 581 | '{{WRAPPER}} .sellkit-checkout-widget-primary-button' => 'color: {{VALUE}} !important', |
| 582 | + '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button' => 'color: {{VALUE}}', | |
| 517 | 583 | ], |
| 518 | 584 | ] |
| 519 | 585 | ); |
| 520 | 586 | |
| @@ -523,8 +589,16 @@ | ||
| 523 | 589 | [ |
| 524 | 590 | 'name' => 'button_primary_normal_typography', |
| 525 | 591 | 'label' => esc_html__( 'Typography', 'sellkit' ), |
| 526 | 592 | 'selector' => '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-widget-primary-button', |
| 593 | + 'fields_options' => [ | |
| 594 | + 'typography' => [ | |
| 595 | + 'default' => 'yes', | |
| 596 | + ], | |
| 597 | + 'text_transform' => [ | |
| 598 | + 'default' => 'none', | |
| 599 | + ], | |
| 600 | + ], | |
| 527 | 601 | ] |
| 528 | 602 | ); |
| 529 | 603 | |
| 530 | 604 | $this->add_control( |
| @@ -533,8 +607,9 @@ | ||
| 533 | 607 | 'label' => esc_html__( 'Background Color', 'sellkit' ), |
| 534 | 608 | 'type' => 'color', |
| 535 | 609 | 'selectors' => [ |
| 536 | 610 | '{{WRAPPER}} .sellkit-checkout-widget-primary-button' => 'background-color: {{VALUE}} !important', |
| 611 | + '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button' => 'background-color: {{VALUE}}', | |
| 537 | 612 | ], |
| 538 | 613 | ] |
| 539 | 614 | ); |
| 540 | 615 | |
| @@ -553,8 +628,10 @@ | ||
| 553 | 628 | 'label' => esc_html__( 'Text Color', 'sellkit' ), |
| 554 | 629 | 'type' => 'color', |
| 555 | 630 | 'selectors' => [ |
| 556 | 631 | '{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'color: {{VALUE}} !important', |
| 632 | + '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button:hover' => 'color: {{VALUE}}', | |
| 633 | + '{{WRAPPER}} .sellkit-checkout-widget-main-wrapper #sellkit-checkout-widget-id form .place-order #place_order:is(button):hover' => 'color: {{VALUE}}', | |
| 557 | 634 | ], |
| 558 | 635 | ] |
| 559 | 636 | ); |
| 560 | 637 | |
| @@ -573,8 +650,10 @@ | ||
| 573 | 650 | 'label' => esc_html__( 'Background Color', 'sellkit' ), |
| 574 | 651 | 'type' => 'color', |
| 575 | 652 | 'selectors' => [ |
| 576 | 653 | '{{WRAPPER}} .sellkit-checkout-widget-primary-button:hover' => 'background-color: {{VALUE}} !important', |
| 654 | + '{{WRAPPER}} #sellkit-checkout-widget-id .place-order .sellkit-checkout-widget-primary-button:hover' => 'background-color: {{VALUE}}', | |
| 655 | + '{{WRAPPER}} .sellkit-checkout-widget-main-wrapper #sellkit-checkout-widget-id form .place-order #place_order:is(button):hover' => 'background-color: {{VALUE}}', | |
| 577 | 656 | ], |
| 578 | 657 | ] |
| 579 | 658 | ); |
| 580 | 659 | |
| @@ -764,8 +843,31 @@ | ||
| 764 | 843 | 'selector' => '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-return-button > span', |
| 765 | 844 | ] |
| 766 | 845 | ); |
| 767 | 846 | |
| 847 | + $this->add_control( | |
| 848 | + 'button_return_link_icon_size', | |
| 849 | + [ | |
| 850 | + 'label' => esc_html__( 'Icon Size', 'sellkit' ), | |
| 851 | + 'type' => Controls_Manager::SLIDER, | |
| 852 | + 'size_units' => [ 'px' ], | |
| 853 | + 'range' => [ | |
| 854 | + 'px' => [ | |
| 855 | + 'min' => 0, | |
| 856 | + 'max' => 200, | |
| 857 | + 'step' => 1, | |
| 858 | + ], | |
| 859 | + ], | |
| 860 | + 'default' => [ | |
| 861 | + 'unit' => 'px', | |
| 862 | + 'size' => 15, | |
| 863 | + ], | |
| 864 | + 'selectors' => [ | |
| 865 | + '{{WRAPPER}} .woocommerce-checkout .sellkit-checkout-widget-return-button > svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', | |
| 866 | + ], | |
| 867 | + ] | |
| 868 | + ); | |
| 869 | + | |
| 768 | 870 | $this->start_controls_tabs( |
| 769 | 871 | 'button_return_link_style_tabs' |
| 770 | 872 | ); |
| 771 | 873 | |
| @@ -783,8 +885,9 @@ | ||
| 783 | 885 | 'type' => 'color', |
| 784 | 886 | 'selectors' => [ |
| 785 | 887 | '{{WRAPPER}} .sellkit-checkout-widget-return-button > span' => 'color: {{VALUE}}', |
| 786 | 888 | '{{WRAPPER}} .sellkit-checkout-widget-return-button > i' => 'color: {{VALUE}}', |
| 889 | + '{{WRAPPER}} .sellkit-checkout-widget-return-button > svg' => 'fill: {{VALUE}}', | |
| 787 | 890 | ], |
| 788 | 891 | ] |
| 789 | 892 | ); |
| 790 | 893 | |
| @@ -840,9 +943,10 @@ | ||
| 840 | 943 | 'selector' => '{{WRAPPER}} .sellkit-widget-checkout-fields p input::placeholder, |
| 841 | 944 | .sellkit-widget-checkout-fields p select::placeholder, |
| 842 | 945 | #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title, |
| 843 | 946 | #sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title, |
| 844 | - #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder', | |
| 947 | + #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder, | |
| 948 | + .sellkit-checkout-order-fields .sellkit-checkout-order-notes label', | |
| 845 | 949 | ] |
| 846 | 950 | ); |
| 847 | 951 | |
| 848 | 952 | $this->add_control( |
| @@ -856,8 +960,9 @@ | ||
| 856 | 960 | '{{WRAPPER}} .sellkit-widget-checkout-fields p textarea::placeholder' => 'color: {{VALUE}}', |
| 857 | 961 | '{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-billing-field-wrapper .mini-title' => 'color: {{VALUE}}', |
| 858 | 962 | '{{WRAPPER}} #sellkit-checkout-widget-id #sellkit-checkout-widget-shipping-fields .mini-title' => 'color: {{VALUE}}', |
| 859 | 963 | '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon::placeholder' => 'color: {{VALUE}}', |
| 964 | + '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-order-notes label' => 'color: {{VALUE}}', | |
| 860 | 965 | ], |
| 861 | 966 | ] |
| 862 | 967 | ); |
| 863 | 968 | |
| @@ -891,8 +996,9 @@ | ||
| 891 | 996 | 'selectors' => [ |
| 892 | 997 | '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input' => 'color: {{VALUE}}', |
| 893 | 998 | '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea' => 'color: {{VALUE}}', |
| 894 | 999 | '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select' => 'color: {{VALUE}}', |
| 1000 | + '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-field-select .sellkit-select-appearance' => 'color: {{VALUE}}', | |
| 895 | 1001 | '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields option' => 'color: {{VALUE}}', |
| 896 | 1002 | '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon' => 'color: {{VALUE}}', |
| 897 | 1003 | ], |
| 898 | 1004 | ] |
| @@ -912,9 +1018,9 @@ | ||
| 912 | 1018 | [ |
| 913 | 1019 | 'name' => 'field_border', |
| 914 | 1020 | 'label' => esc_html__( 'Border', 'sellkit' ), |
| 915 | 1021 | 'selector' => ' {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields input, |
| 916 | - {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea, | |
| 1022 | + {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields textarea, | |
| 917 | 1023 | {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-widget-checkout-fields select, |
| 918 | 1024 | {{WRAPPER}} #sellkit-checkout-widget-id .sellkit-custom-coupon-form .jx-coupon', |
| 919 | 1025 | ] |
| 920 | 1026 | ); |
| @@ -988,8 +1094,35 @@ | ||
| 988 | 1094 | ] |
| 989 | 1095 | ); |
| 990 | 1096 | |
| 991 | 1097 | $this->add_control( |
| 1098 | + 'order_summary_style_heading_0', | |
| 1099 | + [ | |
| 1100 | + 'label' => esc_html__( 'Container', 'sellkit' ), | |
| 1101 | + 'type' => 'heading', | |
| 1102 | + 'condition' => [ | |
| 1103 | + 'layout-type' => 'multi-step', | |
| 1104 | + ], | |
| 1105 | + ] | |
| 1106 | + ); | |
| 1107 | + | |
| 1108 | + $this->add_responsive_control( | |
| 1109 | + 'order_summary_container_padding', | |
| 1110 | + [ | |
| 1111 | + 'label' => esc_html__( 'Padding', 'sellkit' ), | |
| 1112 | + 'type' => 'dimensions', | |
| 1113 | + 'separator' => 'after', | |
| 1114 | + 'size_units' => [ 'px', '%', 'em' ], | |
| 1115 | + 'selectors' => [ | |
| 1116 | + '{{WRAPPER}} #sellkit-checkout-widget-id .sellkit-checkout-right-column' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 1117 | + ], | |
| 1118 | + 'condition' => [ | |
| 1119 | + 'layout-type' => 'multi-step', | |
| 1120 | + ], | |
| 1121 | + ] | |
| 1122 | + ); | |
| 1123 | + | |
| 1124 | + $this->add_control( | |
| 992 | 1125 | 'order_summary_style_heading_1', |
| 993 | 1126 | [ |
| 994 | 1127 | 'label' => esc_html__( 'Product', 'sellkit' ), |
| 995 | 1128 | 'type' => 'heading', |
| @@ -1041,8 +1174,42 @@ | ||
| 1041 | 1174 | ] |
| 1042 | 1175 | ); |
| 1043 | 1176 | |
| 1044 | 1177 | $this->divider( 'order_summary_divider_1' ); |
| 1178 | + | |
| 1179 | + $this->add_control( | |
| 1180 | + 'order_summary_style_heading_product_variation', | |
| 1181 | + [ | |
| 1182 | + 'label' => esc_html__( 'Product Variation', 'sellkit' ), | |
| 1183 | + 'type' => 'heading', | |
| 1184 | + ] | |
| 1185 | + ); | |
| 1186 | + | |
| 1187 | + $this->add_group_control( | |
| 1188 | + Group_Control_Typography::get_type(), | |
| 1189 | + [ | |
| 1190 | + 'name' => 'product_variation_typography', | |
| 1191 | + 'selector' => '{{WRAPPER}} #sellkit-checkout-variations .sellkit-checkout-variation-item, | |
| 1192 | + {{WRAPPER}} #sellkit-checkout-variations i', | |
| 1193 | + ] | |
| 1194 | + ); | |
| 1195 | + | |
| 1196 | + $this->add_control( | |
| 1197 | + 'product_variation_text_color', | |
| 1198 | + [ | |
| 1199 | + 'label' => esc_html__( 'Color', 'sellkit' ), | |
| 1200 | + 'type' => Controls_Manager::COLOR, | |
| 1201 | + 'selectors' => [ | |
| 1202 | + '{{WRAPPER}} #sellkit-checkout-variations .sellkit-checkout-variation-item' => 'color: {{VALUE}} !important', | |
| 1203 | + '{{WRAPPER}} #sellkit-checkout-variations i' => 'color: {{VALUE}} !important', | |
| 1204 | + ], | |
| 1205 | + 'global' => [ | |
| 1206 | + 'default' => Global_Colors::COLOR_TEXT, | |
| 1207 | + ], | |
| 1208 | + ] | |
| 1209 | + ); | |
| 1210 | + | |
| 1211 | + $this->divider( 'order_summary_divider_variation_ends' ); | |
| 1045 | 1212 | |
| 1046 | 1213 | $this->add_control( |
| 1047 | 1214 | 'order_summary_style_heading_2', |
| 1048 | 1215 | [ |