Okay
  Public Ticket #2981480
Template for Offers PDF
Closed

Comments

  •  1
    Cameron started the conversation

    Hi,

    I was wondering if there is a template that I can edit to change the "Offers" PDF that can be downloaded from B2B king?

    Thanks,
    Cameron McAdam

    Bright Light Marketing

  •  2,192
    WebWizards replied

    Hi Cameron,

    The way the "offers" PDF works is that we generate it by using a JavaScript PDF generation library named PDFMAKE : http://pdfmake.org/ 

    To change the design or layout or downloaded PDFs, you'd need to make changes to the JS parameters used when generating it.

    For example you can see some options at http://pdfmake.org/playground.html for tables, alignments, images, styling, although there are no specific predefined layouts.

    In the public side, it's generated in the public.js file, in the function

    $('.b2bking_offer_download').on('click',function(){

    Basically, to make changes to the PDF, you'd need to make changes here in this function.


    Hope that helps, but let me know if you have any questions or anything I can help with,


    Kind regards,

    Stefan


  •  1
    Cameron replied

    Thanks Stefan,

    I assume I'll need to copy that file into my child theme folder? is there a particular folder in there I need to create for it?

    Kind Regards,

    Cameron

  •  2,192
    WebWizards replied

    I don't think it works to copy that to the theme folder since it's a JS file. 

    However, we can remove the event listener for the click event from the download buttons, and add the (your modified) function again. 

    You would add the following JS to your site:

    jQuery(document).ready(function(){
        setTimeout(function(){
            $('.b2bking_offer_download').off('click');
            $('.b2bking_offer_download').on('click',function(){
                var logoimg = b2bking_display_settings.offers_logo;
                var offernr = $(this).parent().parent().parent().find('#b2bking_offer_id').val();
                // if images are lazy-loaded, replace
                let logodatasrc = jQuery('#b2bking_img_logo').attr('data-src');
                if (logodatasrc !== undefined && logodatasrc !== ''){
                    jQuery('#b2bking_img_logo').attr('src', logodatasrc);
                }
                jQuery('.b2bking_hidden_img').each(function(i){
                    let logodatasrcth = jQuery(this).attr('data-src');
                    if (logodatasrcth !== undefined && logodatasrcth !== ''){
                        jQuery(this).attr('src', logodatasrcth);
                    }
                });
                var imgToExport = document.getElementById('b2bking_img_logo');
                var canvas = document.createElement('canvas');
                canvas.width = imgToExport.width; 
                canvas.height = imgToExport.height; 
                canvas.getContext('2d').drawImage(imgToExport, 0, 0);
                    var dataURL = canvas.toDataURL("image/png"); 
                    // get all thumbnails 
                    var thumbnails = [];
                    var thumbnr = 0;
                    
                    if (parseInt(b2bking_display_settings.offers_images_setting) === 1){
                      // get field;
                      let field = $(this).parent().parent().parent().find('.b2bking_offers_thumbnails_str').val();
                      let itemsArray = field.split('|');
                      // foreach condition, add condition, add new item
                      itemsArray.forEach(function(item){
                          if (item !== 'no'){
                              var idimg = 'b2bking_img_logo'+thumbnr+offernr;
                                var imgToExport = document.getElementById(idimg);
                                var canvas = document.createElement('canvas');
                                canvas.width = imgToExport.width; 
                                canvas.height = imgToExport.height; 
                                canvas.getContext('2d').drawImage(imgToExport, 0, 0);
                                  let datau = canvas.toDataURL("image/png"); 
                                  thumbnr++;
                                  thumbnails.push(datau);
                          } else {
                              thumbnails.push('no');
                          }
                      });
                  }
                  thumbnr = 0;
                var customtext = $(this).parent().parent().parent().find('.b2bking_myaccount_individual_offer_custom_text').text();
                customtext = customtext.replace('\t','').trim();
                var customtextvendor = $(this).parent().parent().parent().find('.b2bking_myaccount_individual_offer_custom_text_vendor').text();
                customtextvendor = customtextvendor.replace('\t','').trim();
                var customtexttitle = b2bking_display_settings.offer_custom_text;
                if (customtext.length === 0 && customtextvendor.length === 0){
                    customtexttitle = '';
                }
                
                var bodyarray = [];
                bodyarray.push([{ text: b2bking_display_settings.item_name, style: 'tableHeader', margin: [7, 7, 7, 7] }, { text: b2bking_display_settings.item_quantity, style: 'tableHeader', margin: [7, 7, 7, 7] }, { text: b2bking_display_settings.unit_price, style: 'tableHeader', margin: [7, 7, 7, 7] }, { text: b2bking_display_settings.item_subtotal, style: 'tableHeader', margin: [7, 7, 7, 7] }]);
                // get values
                jQuery(this).parent().parent().parent().find('.b2bking_myaccount_individual_offer_element_line').each(function(i){
                    let tempvalues = [];
                    if (parseInt(b2bking_display_settings.offers_images_setting) === 1){
                        if (thumbnails[thumbnr] !== 'no'){
                            // add name + images
                            tempvalues.push([{ text: jQuery(this).find('.b2bking_myaccount_individual_offer_element_line_item_name').first().text(), margin: [7, 7, 7, 7] },{
                                    image: thumbnails[thumbnr],
                                    width: 40,
                                    margin: [15, 5, 5, 5]
                                }]);
                        } else {
                            // add name only
                            tempvalues.push({ text: jQuery(this).find('.b2bking_myaccount_individual_offer_element_line_item_name').first().text(), margin: [7, 7, 7, 7] });
                        }
                        thumbnr++;
                    } else {
                        // add name only
                        tempvalues.push({ text: jQuery(this).find('.b2bking_myaccount_individual_offer_element_line_item_name').first().text(), margin: [7, 7, 7, 7] });
                    }
                    tempvalues.push({ text: jQuery(this).find('.b2bking_myaccount_individual_offer_element_line_item:nth-child(2)').text(), margin: [7, 7, 7, 7] });
                    tempvalues.push({ text: jQuery(this).find('.b2bking_myaccount_individual_offer_element_line_item:nth-child(3)').text(), margin: [7, 7, 7, 7] });
                    tempvalues.push({ text: jQuery(this).find('.b2bking_myaccount_individual_offer_element_line_item:nth-child(4)').text(), margin: [7, 7, 7, 7] });
                    bodyarray.push(tempvalues);
                });
                bodyarray.push(['','',{ text: b2bking_display_settings.offer_total+': ', margin: [7, 7, 7, 7], bold: true },{ text: jQuery(this).parent().parent().parent().find('.b2bking_myaccount_individual_offer_bottom_line_total strong').text(), margin: [7, 7, 7, 7], bold: true }]);
                let imgobj = {
                            image: dataURL,
                            width: 150,
                            margin: [0, 0, 0, 30]
                        };
                var contentarray =[
                        { text: b2bking_display_settings.offer_details, fontSize: 14, bold: true, margin: [0, 20, 0, 20] },
                        {
                            style: 'tableExample',
                            table: {
                                headerRows: 1,
                                widths: ['*', '*', '*', '*'],
                                body: bodyarray,
                            },
                            layout: 'lightHorizontalLines'
                        },
                        { text: b2bking_display_settings.offer_go_to, link: b2bking_display_settings.offers_endpoint_link, decoration: 'underline', fontSize: 13, bold: true, margin: [0, 20, 40, 8], alignment:'right' },
                        { text: customtexttitle, fontSize: 14, bold: true, margin: [0, 50, 0, 8] },
                        { text: customtextvendor, fontSize: 12, bold: false, margin: [0, 8, 0, 8] },
                        { text: customtext, fontSize: 12, bold: false, margin: [0, 8, 0, 8] },
                    ];
                if (logoimg.length !== 0){
                    contentarray.unshift(imgobj);
                }
                var docDefinition = {
                    content: contentarray
                };
                pdfMake.createPdf(docDefinition).download('offer.pdf');
            });
        }, 250);
    });
    

    All I did there is that I added 

     $('.b2bking_offer_download').off('click');
    

    to remove the existing function, and then I copy pasted the function to add it again.


    You can add this as a JS snippet per our guide here: https://woocommerce-b2b-plugin.com/docs/how-to-add-a-snippet-php-or-js/

    Hope that makes sense, but let me know if I can assist,

  •  1
    Cameron replied

    Thanks for that, Once I find out what changes my client wants I'll jump in and see how I go.

  •   Cameron replied privately
  •   WebWizards replied privately
  •  1
    Agence Web replied

    Hi,

    I'm trying to customise the pdf file generated when the offer was created but it's not that easy...
    I would like to change (translate) the texts inside the pdf:

    can you help me ?

    Thanks


  •  2,192
    WebWizards replied

    Hi there,

    The texts should be fully translatable via Loco Translate. If you're not familiar with that, I'd recommend you follow our guide here: https://woocommerce-b2b-plugin.com/docs/how-to-translate-b2bking-to-any-language-localization/

    Or is there any specific text you're having issues with?


    Kind regards,

    Stefan

  •  1
    Agence Web replied

    Hi

    I have already translated many of the B2Bking texts with locotranslate: it works well on the website.

    However, when generating the pdf file of the offers, the texts are not translated.

    Do you have any idea what the problem is?


    Thank uou



  •  2,192
    WebWizards replied

    I suggest you try to go to Loco Translate -> Plugins -> B2BKing -> your language -> and then click SYNC.

    9898631324.png

    Then try to search for the texts in the PDF and see if you can find them then.


    If that doesn't work, I'm not sure why. I can try to check the issue directly if you'd like to share a backend login to your site or staging site. Please also let me know if you are downloading the PDF in the site backend, or in the frontend.

  •  1
    Agence Web replied

    Ok thank you


    After sync and modify translation it's ok !

  •  2,192
    WebWizards replied

    Glad that worked, thanks for the update!