Need to use multiple pictures for products in MarketPress

I am setting up MarketPress. So for it is working pretty well. Some of our products will have several pictures associated with them. I can easily add these pictures when creating the product, but it does not display correctly when done. If I select "show product image" in the presentation settings, then the pictures do not line up as the featured image gets placed into a div and the additional images that I add are put in a <P> after the div.

So I disabled "show product image" and the page displays perfectly. The lightbox function does not work however. So I copied the html that gets written for the featured image and placed that in the product page. The page still displays perfectly, but the lightbox function still did not work. I then compared the output of the page with each setting and found that just by setting "show product image" to no, some javascript declarations are removed as well. These java script declarations are what seem to make the lightbox functionality work.

Is there a way for me to add these declarations to the page even with the "show product image" set to no? Below are the lines that are missing from the file when this is the setting.

<script type='text/javascript'>
/* <![CDATA[ */
var lumeboxOptions = {"graphicsDir":"http://gutzytri.com/team/wp-content/plugins/marketpress/marketpress-includes/lightbox/style/"};
/* ]]> */
</script>
<script type='text/javascript' src='http://gutzytri.com/team/wp-content/plugins/marketpress/marketpress-includes/lightbox/js/jquery.lumebox.min.js?ver=2.9.6.2'></script>
  • Phil
    • The Incredible Code Injector

    Ok, now I have run into an issue. I created a plugin some time ago to retrieve and set some database information regarding my members. This plugin is pretty basic and uses ajax to retrieve data and jquery to place the data in the appropriate controls. This plugin no longer works when marketpress-product-gallery is enabled. The alert for function success displays correctly, and the alert right after the var statement displays correctly, but the alert at the end of the function does not display at all. There seems to be some javascript conflict or something. This leads me to believe that the marketpress-product-gallery plugin changes something with javascript when it is enabled. Any idea how to troubleshoot this? I have enabled support access for you as well.

    function makeAjaxRequest_get_pending_requests(){
            $.ajax({
              type: "POST",
    		  data: {},
    		  dataType: "json",
              url: 'wp-admin/admin-ajax.php?action=get_pending_requests',
              success: function(result) {
    			alert("The Ajax request was successful");
    			var trHTML = '<tbody>';
    			alert(trHTML);
    			$.each(result, function() {
    				trHTML += '<tr>';
    				$.each(this, function(key, val){
    					if (key !== "Code"){
    						trHTML += '<td>' + val + '</td>';
    					} else {
    						trHTML += '<td>' + val + '</td><td><input type="button" name="btn-remove-' + val + '" id="btn-remove-' + val + '" class="revoke_button" onclick="revoke_code(' + "'" + val + "'" + ')" value="Revoke" /></td>';
    					}
    				});
    				trHTML += '</tr>';
    			});
    			trHTML += "</tbody'>"
    			alert(trHTML);
    			$('#Pending_Table thead').after(trHTML);
              },
    		  error: function (xhr, ajaxOptions, thrownError) {
    			alert("Failed to get JSON Data");
              }
            });
        }
  • Vinod Dalvi
    • WP Unicorn

    Hi @Phil,

    Thank you for your reply and granting the support staff access.

    What's the plugin name that you have created?

    In which sub site of your multisite network are you using it?

    Also please tell me when are you getting the two alert messages or hoe can i reproduce and confirm the issue on your site so that i can troubleshoot it?

    Regards,
    Vinod Dalvi

  • Phil
    • The Incredible Code Injector

    Hi Vinod,

    The site that the plugins are activated on is gutzytri.com/team. The plugin I created is called GTT Admin. From the dashboard, you can go to the GTT Admin link and choose either Member Info or Member Admin. From the Member Info page, you can select a member from the combo box and the page should update with the information for that member. On the Member Admin page, when it loads, the table for pending requests should be populated with two pending requests automatically. You can also select a member from the combo box and be able to see if the member is enabled or disabled. The alert messages that I was speaking about were only added to help me identify where in the process things were failing. They are normally not there.

    When the marketpress-product-gallery pluging is deactivated, all of the functionality in the GTT Admin plugin works correctly.

    Thank you for the assistance.

  • Ash
    • WordPress Hacker

    Hello @Phil

    I hope you are well today.

    In your plugin, I can see jQuery in included with direct link:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    This is not recommended at all. You need to load the jQuery comes with WordPress and enqueue your custom script. Or you can use wp_head or wp_footer hook too. But for jQuery, it must be enqueued from WordPress to avoid conflict.
    https://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Let me show you the standard way:

    1. If you want to put your custom script using wp_head or wp_footer hook then load jquery like

    wp_enqueue_script( 'jquery' );

    Then you use your wp_head or wp_footer hook.

    2. If your script is a separate js file, the standard way to enqueue is:

    wp_enqueue_script( 'script-name', '/path/to/script', array( 'jquery' ), '1.0.0', true );

    No need to load jQuery separately.

    One more thing, as you are using $ version of jQuery, then write all of your code inside the following block:

    jQuery(function($) {
      // All code goes here with $ sign
    });

    Otherwise you have to use "jQuery" instead of "$" sign.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • Phil
    • The Incredible Code Injector

    Hi Ash,

    Sorry for sounding dumb here, but I don't really get it. I thought by linking to jquery, I was basically just loading a library to use with the code on that page. Is that not correct? Are you saying that I would need to enqueue the jquery library that is included with wordpress? I would think that this would have been done in the core somewhere. Would removing the link to jquery just make the script use the version that came with wordpress?

    I am sort of thinking that when you talk about a script, you are talking about creating a library of functions for use on a page, is that correct? In my case I think I only need the jquery library itself.

    Thanks for your help again. I don't know what I would do without the support you guys offer. It truly is very much appreciated.

  • Ash
    • WordPress Hacker

    Hello @Phil

    I thought by linking to jquery, I was basically just loading a library to use with the code on that page. Is that not correct? Are you saying that I would need to enqueue the jquery library that is included with wordpress? I would think that this would have been done in the core somewhere. Would removing the link to jquery just make the script use the version that came with wordpress?

    You don't need to load jQuery linking to jQuery library. Latest version of jQuery always comes with the latest WordPress. So, if any other plugin enqueue jQuery in correct way, and you direct link to jQuery CDN library, two jQuery will conflict.

    You still need to enqueue jQuery with your custom script. It doesn't matter if other plugin enqueues jQuery or not, when you use wp_enqueue_script (even if multiple times), worpress will load only one copy of jQuery for your entire site.

    If you look at the doc: https://codex.wordpress.org/Function_Reference/wp_enqueue_script you will see in 3rd parameter you need to pass the dependencies. In your case, your custom script is dependent to jQuery and you will pass array( 'jquery' ) as 3rd parameter. The wordpress will check if jQuery is already loaded, if not it will load and after that your custom script will be loaded.

    It may sound complex, but if you get used to once, it will be very easy for you :slight_smile:

    For quick workaround, you can try to use "jQuery" instead of "$" sign in your custom script. If it doesn't work, you need to try to enqueue.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • Phil
    • The Incredible Code Injector

    Ok, so before I go and blow things up, let me make sure I understand this concept. I think you are saying I should remove all of the javascript code from the page and put that into a file. Lets call this gttadmin.js. Then I would need to enqueue this script in functions.php like so:

    function gttadmin_script_enqueue() {
    	wp_enqueue_script( 'gttadmin', path to gttadmin.js, 'jquery' );
    }
    
    add_action( 'wp_enqueue_scripts', 'gttadmin_script_enqueue' );

    Am I getting close?

    Thanks again.

  • Ash
    • WordPress Hacker

    Ok, so before I go and blow things up

    Of course, take a backup before making any changes :smiley:

    Am I getting close?

    Yes, you are close! The correct should be:

    function gttadmin_script_enqueue() {
    	wp_enqueue_script( 'gttadmin', 'path to gttadmin.js', array( 'jquery' ) );
    }
    
    add_action( 'wp_enqueue_scripts', 'gttadmin_script_enqueue' );

    The reason of using array to place jQuery is if your script is dependent to multiple library, then you can pass all in one line, like for example:

    wp_enqueue_script( 'gttadmin', 'path to gttadmin.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-tabs' ) );

    Also, do not forget this in your custom script:

    One more thing, as you are using $ version of jQuery, then write all of your code inside the following block:

    jQuery(function($) {
      // All code goes here with $ sign
    });

    Otherwise you have to use "jQuery" instead of "$" sign.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • Phil
    • The Incredible Code Injector

    Hey Ash, thanks for the assistance but I am still struggling with this. I have two different pages within this plugin to display. Each of them had some JavaScript in them. I have removed the JavaScript from these pages and put them into to files. GTT_Admin.js and GTT_Member.js. These have been placed in a js directory in the GTT Admin plugin directory. I have added the following in the main plugin file to enqueue them:

    function gttadmin_script_enqueue() {
    	wp_enqueue_script( 'member-admin', plugins_url( 'js/GTT_Admin.js', __FILE__ ), array( 'jquery' ) );
    	wp_enqueue_script( 'member-info', plugins_url( 'js/GTT_Member.js', __FILE__ ), array( 'jquery' ) );
    }
    
    add_action( 'wp_enqueue_scripts', 'gttadmin_script_enqueue' );

    It seems that the scripts are not being enqueue'd properly. If I look at the page source, I would expect to see references to these scripts wouldnt I? I do not see any reference to these. I also tried putting this code into the functions.php file with the same result. What am I doing wrong here?

  • Ash
    • WordPress Hacker

    Hello @Phil

    In your case, you need to enqueue in admin end. So, you need to use admin_enqueue_scripts hook (sorry my bad, I should have mentioned that too)

    Try this:

    function gttadmin_script_enqueue() {
    	wp_enqueue_script( 'member-admin', plugins_url( 'js/GTT_Admin.js', __FILE__ ), array( 'jquery' ) );
    	wp_enqueue_script( 'member-info', plugins_url( 'js/GTT_Member.js', __FILE__ ), array( 'jquery' ) );
    }
    
    add_action( 'admin_enqueue_scripts', 'gttadmin_script_enqueue' );

    Let me know if it works.

    Cheers
    Ash

  • Phil
    • The Incredible Code Injector

    Hi Ash,

    We are making progress. It still does not work but I can now see that the js files are being enqueued. The path to the js files is incorrect. It was looking for my child theme folder for some reason. I have omitted the _FILE_ parameter and now it almost works. The last issue to resolve I think is that the plugin folder name is "GTT Admin" with a space. Even though I put the space in the path, the page renders without the space making the path to the js file invalid.

    wp_enqueue_script( 'member-info', plugins_url( 'GTT Admin/js/GTT_Member.js'), array( 'jquery' ) );

    Ideas?

  • Phil
    • The Incredible Code Injector

    Hi Ash,
    I am not sure if this is correct or not, but here is what I did to make it work. I added \%20 in the path.

    function gttadmin_script_enqueue() {
    	$plugdir = "GTT\%20Admin/";
    	wp_enqueue_script( 'member-admin', plugin_dir_url( ) . $plugdir . "js/GTT_Admin.js", array( 'jquery' ) );
    	wp_enqueue_script( 'member-info', plugin_dir_url( ) . $plugdir . 'js/GTT_Member.js', array( 'jquery' ) );
    }

    Please do let me know if this is not correct. While it does seem to work, I realy want to do things correctly.

    Thanks for all of your help.

    Phil

  • Ash
    • WordPress Hacker

    Hello @Phil

    It seems to be okay :slight_smile:

    Just a note, it's not best practice to use space and uppercase letter in any folder name and file name. The best practice is in your case to keep the folder name is "gtt-admin" and the file names are gtt_admin.js and gtt_member.js

    The main reason is, the spaces and case are read differently in different operating system. For example, Windows and OSx are not case sensitive but Linux is.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.