File Editor
Directories:
.. (Back)
Files:
AddToCart.php
AdditionalInfo.php
Breadcrumb.php
CartNotice.php
CartProducts.php
CartTotals.php
CheckoutAdditionalInfo.php
CheckoutBilling.php
CheckoutOrderDetails.php
CheckoutPaymentInfo.php
CheckoutShipping.php
CrossSells.php
Description.php
Gallery.php
Images.php
Meta.php
Price.php
Rating.php
RelatedProducts.php
Reviews.php
Shop.php
Stock.php
Tabs.php
Title.php
Upsells.php
Create New File
Create
Edit File: Images.php
<?php /** * WooCommerce Modules: ET_Builder_Module_Woocommerce_Images class * * The ET_Builder_Module_Woocommerce_Images Class is responsible for rendering the * Image markup using the WooCommerce template. * * @package Divi\Builder * * @since 3.29 */ defined( 'ABSPATH' ) || exit; /** * Class representing WooCommerce Images component. */ class ET_Builder_Module_Woocommerce_Images extends ET_Builder_Module { /** * Initialize. */ public function init() { $this->name = esc_html__( 'Woo Product Images', 'et_builder' ); $this->plural = esc_html__( 'Woo Product Images', 'et_builder' ); $this->slug = 'et_pb_wc_images'; $this->vb_support = 'on'; $this->folder_name = 'et_pb_woo_modules'; $this->settings_modal_toggles = array( 'general' => array( 'toggles' => array( 'main_content' => et_builder_i18n( 'Content' ), 'elements' => et_builder_i18n( 'Elements' ), ), ), 'advanced' => array( 'toggles' => array( 'image' => et_builder_i18n( 'Image' ), 'sale_badge' => esc_html__( 'Sale Badge Text', 'et_builder' ), ), ), ); $this->advanced_fields = array( 'borders' => array( 'default' => array(), 'image' => array( 'css' => array( 'main' => array( 'border_radii' => '%%order_class%% div.images ol.flex-control-thumbs.flex-control-nav li, %%order_class%% .flex-viewport, %%order_class%% .woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper, %%order_class%% .woocommerce-product-gallery > div:not(.flex-viewport) .woocommerce-product-gallery__image, %%order_class%% .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image, %%order_class%% .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image', 'border_styles' => '%%order_class%% div.images ol.flex-control-thumbs.flex-control-nav li, %%order_class%% .flex-viewport, %%order_class%% .woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper, %%order_class%% .woocommerce-product-gallery > div:not(.flex-viewport) .woocommerce-product-gallery__image, %%order_class%% .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image', ), ), 'label_prefix' => et_builder_i18n( 'Image' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'image', ), 'sale_badge' => array( 'css' => array( 'main' => array( 'border_radii' => '%%order_class%% span.onsale', 'border_styles' => '%%order_class%% span.onsale', ), 'important' => true, ), 'defaults' => array( 'border_radii' => 'on|3px|3px|3px|3px', ), 'label_prefix' => esc_html__( 'Sale Badge', 'et_builder' ), 'tab_slug' => 'advanced', 'toggle_slug' => 'sale_badge', ), ), 'box_shadow' => array( 'default' => array(), 'image' => array( 'label' => esc_html__( 'Image Box Shadow', 'et_builder' ), 'option_category' => 'layout', 'tab_slug' => 'advanced', 'toggle_slug' => 'image', 'css' => array( 'main' => '%%order_class%% div.images ol.flex-control-thumbs.flex-control-nav li, %%order_class%% .flex-viewport, %%order_class%% .woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper, %%order_class%% .woocommerce-product-gallery > div:not(.flex-viewport) .woocommerce-product-gallery__image, %%order_class%% .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image', 'overlay' => 'inset', 'important' => true, ), ), 'sale_badge' => array( 'label' => esc_html__( 'Sale Badge Box Shadow', 'et_builder' ), 'option_category' => 'layout', 'tab_slug' => 'advanced', 'toggle_slug' => 'sale_badge', 'css' => array( 'main' => '%%order_class%% span.onsale', 'overlay' => 'inset', 'important' => true, ), ), ), 'background' => array(), 'margin_padding' => array( 'css' => array( 'important' => 'all', ), ), 'text_shadow' => array(), 'text' => false, 'fonts' => array( 'sale_badge' => array( 'label' => esc_html__( 'Sale Badge', 'et_builder' ), 'css' => array( 'main' => '%%order_class%% .et_pb_module_inner span.onsale', 'important' => 'all', ), 'hide_text_align' => true, 'line_height' => array( 'default' => '1.7em', ), 'font_size' => array( 'default' => '20px', ), 'letter_spacing' => array( 'default' => '0px', ), ), ), 'button' => false, 'form_field' => array( 'sale_badge' => array( 'label' => esc_html__( 'Sale Badge', 'et_builder' ), 'background_color' => false, 'text_color' => false, 'focus_background_color' => false, 'focus_text_color' => false, 'font_field' => false, 'margin_padding' => array( 'css' => array( 'main' => '%%order_class%% ul.products li.product span.onsale', 'important' => array( 'custom_margin', 'custom_padding' ), ), 'custom_margin' => array( 'default' => '0px|0px|0px|0px|false|false', ), 'custom_padding' => array( 'default' => '6px|18px|6px|18px|false|false', ), 'toggle_slug' => 'sale_badge', ), 'border_styles' => false, 'box_shadow' => false, ), ), ); $this->help_videos = array( array( 'id' => '7X03vBPYJ1o', 'name' => esc_html__( 'Divi WooCommerce Modules', 'et_builder' ), ), ); } /** * {@inheritdoc} */ public function get_fields() { $fields = array( 'product' => ET_Builder_Module_Helper_Woocommerce_Modules::get_field( 'product', array( 'default' => ET_Builder_Module_Helper_Woocommerce_Modules::get_product_default(), 'computed_affects' => array( '__images', ), ) ), 'product_filter' => ET_Builder_Module_Helper_Woocommerce_Modules::get_field( 'product_filter', array( 'computed_affects' => array( '__images', ), ) ), 'show_product_image' => array( 'label' => esc_html__( 'Show Featured Image', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => et_builder_i18n( 'On' ), 'off' => et_builder_i18n( 'Off' ), ), 'default_on_front' => 'on', 'toggle_slug' => 'elements', 'description' => esc_html__( 'Here you can choose whether product image should be displayed or not.', 'et_builder' ), 'computed_affects' => array( '__images', ), ), 'show_product_gallery' => array( 'label' => esc_html__( 'Show Gallery Images', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => et_builder_i18n( 'On' ), 'off' => et_builder_i18n( 'Off' ), ), 'default_on_front' => 'on', 'toggle_slug' => 'elements', 'description' => esc_html__( 'Here you can choose whether product gallery should be displayed or not.', 'et_builder' ), 'computed_affects' => array( '__images', ), ), 'show_sale_badge' => array( 'label' => esc_html__( 'Show Sale Badge', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => et_builder_i18n( 'On' ), 'off' => et_builder_i18n( 'Off' ), ), 'default_on_front' => 'on', 'toggle_slug' => 'elements', 'description' => esc_html__( 'Here you can choose whether Sale Badge should be displayed or not.', 'et_builder' ), 'computed_affects' => array( '__images', ), ), 'sale_badge_color' => array( 'label' => esc_html__( 'Sale Badge Color', 'et_builder' ), 'description' => esc_html__( 'Pick a color to use for the sales bade that appears on products that are on sale.', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'sale_badge', 'hover' => 'tabs', 'sticky' => true, 'mobile_options' => true, ), '__images' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Woocommerce_Images', 'get_images', ), 'computed_depends_on' => array( 'product', 'product_filter', 'show_product_image', 'show_product_gallery', 'show_sale_badge', ), 'computed_minimum' => array( 'product', ), ), 'force_fullwidth' => array( 'label' => esc_html__( 'Force Fullwidth', 'et_builder' ), 'description' => esc_html__( "When enabled, this will force your image to extend 100% of the width of the column it's in.", 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'layout', 'options' => array( 'off' => et_builder_i18n( 'No' ), 'on' => et_builder_i18n( 'Yes' ), ), 'default' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'image', 'affects' => array( 'max_width', 'width', ), ), ); return $fields; } /** * Get images output * * @since 4.12.0 Set $defaults['overwrite'] to array( 'product', 'post' ) * @since 3.29 * * @param array $args Additional args. * * @return string */ public static function get_images( $args = array() ) { /* * YITH Badge Management plugin executes only when * did_action( 'woocommerce_product_thumbnails' ) returns FALSE. * * The above wouldn't be the case when multiple Woo Images modules * are placed on the same page. * Hence the workaround is to reset the 'woocommerce_product_thumbnails' action. * * @link https://github.com/elegantthemes/Divi/issues/18530 */ global $wp_actions; $tag = 'woocommerce_product_thumbnails'; $reset = false; $value = 0; if ( isset( $wp_actions[ $tag ] ) ) { $value = $wp_actions[ $tag ]; $reset = true; unset( $wp_actions[ $tag ] ); } $defaults = array( 'product' => 'current', 'show_product_image' => 'on', 'show_product_gallery' => 'on', 'show_sale_badge' => 'on', ); $args = wp_parse_args( $args, $defaults ); $images = et_builder_wc_render_module_template( 'woocommerce_show_product_images', $args, array( 'product', 'post' ) ); /* * Reset changes made for YITH Badge Management plugin. * * That way we won't bleed creating new issues. * * @link https://github.com/elegantthemes/Divi/issues/18530 */ if ( $reset && ! isset( $wp_actions[ $tag ] ) ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited -- Fix compatibility. $wp_actions[ $tag ] = $value; } return $images; } /** * Renders the module output. * * @param array $attrs List of attributes. * @param string $content Content being processed. * @param string $render_slug Slug of module that is used for rendering output. * * @return string */ public function render( $attrs, $content, $render_slug ) { ET_Builder_Module_Helper_Woocommerce_Modules::process_background_layout_data( $render_slug, $this ); $sale_badge_color_hover = $this->get_hover_value( 'sale_badge_color' ); $sale_badge_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'sale_badge_color' ); $force_fullwidth = et_()->array_get( $this->props, 'force_fullwidth', 'off' ); $show_product_image = et_()->array_get( $this->props, 'show_product_image', 'off' ); // Sale Badge Color. $this->generate_styles( array( 'base_attr_name' => 'sale_badge_color', 'selector' => '%%order_class%% span.onsale', 'css_property' => 'background-color', 'important' => true, 'render_slug' => $render_slug, 'type' => 'color', ) ); // Image force fullwidth. if ( 'on' === $force_fullwidth ) { ET_Builder_Element::set_style( $render_slug, array( 'selector' => '%%order_class%% .woocommerce-product-gallery__image img', 'declaration' => 'width: 100%;', ) ); } // Toggle featured image. if ( 'off' === $show_product_image ) { ET_Builder_Element::set_style( $render_slug, array( 'selector' => '%%order_class%% .woocommerce-product-gallery__image--placeholder img[src*="woocommerce-placeholder"]', 'declaration' => 'visibility: hidden;', ) ); } $output = self::get_images( $this->props ); return $this->_render_module_wrapper( $output, $render_slug ); } } new ET_Builder_Module_Woocommerce_Images();
Save Changes
Rename File
Rename