Search code examples
wordpressdivi

Woocommerce Dynamic data (this product) in divi custom module (create-divi-extension)

Problem Description

I'm new to building custom modules and I'm following this tutorial to create a new Divi module as we want to use woocommerce for our project but the woo modules aren't fit 100% to our needs, is there a guide or something that specify how to get the product data and insert it into the module I'm creating?

The product in question would have custom attributes so some existing modules are OK, but I'd need to create some of them and I need to access the data coming from the DB.

Steps To Reproduce

this is my PHP code

<?php

class wsdm_Stars extends ET_Builder_Module
{

    public $slug       = 'wsdm_woo_stars';
    public $vb_support = 'on';

    public function init()
    {
        $this->name = esc_html__('Woocommerce Stars', 'wsdm-woo-stars');
    }

    public function get_fields()
    {
        return array(
            'heading'     => array(
                'label'           => et_builder_i18n('Heading'),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => esc_html__('Input your desired heading here.', 'wsdm-woo-stars'),
                'toggle_slug'     => 'main_content',
                'dynamic_content' => 'text',
            ),
        );
    }

    private function renderStars(int $stars)
    {
        return str_repeat('<div className="wsdm-star-rating"></div>', (int)$stars);
    }

    public function render($attrs, $content = null, $render_slug)
    {
        return sprintf(
            '<div className="wsdm-product">
                <div className="wsdm-product-rating">
                    <span>Estrellas: </span>
                    %2$s
                </div>
            </div>',
            esc_html($this->props['heading']),
            $this->renderStars($this->props['heading']),
        );
    }
}

new wsdm_Stars;

For this particular module, I need only the estrellas attribute, but Ideally, I'd like to get all of the attributes directly in PHP or JS and then format them directly without the need to select the dynamic data in the Divi module on the website.

Screenshot

just for testing purposes, I managed to get the product title as it's a standard field but the render isn't what I was expecting image

this is the jsx code to printout the dynamic data

<h1 className="wsdm_stars">{this.props.heading}</h1>

and this is the data I want to access, the estrellas attribute image

Solution

  • after a bit of reverse engineering and no support at all from Divi...they told me:

    The GitHube repo's main scope is to gather information in case something goes wrong regarding the basic setup of a custom Divi module. That's not a support "forum". You might also have better luck by checking our vetted partners, Codeable or WP Buffs.

    Apparently, Divi has better things to do than give support to a product they created...

    I found out that I have access to classes directly in my extension so I came out with this code:

    public function render($attrs, $content = null, $render_slug)
{
    $product = ET_Builder_Module_Helper_Woocommerce_Modules::get_product(trim(ET_Builder_Element::get_current_post_id()));

...
...

$this->get_prod_attrs($product->get_attributes())['pa_estrellas'][0]

    with a bit of manipulation I got the attributes accessible via array style.

    function get_prod_attrs($product)
{
    $wc_attr_objs = $product;
    $prod_attrs = [];

    foreach ($wc_attr_objs as $wc_attr => $wc_term_objs) {
        $prod_attrs[$wc_attr] = [];
        $wc_terms = $wc_term_objs->get_terms();
        foreach ($wc_terms as $wc_term) {
            array_push($prod_attrs[$wc_attr], trim($wc_term->slug));
        }
    }
    return $prod_attrs;
}