MarketPress issues - MarketPress product variations stopped working. Also when adding to cart, prod

MarketPress product variations stopped working. Also when adding to cart, product picture is skewed - very tall and not wide enough.

  • James Morris

    Hello Robert,

    I hope you are doing well today.

    I've logged into your site and I'm seeing some unusual symptoms, but I'm afraid WordPress access alone is not providing me enough access to determine the root cause.

    In order to help you better with your issue, would you please grant me further access to your site and server?

    Please visit the Contact page and complete the form with the following information:

    Subject: "Attn: James Morris"

    In the Message box, please provide the following:

    - link back to this thread for reference
    - any other relevant urls

    - Admin login:
    Admin username
    Admin password
    Login url

    - Hosting Control Panel Login
    Admin username
    Admin password
    Login url

    ~OR~

    - FTP credentials
    host
    username
    password
    (and port if required)

    Best regards,

    James Morris

  • Katya Tsihotska

    Hi Robert

    Hope you're having a great day!

    Please don't post any credentials to your website in your threads - it is a public forum, so everyone can see it. I removed them from your message, but I would recommend you to change them in any case. Please, use only our contact form to provide any sensitive information https://premium.wpmudev.org/contact/#i-have-a-different-question

    I'll pass credentials from your message to James, but if you'll change credentials, please send new credentials to James through our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question using the following template:

    Subject: "Attn: James Morris"

    In the Message box, please provide the following:

    - link back to this thread for reference
    - any other relevant URLs

    - Admin login:
    Admin username
    Admin password
    Login url

    - Hosting Control Panel Login
    Admin username
    Admin password
    Login url

    ~OR~

    - FTP credentials
    host
    username
    password
    (and port if required)

    Kind regards,
    Katya

  • James Morris

    Hello Robert,

    I apologize for the delay on this issue.

    I did quite a bit of digging on your site and I found the 2 sources of the problems you're having.

    1. Somehow your Product Attributes had been deleted. These attributes are used by product variations. Because they were missing, the variations display was not functioning correctly, even though the variations were defined in the actual product. I restored the attributes for Size and Color and the variations started working again.

    2. The current version of this plugin uses a fixed width of 300px for the variations modal display. This is hard set in the code and cannot be changed by settings or CSS. Given the nature of your product image and style of your site, currently the best way to get things working correctly while still maintaining a clean appearance was to disable the modal display for selection of the variations. I did this by deregistering that script. Now, when you click "Choose Options" on a variable product, you are redirected to the single product page where you can select the variations there.

    I accomplished this by re-writing your child-theme's functions.php like so...

    function child_dequeue_script() {
        wp_dequeue_script( 'mp-cart' );
        wp_dequeue_script( 'colorbox' );
     }
    add_action( 'wp_print_scripts', 'child_dequeue_script', 100 );
    
    add_action( "wp_enqueue_scripts", "theme_enqueue_styles",35);
    function theme_enqueue_styles() {
        wp_enqueue_style( "parent-style", child_theme_uri . "/style.css" );
        wp_enqueue_script( 'mp-cart', mp_plugin_url( 'ui/js/mp-cart.js' ), array(
            'ajaxq',
            'jquery-validate'
        ), MP_VERSION, false );
    }

    I understand this is not ideal. If you would like, I can task this up for our Dev Team to look into further, but that may take a bit of time as this would require a rewrite of some of the plugin's core files.

    Please take a look and let us know if things are functioning better for you on your end and whether or not you would like me to task this issue up for further inspection by our Dev Team.

    Best regards,

    James Morris

  • Robert

    Thanks for your time and assistance on this issue, James. Very much appreciated.

    When I try to purchase them item in the store, after clicking 'choose options', the box starts as a wide box, but then changes to the very tall and narrow window. Is there no way to have that window any wider so the picture can be seen?

    Also, when going to okobserver.org/store , It's kind of ugly. Can the default page be the products page instead?

  • James Morris

    Hello Robert,

    I hope you are well today. Sorry for the delay here. I had to do some tinkering with the code to get this to play nicely.

    First, the easy one :wink:

    To display your products on the Store homepage, all you have to do is add the [mp_list_products] shortcode to that page. I've already set this up for you so you can see how it works. If you only want the products to display on the Store page, just remove the shortcode from the Products page.

    Next, the not so easy one. I worked with my colleague Panos to basically rewrite the modal jQuery loop but outside the plugin. We did so in such a way that the modal would take up 100% of the width of the window. This was the best way to ensure that both desktop and mobile users would see the modal correctly. Here's the code added to your functions.php for this purpose.

    <?php
    /* Functions of Child Theme */
    
    //Defined Child Theme URL
    define('child_theme_uri', dirname( get_bloginfo('stylesheet_url')) );
    
    /**
     * Dequeue Script
     *
     * Hooked to the wp_print_scripts action, with a late priority (100),
     * so that it is after the script was enqueued.
    */
    
    function child_dequeue_script() {
        wp_dequeue_script( 'colorbox' );
     }
    add_action( 'wp_print_scripts', 'child_dequeue_script', 100 );
    
    add_action( "wp_enqueue_scripts", "theme_enqueue_styles",35);
    function theme_enqueue_styles() {
        wp_enqueue_style( "parent-style", child_theme_uri . "/style.css" );
    }
    
    add_action( 'wp_footer', function(){
    
        if ( ! is_page( array(
            mp_get_setting( 'pages->products' ),
            mp_get_setting( 'pages->store' )
            ) ) ){
            return;
        }
    
        ?>
        <script type="text/javascript">
            (function($){
    
                $(document).ready(function(){
    
                    $( '.mp_button-has_variations' ).each(function(){
    
                        let cur_button = $(this);
    
                        let new_button = $( '<a/>', {
                            'class': 'mp_button mp_link-buynow cboxElement',
                            href: cur_button.attr('href'),
                            text: cur_button.text()
                        });
    
                        var mywidth = $(window).width();
    
                        new_button.attr( 'data-href', cur_button.data( 'href' ) ).colorbox( {
    
                            "close": "x",
                            "href": function() {
                                return new_button.attr( 'data-href' );
                            },
                            "overlayClose": false,
                            "trapFocus": false,
                            //"width": 630,
                            "width": mywidth,
                            "overlayClose": true,
                            "escKey": true,
                            onLoad: function() {
                                $( "#colorbox" ).removeAttr( "tabindex" ); //remove tabindex before select2 init
                            },
                            onComplete: function() {
                                $( "select.mp_select2" ).mp_select2( {
                                    "dropdownCssClass": "mp_select2",
                                    "dropdownAutoWidth": 1,
                                    "minimumResultsForSearch": -1
                                } );
                            }
                        } );
    
                        cur_button.replaceWith( new_button );
    
                    });
                });
    
            })(jQuery);
        </script>
        <?php
    }, 10 );
    
    add_action('wp_head', 'tweak_cboxContent_css', 100);
    function tweak_cboxContent_css(){
        ?>
        <style type="text/css" media="screen">
        #cboxContent{
            margin: 0 -2px -4px !important;
            overflow:hidden !important;
        }
        #cboxLoadedContent img {
            max-width:100% !important;
            height:auto !important;
        }
        </style>
        <?php
    }
    
    ?>

    Please test this out and let us know if this is working correctly for you.

    Best regards,

    James Morris