Search code examples
phpwordpresswoocommerceshopping-cart

Multiple thumbnails in checkout section on woocommerce/fancy product designer

In my Woocommerce website users can design their own up to 6 different images via Fancy product designer plugin. I'm trying to output those users thumbnails on cart items in checkout page instead of just showing one product image.

Website I'm trying to make this possible.

enter image description here (example photo)

class-wc-cart.php

$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom->loadHTML( $thumbnail );
$xpath = new DOMXPath( $dom );
libxml_clear_errors();

$doc = $dom->getElementsByTagName("img")->item(1);
$src = $xpath->query(".//@src");
$srcset = $xpath->query(".//@srcset");

// custom image from customer 
foreach ( $src as $s ) {
    $s->nodeValue = $fpd_data['fpd_product_thumbnail'];
}
foreach ( $srcset as $s ) {
    $s->nodeValue = $fpd_data['fpd_product_thumbnail'];
}
return $dom->saveXML( $doc );

I use a foreach to loop through the images from fancy product designer. But it's like it's just lists the first image in my checkout.

Any idea if it's even possible or I should use another approach in the class-wc-cart.php file in woocommerce.

class-wc-product.php

//the additional form fields
public function add_product_designer_form() {

        global $post;
        $product_settings = new FPD_Product_Settings($post->ID);

        if( $product_settings->show_designer() ) {
            ?>
            <input type="hidden" value="<?php echo esc_attr( $post->ID ); ?>" name="add-to-cart" />
            <input type="hidden" value="" name="fpd_product" />
            <input type="hidden" value="" name="fpd_product_thumbnail[]" />
            <input type="hidden" value="<?php echo isset($_GET['cart_item_key']) ? $_GET['cart_item_key'] : ''; ?>" name="fpd_remove_cart_item" />
            <?php

            if( !fpd_get_option('fpd_wc_disable_price_calculation') )
                echo '<input type="hidden" value="" name="fpd_product_price" />';

            do_action('fpd_product_designer_form_end', $product_settings);
        }
}

In the code there is a function "after_product_designer" where I add some jquery code to get the input field that is supposed to post multiple fpd_thumbnails from FPD.

It's in if(order.product != false)

    var values = [];

if(<?php echo fpd_get_option('fpd_cart_custom_product_thumbnail'); ?>) {
    // $cartForm.find('input[name="fpd_product_thumbnail"]').val(dataURL); (OLD/Original)

    $('input[name="fpd_product_thumbnail[]"]').each(function(){ // NEW 
     values.push($(this).val(dataURL));
    });
}
Solution

  • I found a solution to extract base64 images from fancy product designer and list in my checkout. Somehow they are all combined in one vertical base64 file. Haven't found a solution for that yet. But this is not related for this topic.

    Change: class-wc-product.php and change fancyProductDesigner.viewInstances[0].toDataURL to fancyProductDesigner.getProductDataURL This creates all views in one data URL. The different views will be positioned below each other as mention in FPD jquery documentation.

    Change: class-wc-order.php function add_order_item_meta to below code.

    public function add_order_item_meta( $item_id, $item ) {

        $fpd_data = null;
        if( isset( $item->legacy_values['_fpd_data'] ) )  // WC 3.0+
            $fpd_data = $item->legacy_values['_fpd_data'];
        else if( isset( $item['_fpd_data'] ) )  // WC <3.0
            $fpd_data = $item['_fpd_data'];

        if( !is_null($fpd_data) ) {
            wc_add_order_item_meta( $item_id, '_fpd_data', $fpd_data);
        }
    }

    That's my solution.