Template for Offers PDF

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

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://b2bkingplugin.com/docs/how-to-add-a-snippet-php-or-js/

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

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://b2bkingplugin.com/docs/how-to-translate-b2bking-to-any-language-localization/

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

Kind regards,

Stefan

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

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.

Glad that worked, thanks for the update!